Группирование и наследование
Правила каскадных таблиц стилей состоят из селектора и определения. Для уменьшение размеров таблиц стилей можно группировать разные селекторы в виде списка элементов, разделённый запятыми, если для них задаётся одно правило:
H1 { font-family: Arial }
H2 { font-family: Arial }
H3 { font-family: Arial }
можно сгруппировать и задать в виде одного правила со списком селекторов:
H1, H2, H3 { font-family: Arial }
Аналогично группируются определения, только в списке они разделяются точками с запятой (;). Например:
H1 { font-weight: bold }
H1 { font-size: 14pt }
H1 { font-family: Arial }
можно записать в виде одного правила, сгруппировав определения:
H1 { font-weight: bold;
font-size: 14pt;
font-family: Arial; }
Некоторые свойства имеют собственный синтаксис группирования, связанный с заданием значений нескольких свойств в одном. Например, предыдущий пример при использовании свойства font запишеться так:
H1 ( font: bold 14pt Arial )
При задании таблицы стилей можно свободно комбинировать все три правила группирования для уменьшения её размеров.
В HTML некоторые элементы могут содержать другие. Как будет отображаться элемент, расположенный внутри другого элемента страницы, если для последнего задано правило форматирования, а для вложенного элемента нет? Например, пусть цвет шрифта абзаца определён как синий ( P { color: blue } ). Как будет отображаться выделенный элемент текста, задаваемый тэгом <EM> , если для него не определено правило форматирования? В подобных случаях вложенный элемент наследует правила форматирования элемента-родителя. В нашем примере выделенный элемент также будет отображаться синим цветом.
Некоторые свойства не наследуются вложенными элементами от своих родителей, например свойство background , но по умолчанию вложенные элементы будут отображаться с фоном родительского элемента.
Наследование полезно для задания свойств для элемента, порождающего остальные элементы страницы HTML. Например:
TABLE { font-family: Arial; }
TABLE { font-size: 10pt; }
Или для задания свойств тела документа:
BODY { color: black;
font-family: "Times New Roman";
background: url(texture.gif) white;
}
Приведённые правила задают форматирование документа по умолчанию чёрным шрифтом Times New Roman с фоном, задаваемым графическим файлом texture.gif, или на белом фоне, если файл не доступен. Приведённое залание правил форматирования будет работать всегда, даже если разработчик пропустит в документе тэг <BODY> , что допускается стандартом языка HTML, так как синтаксический анализатор HTML всегда вставляет пропущенный тэг <BODY> .