Материал: Web-дизайн. лабораторный практикум. Суворов А.П., Проценко В.Н
.blue (color:red; background-color: blue} -->
</STYLE>
Теперь два класса red и blue можно применять к любым элементам документа:
<P CLASS="red">Красный шрифт</P>
<P CLASS="blue">Красный шрифт на синем фоне</P>
Первый абзац отразится красным шрифтом, а второй - красным шрифтом на синем фоне.
1.2.6. Идентификаторы
Присвоение стилей с помощью идентификаторов применяется в случае, если данному идентификатору соответствует только один элемент на странице. Если элементов, которым необходимо присвоить такой стиль, несколько – это уже класс.
Параметр ID, как и параметр CLASS, не влияет на отображение браузером элемента HTML, но задаёт уникальное имя элемента, которое используется для ссылок на него в сценариях и таблицах стилей. Параметр ID можно применять к любому элементу документа.
Правила таблиц стилей регламентируют использование уникального идентификационного имени элемента в качестве селектора, предваряя его символом #:
<STYLE TYPE="text/css"> <!--
#myID {letter-spacing: 1em; }
H1#form3 (color:red; background-color: blue} -->
</STYLE>
<BODY>
<P ID=myID> Разрежённые слова в абзаце</P> <H1 ID=form2>Чёрный заголовок</P>
В этом примере абзац идентифицирован именем myID в параметре ID, поэтому к нему применимо правило с селектором #myID. Второе правило в таблице стилей должно применяться к заголовку первого уровня с идентификатором form3. Такого элемента в нашем фрагменте нет, и поэтому заголовок form2 отображается с применением правила по умолчанию.
15
1.2.7. Свойства элементов, управляемых с помощью CSS
В настоящее время язык CSS насчитывает довольно большое количество свойств элементов HTML, которыми он может управлять.
Свойства шрифта
Цвет элемента и цвет фона
Свойства текста
Единицы измерения
Границы
Курсоры
Отступы
Полоса прокрутки
Псевдо-элементы
Позиционирование
Размеры элемента
Свойства таблицы
Рассмотрим наиболее интересные из них:
|
Свойства шрифта |
Таблица 1.1 |
font- |
Используется для указания шрифта или шрифтового семейства, которым будет |
|
family |
отображаться элемент. |
|
|
P {font-family: Times New Roman, sans-serif;} |
|
font- |
Задает способ начертания шрифта: normal - Нормальный (по умолчанию), italic - |
|
style |
Курсив, oblique - Наклонный. |
|
|
P {font-style: italic;} |
|
font- |
Задает варианты начертания шрифта: normal - Нормальный (по умолчанию), small- |
|
variant |
caps - Все буквы заглавные). |
|
|
P {font-variant: small-caps;} |
|
font- |
Определяет степень жирности шрифта с помощью параметров: normal, bold, bolder, |
|
weight |
lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 |
|
|
B {font-weight: bolder;} |
|
font-size |
Устанавливает размер шрифта. Параметр может указываться как в относительной |
|
|
(проценты), так и абсолютной величине (пункты, пикселы, сантиметры) |
|
|
H1 {font-size: 200%;} |
|
|
H2 {font-size: 150px;} |
|
|
H3 {font-size: 400pt;} |
|
|
Цвет элементов и цвет фона |
Таблица 1.2 |
color |
Определяет цвет элемента |
|
|
I {color: green;} |
|
background- |
Устанавливает цвет фона для элемента – именно для элемента, а не для |
|
color |
странички. Разные броузеры отображают это свойство по-разному: Microsoft IE |
|
|
отводит под фон элемента всю доступную ширину страницы, а Netscape Navigator |
|
|
– лишь ширину, занимаемую этим элементом. |
|
|
H4 {background-color: yellow;} |
|
|
В скриптовых языках используйте object.style.backgroundColor [ = sColor ] |
|
16
|
Продолжение табл. 1.2 |
background-image |
Устанавливает или получает фоновый рисунок для элемента. |
|
Может принимать значения |
|
none - По умолчанию. Используется цвет родительского объекта |
|
Url - Задается абсолютный или относительный путь к рисунку |
|
H3 {background-image: yellow;} |
|
В скриптовых языках используйте object.style.backgroundImage [ = |
|
sLocation ] |
background- |
Устанавливает или получает поведение фонового рисунка для элемента. |
attachment |
Может принимать значения |
|
scroll - По умолчанию. Фоновый рисунок прокручивается вместе с |
|
элементом |
|
fixed - Фоновый рисунок не прокручивается вместе с элементом |
|
body {background-attachment: fixed;} |
|
В скриптовых языках используйте object.style.backgroundAttachment |
|
[ = sAttachment ] |
|
Свойства текста |
Таблица 1.3 |
text- |
Устанавливает эффекты оформления шрифта, такие, как подчеркивание или |
|
decoration |
зачеркнутый текст |
|
|
H4 {text-decoration: underline;} - подчеркивание |
|
|
A {text-decoration: none;} - стандартный текст |
|
|
I {text-decoration: line-through;} - зачеркивание |
|
|
B {text-decoration:overline;} - надчеркивание |
|
text- |
Задает преобразование регистра текста при отображении |
|
transform |
H4 {text-transform: capitalize;} - Первая буква каждого слова преобразуется в |
|
|
||
|
заглавную |
|
|
A {text-transform: uppercase;} - Все буквы преобразуются в заглавные |
|
|
I {text-transform: lowercase;} - Все буквы преобразуются в строчные |
|
|
B {text-decoration:none;} - Отменяет установленные преобразования |
|
text-align |
Определяет выравнивание элемента. Возможные значения: left, right, center, justify |
|
|
P {text-align:justify} |
|
|
H5 {text-align: center} |
|
text-indent |
Устанавливает отступ первой строки текста. Чаще всего используется для создания |
|
|
параграфов с табулированной первой строкой. |
|
|
P {text-indent: 50pt;} |
|
line-height |
Управляет интервалами между строками текста. |
|
|
P {line-height: 50 %} |
|
word- |
Устанавливает интервалам между словами. Можно использовать отрицательные |
|
spacing |
значения |
|
|
P {word-spacing: 50 %} |
|
letter- |
Устанавливает интервалам между буквами |
|
spacing |
P {letter-spacing: 50 pt} |
|
vertical- |
Устанавливает вертикальное положение элемента. Может принимать следующие |
|
align |
значения: baseline middle sub super text-top text-bottom top bottom |
|
|
P {vertical-align: sup} |
|
|
Позиционирование |
Таблица 1.4 |
position Устанавливает или определяет позицию элемента. Может принимать значения: static - По умолчанию. Позиция объекта определяется текущей разметкой HTML по стандартным правилам
absolute - Позиция объекта определяется относительно позиции родительского объекта или отностительно объекта body, если позиция родителя не определена свойствами top
и left
relative - Позиция объекта определяется смещением от заданных свойств top и left
17
Продолжение табл.1.4
left/top Устанавливает или определяет позицию элемента относительно левого/верхнего края следующего объекта. Может принимать значения:
auto - По умолчанию. Позиция объекта определяется текущей разметкой HTML по стандартным правилам
length - число с заданной единицей измерения (10mm;5px;3em)
percentage - число процентов от ширины/высоты родительского объекта (10%) Свойство left или top можно использовать, если задан атрибут position, иначе параметры просто игнорируются
z- Устанавливает или получает порядок слоев для объектов. В скриптовых языках index используйте конструкцию object.style.zIndex [ = vOrder ]. Может принимать два
значения:
строку auto (по умолчанию) - Позиция объекта определяется текущей разметкой HTML по стандартным правилам
Order - число, задающее позицию объекта в слоях.
С помощью данного свойства можно накладывать один объект на другой (или прятать за другой объект). Можно использовать и отрицательные значения. Данное свойство применимо только к объектам, имееющим
атрибут absolute или relative свойства position
Нельзя применять к объектам, имеющим окно (например, select)
1.3.Основы JavaScript
JavaScript — это полноценный динамический язык программирования, который применяется к HTML документу, и может обеспечить динамическую интерактивность на веб-сайтах.
JavaScript сам по себе довольно компактный, но очень гибкий, и разработчиками написано много инструментов поверх основного JavaScript языка, которые разблокируют огромное количество дополнительных функций с очень небольшим усилием. К ним относятся:
Программные Интерфейсы приложения (API) встроенные в браузеры, обеспечивающие различные функциональные возможности, такие как динамическое создание HTML и установку CSS стилей, захват и манипуляция видеопотоком, работа с веб-камерой пользователя или генерация 3D графики и аудио сэмплов.
Сторонние API позволяют разработчикам внедрять функциональность в свои сайты от других разработчиков, таких как Twitter или Facebook.
Также вы можете применить к вашему HTML сторонние фреймворки и библиотеки, что позволит вам ускорить создание сайтов и приложений.
1.3.1. Общий обзор языка
Основные определения
18
Любая программа оперирует некими данными: именем стилевого класса, размерами элемента, цветом шрифта и прочие. JavaScript может манипулировать данными, относящимися к разным типам.
Тип данных описывает их возможные значения и набор применимых к ним операций. Типы данных бывают простыми и сложными. Сущность, относящаяся к простому типу данных, может хранить только одно значение (это строковые, числовые и логические типы данных). Сущность сложного типа данных может хранить сразу несколько значений. Например – массивы. Другой пример сложного типа данных – объекты.
Для создания механизма управления страницами на клиентской стороне было предложено использовать объектную модель документа. Суть модели в том, что каждый HTML-контейнер - это объект, который характеризуется тройкой:
Свойства
Методы
События
Существование программных объектов самих по себе не имеет никакого смысла. Они дадут преимущества при программировании тогда, когда можно организовать их взаимодействие.
1.Объекты – это сложные сущности, позволяющие хранить сразу несколько значений разных типов данных, они представляют собой блоки, из которых строится JavaScript. Применяются для возвращения значений и изменения состояния форм, страниц, браузера и определенных программистом переменных. Объекты можно сопоставить с существительными. Кошка, автомобиль, дом, компьютер, форма – все это существительные, они могут быть представлены как объекты.
2.Экземпляры объекта – сущности, хранящие реальные данные и созданные на основе этого объекта. То есть конкретный, реально существующий дом, находящийся по заданному адресу можно рассматирвать, как экземпляр объекта типа дом.
3.Свойства – набор внутренних параметров объекта. Используются для того, чтобы различать экземпляры одного объекта – например, все экземпляры типа дом. Свойства сравнимы с прилагательными и ссылаются на уникальные для каждого экземпляра объекта особенности. Один и тот же объект может обладать многими свойствами: дом может быть большим и маленьким, синим и красным. Разные объекты могут обладать одинаковыми свойствами: дерево, так же, как и дом, может быть большим и маленьким, синим и красным...
19