Селекторы
Итак, параметры и директивы CSS описываются по принятым в данном стандарте правилам в специальном файле с расширением .ess. Общий синтаксис записи стилей всех элементов HTML в таком файле выглядит следующим образом:
НАЗВАНИЕ ЭЛЕМЕНТА (свойство: значение:}
В качестве названий элементов принимаются, как правило, теги HTML. Например, если вы хотите, чтобы все заголовки первого уровня в вашем html-доку-менте отображались синим цветом и имели размер в двадцать пикселов, присоединенный к web-страничке файл CSS должен включать следующую запись:
H1 {color: blue: font-size: 20pt;}
Такая директива CSS называется селектором. Все, что содержится в фигурных скобках справа от названия элемента, принято называть для простоты определением селектора. Каждое определение содержит перечисление свойств и значений. Описания всех свойств и значений заключаются в фигурные скобки и разделяются точкой с запятой. Очевидно, что селектор управляет внешней формой отображения объектов HTML и может содержать только те свойства и значения, которые характерны для того или иного элемента языка разметки гипертекста.
Группировка селекторов
Если в нескольких разных селекторах используются одни и те же определения, с помощью языка CSS их можно сгруппировать между собой. Группировка селекторов в единую директиву осуществляется следующим образом: сначала идет перечисление через запятую всех элементов, использующих одинаковое определение, затем в фигурных скобках указываются их свойства и значения. Ниже приведены синтаксис записи и пример использования такой комбинированной директивы.
НАЗВАНИЕ ЭЛЕМЕНТА-1. НАЗВАНИЕ ЭЛЕМЕНТА-2. … НАЗВАНИЕ ЭЛЕМЕНТА-N {свойство: значение:}
Пример:
H1. Н2. НЗ. Н4 {font-family: Helvetica: color: red: font-size: 30pt:}
Аналогичным образом можно группировать между собой определения, описывая их наподобие некой «подпрограммы»:
НАЗВАНИЕ ЭЛЕМЕНТА {Определение-1:Определение-2: Определение-N;}
На самом деле подобная запись идентична перечислению списка определений подряд, в одну строку, расположенную правее названия элемента и ограниченную фигурными скобками, однако в «развернутом» варианте читать листинг файла CSS гораздо проще и удобнее. Вот пример такого оформления определений:
Н1{
font-family: Helvetica;
font-style: italic:
font-Size: 30pt;
color: black:}
| На главную |