Единицы измерений значений свойств

Единица измерения	Форма записи
Абсолютные единицы
Дюйм	in
Сантиметр	cm
Миллиметр	mm
Пункт	pt
Пики	pc
Относительные единицы
Пиксел	px
Проценты	%

Символьные значения состоят из букв латинского алфавита или комбинаций букв, цифр и специальных символов. Символьные значения присваиваются многим стилевым свойствам, например, свойствам шрифтов font-family, свойству текста text-align. Другим примером использования символьных значений являются свойства цвета color и background-color, значения которых задаются в символьном формате RGB-модели. Отметим, что в CSS для описания цвета применяются и другие форматы, которые не поддерживаются в HTML: десятичный (например, rgb(128, 0, 128)) и процентный (например, rgb(50%, 0, 50%)).

Множественные описания. Отметим, что правило может состоять из нескольких описаний, разделенных между собой с помощью точки с запятой. Согласно правилам CSS, после последнего описания ставить точку с запятой не обязательно, и некоторые дизайнеры так и делают. Однако более опытные дизайнеры все равно ставят точку с запятой даже после последнего описания. Делается это для того, чтобы избежать проблем при последующем редактировании и для целостности кода.

P {color: blue; background: white;}

Большинство таблиц стилей содержат несколько правил, и большинство правил содержат несколько описаний. Использование пробелов и переносов облегчает восприятие описаний и правил.

H1 {

Font-family: Helvetica;

Font-style: italic;

Font-size: 30pt;

Color: black;

}

P {

Font-size: small;

}

В данном примере используется список свойств для тега заголовка первого уровня (вид шрифта, начертание, размер и цвет символов) и свойство для абзаца (уменьшенный размер шрифта).

Пробелы или их отсутствие не влияют на отображение CSS в браузерах. Исключением являются уникальные имена class id, которые чувствительны к регистру, когда они связаны с документом HTML.

Иногда при написании свойства селектора может использоваться альтернативный выбор, например, при указании шрифта для всего сайта:

BODY {

Font-family: "Lucida Grande", Verdana, Arial, sans-serif;

}

Шрифты будут использоваться в порядке перечисления. Если на компьютере пользователя установлен шрифт Lucida Grande, текст будет отображаться этим шрифтом. Если нет – будет использоваться шрифт Verdana. Если Verdana не установлен – используется Arial и т. д.

Шрифты, название которых состоит из нескольких слов, следует заключить в прямые кавычки и запятую нужно выносить за пределы кавычки.

Сгруппированные селекторы. Существуют дополнительные методы, которые расширяют функциональные возможности каскадных таблиц стилей. Стили можно сгруппировать, что позволит уменьшить количество необходимых атрибутов и аргументов путем создания логических групп. Группирование таблиц стилей может осуществляться по одинаковым тегам или по атрибутам одного семейства. Порядок следования атрибутов играет важную роль: атрибуты начертания и типа шрифта должны находиться перед остальными атрибутами, размер (кегль) должен быть задан до межстрочного интервала, и только потом в строку можно добавить дополнительную информацию.

Когда одинаковые свойства присвоены нескольким элементам, можно применить одно описание к нескольким селекторам, сгруппировав их в списке через запятую.

Пример группирования по тегам:

– до группирования:

P {font-size: small;}

TD {font-size: small;}

UL {font-size: small;}

OL {font-size: small;}

LI {font-size: small;}

– после группирования:

P, TD, UL, OL, LI {font-size: small;}

Пример группирования по атрибутам одного семейства:

– до группирования:

BODY {margin-top: 12pt; margin-right: 10pt; margin-left: 15pt;}

– после группирования:

BODY {margin: 12pt 10pt 15pt;}

В CSS значения присваиваются по аналогии с движением часовой стрелки: верхний отступ, правый, отступ снизу, слева.

Классовые селекторы. HTML-элемент или группа элементов, оформленных одним стилем, образуют класс. Использование классов позволяет переопределить стиль как для конкретного элемента, так и для любого другого элемента, которому присвоен данный класс. Синтаксис селектора класса устанавливается следующим образом:

Селектор.класс {свойства}

Класс может обозначаться так же, как и тип HTML-документа, например, абзацы документа образуют класс Р. Однако чаще классу присваивается формальное имя, которое в дальнейшем будет связано с определенным набором стилевых свойств. Допустим, вы можете заголовки первого уровня Н1 синего цвета сгруппировать в класс с именем blue:

H1.blue {color: blue}

Наименование класса начинается с точки и обычно пишется строчными буквами (допускается использование латинских букв и цифр; наличие специальных символов, нижних подчеркиваний и прочих нестандартных элементов не рекомендуется).

Принадлежность HTML-элемента этому классу должна быть указана в атрибуте CLASS, который может применяться в любом теге. Так, все элементы Н1 с атрибутом CLASS="blue" станут синими.

В то же время одному и тому же классу могут принадлежать разнотипные HTML-элементы. Для этого в списке стилей вводится CSS-правило с точкой перед именем класса, но без указания названия элементов.

.класс {свойства}

.green {color: green;}

В данном случае все элементы с атрибутом CLASS="green" станут зелеными.

<H2 CLASS="green" >

<DIV CLASS="green" >

<P CLASS="green">

В этом примере зеленым цветом будут отображаться элементы различных по назначению тегов: заголовок второго уровня, текстовый блок и абзац.

ID-селекторы. В отличие от селекторов и классов, id-селекторы (идентификаторы) представляют собой кодовые объекты CSS, которые позволяют изменить стиль только одного элемента, не затрагивая стилей других однотипных элементов.

#id {свойства}

Признаком идентификатора является символ «#» перед именем. В идентификаторе используется формальное имя, которое в дальнейшем будет связано с определенным набором стилевых свойств. Данный селектор применяется в пределах тела документа BODY для задания индивидуального стиля оформления конкретного элемента.

В HTML-коде web-страницы этот идентификатор можно вызвать с использованием атрибута ID.

Например, чтобы выделить красным цветом текст абзаца, необходимо по правилу CSS сначала задать идентификатор с указанием свойств:

#red {color: ff0000;}

а затем вызвать его в элементе Р с использованием атрибута ID:

<P ID="red">