Чтение онлайн

Чтобы применить стиль к каждому отдельному элементу списков, не потребовалось назначать никакие стилевые классы для самих элементов списков. Потребовалось лишь отнести сами списки (элементы OL) к нужным стилевым классам, что избавило нас от лишних усилий при составлении HTML-документа.

Обратите внимание на таблицу стилей из приведенного примера 10.5, а именно на селекторы. Как видите, если нужно указать, что данный стиль должен применяться только к элементам, находящимся внутри другого элемента, контекстный селектор будет состоять из соответствующих простых селекторов, разделенных пробелом.

Кроме того, что показано в примере, можно создать и другие виды контекстных селекторов, например:

Примечательно, что даже в таблицы стилей можно помещать комментарии. Естественно, это весьма полезно при определении больших и сложных таблиц. При этом синтаксис комментария CSS отличается от синтаксиса комментария HTML. Комментарий в CSS задается в стиле языков программирования C или Java, то есть так:

В самом начале главы говорилось не просто о таблицах стилей, а о каскадных таблицах стилей. Рассмотрим, в чем же проявляется каскадирование и как его можно использовать. Каскадирование проявляется при наличии в одной или нескольких используемых документом таблицах стилей задания разных значений одного и того же свойства определенного HTML-элемента, стилевого класса или элемента с заданным значением id. Например, пусть в таблице есть следующие записи:

Какое из значений свойства text-align нужно использовать? Каскадирование предполагает, что нужно использовать последнее значение, которое присвоено этому свойству. Это и должен делать браузер.

Аналогичным образом выбираются значения при перекрытии не одного, а нескольких свойств.

Если нужно, чтобы присвоенное ранее значение нельзя было изменить, то при его задании применяется модификатор important.

Теперь для всех HTML-элементов H3 будет использоваться выравнивание по правому краю, несмотря на то что последним было определение выравнивания по центру.

Возможен также случай, когда в нескольких таблицах или в нескольких местах одной и той же таблицы стилей установлен модификатор important сразу для нескольких значений одного и того же свойства.

Рассмотрим пример:

В этом случае для свойства text-align принимается последнее значение с модификатором important (значения без important вообще не рассматриваются). В этом случае также осуществляется каскадирование, но не для всех значений свойства, а только для значений с модификатором important.

Следует также отметить, что стили, заданные для HTML-элементов, стилевые классы и встроенные стили (заданные в атрибуте style) каскадируются следующим образом (последующие элементы списка переопределяют предыдущие):

• стили, заданные для HTML-элементов;

• стилевые классы;

• встроенные стили.

В результате обработки следующего фрагмента текст элемента P будет отображаться подчеркнутым, шрифтом синего цвета с полужирным начертанием.

Если бы свойства, заданные, например, для стилевого класса и с помощью встроенного стиля, перекрывались, то они были бы переопределены в соответствии с приведенным выше списком (не забывайте также про модификатор important).

Еще одной особенностью применения стилей является наследование. Это означает, что настройки стиля родительского HTML-элемента автоматически применяются к вложенным элементам. Например, настройки шрифта, заданные для BODY, будут применены по умолчанию ко всему тексту документа. Если же для абзацев (P) также заданы другие стилевые настройки, то они будут дополнять или переопределять настройки, назначенные элементу BODY. Кроме того, стили наследуются в зависимости от того, как они записаны в таблице стилей. Так, в приведенном ниже фрагменте настройки шрифта наследуются в следующем порядке (пример 10.6):

• стиль элемента BODY имеет настройки стиля по умолчанию, кроме свойства font-size, значение которого явно задается в таблице стилей;

• стиль элемента P наследует настройки элемента BODY и переопределяет цвет шрифта;

• стиль элемента P класса italic добавляет к шрифту курсивное начертание;

• «инлайн-стиль» элемента P класса italic наследует настройки последнего и добавляет полужирное начертание шрифта.

Рисунок 10.4 наглядно показывает постепенное наследование свойств стиля, использованное в примере 10.6.

Рис. 10.4. Наследование стилей

Автоматичесое наследование стилей применяется не для всех свойств CSS. Для свойств, не поддерживающих наследование (например, для свойств видимости элемента, рассмотренных в следующей главе), часто предусматривается специальное значение inherit, позволяющее явно указать, что значения свойства нужно унаследовать у родительского элемента.