На этом шаге мы рассмотрим особенности использования группирования и наследования.
Напомним, что правила в каскадных таблицах стилей состоят из селектора и определения. Для уменьшения размеров таблиц стилей можно представлять разные селекторы в виде списка элементов страницы HTML, разделенных запятыми, если для них задается одно правило. Например, следующие правила:
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>, если для него не определено правило форматирования? В подобных случаях вложенный элемент наследует правила форматирования элемента-родителя. В нашем примере выделенный элемент будет также отображаться синим цветом. Другие свойства ведут себя аналогично свойству color, например font-family, font-size.
Некоторые свойства не наследуются вложенными элементами от своих родителей, например свойство background, но по умолчанию вложенные элементы будут отображаться с фоном родительского элемента.
Наследование полезно при задании значений свойств, применяемых к документу по умолчанию. Для этого достаточно задать все свойства для элемента, порождающего все остальные элементы страницы HTML. Таким элементом является тело документа, определяемое тэгом <BODY>:
BODY {
color: black;
font-family: "Times New Roman";
background: url(texture.gif) white;
}
Приведенные правила задают форматирование документа по умолчанию: черным шрифтом гарнитуры Times New Roman с фоном, задаваемым графическим файлом texture.gif, или на белом фоне, если файл недоступен.
Примечание. Приведенное задание правил форматирования по умолчанию будет работать всегда, даже если разработчик пропустит в документе тэг <BODY>, что допускается стандартом языка HTML, так как синтаксический анализатор HTML всегда вставляет пропущенный тэг <BODY>.
Со следующего шага мы начнем рассматривать свойства форматирования шрифтов.
