Селектор { Свойство: Значение; }
правило
Правило CSS состоит из двух частей: селектора и описания.
Селектором называется элемент, к которому относится определенный стиль. Элементами могут быть не только простые теги, например заголовок <H1> или <P>, но и более сложные теги, например <A> или таблица <TD>.
Например, в записи
P {color: red;}
P является селектором, а заключенное в скобки выражение {color: red;} – описанием.
Описание, в свою очередь, также состоит из двух частей: свойства и значения.
Свойство – это параметр стилевого оформления документа, который определяется спецификацией CSS. Каждый элемент характеризуется своими свойствами, например цвет заголовка, начертание шрифта и другими.
Значение – это параметр, который характеризует свойство. Каждое свойство достигает определенного значения. Различают числовые и символьные значения свойств. Числовые значения применяются для задания размеров, например, ширины и высоты блока, размера шрифта, толщины рамки, межстрочных интервалов и т. д. Значение выражается десятичным числом, за которым обычно следует размерность. Размерность записывается после числа без дополнительного пробела, например, 8pt, 1cm. В случае отрицательного значения перед числом ставится знак минус (например, –15px). Числовые значения могут выражаться в абсолютных или относительных единицах (табл. 5.1).
P { font-size: 14pt;}
В данном примере размер символов для абзаца устанавливается в 14 пунктов.
Таблица 5.1
Единицы измерений значений свойств
| Единица измерения | Форма записи |
| Абсолютные единицы | |
| Дюйм | 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-элемент или группа элементов, оформленных одним стилем, образуют класс. Использование классов позволяет переопределить стиль как для конкретного элемента, так и для любого другого элемента, которому присвоен данный класс. Синтаксис селектора класса устанавливается следующим образом: