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