6. Контекстные селекторы
При разработке страниц HTML часто приходится одни элементы вкладывать в другие, например, выделять слова тэгом <ЕМ> в каком-нибудь абзаце, задаваемом тэгом <Р>. В этом случае говорят, что элемент P порождает элемент ЕМ и является его предком, а сам элемент ЕМ является потомком элемента P. Некоторые свойства предка наследуются потомком, например, цвет шрифта (свойство color). Чтобы вложенные элементы отображались со своими значениями свойств, можно определить для них правила форматирования, как показано ниже:
P {color: blue; }
ЕМ {color: red; }
Однако это приведет к тому, что все выделяемые в документе элементы будут отображаться шрифтом красного цвета. А если необходимо, чтобы выделяемые только в абзаце элементы отображались красным цветом, а в других частях документа каким-то другим цветом? Здесь помогут контекстные селекторы. Например, поставленную задачу решит следующее правило:
P EM {color: red;}
Приведем пример использования контекстного селектора:
<HTML>
<HEAD>
<TITLE>Пример использования контекстного селектора</TITLE>
<STYLE TYPE="text/css">
<!--
P {color: blue; }
P EM {color: red;}
-->
</STYLE>
</HEAD>
<BODY>
<P>Цвет голубой, а затем <EM>красный</EM><BR>
<H3><EM>А здесь черный шрифт, так как селектор не контекстный</EM></H1>
</BODY>
</HTML>
Результат просмотра этого документа в браузере изображен на рисунке 1.
Рис.1.
Иллюстрация использования контекстного
селектора
Как видно из приведенного примера контекстный селектор состоит из нескольких простых, разделенных пробелами. Браузер находит элементы ЕМ, порожденные элементом P, и применяет к ним указанное правило форматирования.
Таким образом, правила с контекстными селекторами задают исключения из общих правил форматирования элементов документа, определенных с простыми селекторами.
7. Группирование и наследование
Напомним, что правила в каскадных таблицах стилей состоят из селектора и определения. Для уменьшения размеров таблиц стилей можно представлять разные селекторы в виде списка элементов страницы 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>.