HTML: Популярный самоучитель
Шрифт:
Чтобы применить стиль к каждому отдельному элементу списков, не потребовалось назначать никакие стилевые классы для самих элементов списков. Потребовалось лишь отнести сами списки (элементы OL) к нужным стилевым классам, что избавило нас от лишних усилий при составлении HTML-документа.
Обратите внимание на таблицу стилей из приведенного примера 10.5, а именно на селекторы. Как видите, если нужно указать, что данный стиль должен применяться только к элементам, находящимся внутри другого элемента, контекстный селектор будет состоять из соответствующих простых селекторов, разделенных пробелом.
Кроме того, что показано
P STRONG {color: red} /*применяется к элементам STRONG внутри P*/
.par .colored {color: red} /*применяется к элементам со стилевым классом
"colored", находящимся внутри элементов со стилевым классом "par"*/
Комментарии в таблице стилей
Примечательно, что даже в таблицы стилей можно помещать комментарии. Естественно, это весьма полезно при определении больших и сложных таблиц. При этом синтаксис комментария CSS отличается от синтаксиса комментария HTML. Комментарий в CSS задается в стиле языков программирования C или Java, то есть так:
/* Это однострочный комментарий */
/* А здесь записан
многострочный
комментарий */
10.4. Порядок применения стилей
В самом начале главы говорилось не просто о таблицах стилей, а о каскадных таблицах стилей. Рассмотрим, в чем же проявляется каскадирование и как его можно использовать. Каскадирование проявляется при наличии в одной или нескольких используемых документом таблицах стилей задания разных значений одного и того же свойства определенного HTML-элемента, стилевого класса или элемента с заданным значением id. Например, пусть в таблице есть следующие записи:
...
H3 {text-align: right; color: black}
...
H3 {text-align: center}
Какое из значений свойства text-align нужно использовать? Каскадирование предполагает, что нужно использовать последнее значение, которое присвоено этому свойству. Это и должен делать браузер.
Аналогичным образом выбираются значения при перекрытии не одного, а нескольких свойств.
Если нужно, чтобы присвоенное ранее значение нельзя было изменить, то при его задании применяется модификатор important.
...
H3 {text-align: right ! important; color: black}
...
H3 {text-align: center}
Теперь для всех HTML-элементов H3 будет использоваться выравнивание по правому краю, несмотря на то что последним было определение выравнивания по центру.
Возможен также случай, когда в нескольких таблицах или в нескольких местах одной и той же таблицы стилей установлен модификатор important сразу для нескольких значений одного и того же свойства.
Рассмотрим пример:
...
H3 {text-align: right ! important; color: black}
...
H3 {text-align: center ! important}
...
H3 {text-align: left}=
В этом случае для свойства text-align принимается последнее значение с модификатором important (значения без important вообще не рассматриваются). В этом случае также осуществляется каскадирование, но не для всех значений свойства, а только для значений с модификатором important.
Следует
• стили, заданные для HTML-элементов;
• стилевые классы;
• встроенные стили.
В результате обработки следующего фрагмента текст элемента P будет отображаться подчеркнутым, шрифтом синего цвета с полужирным начертанием.
...
<STYLE type = "text/css">
P {font-weight: bold}
.p {color: blue}
</STYLE>
</HEAD>
<BODY>
<P class = "p" style = "text-decoration: underline">Текст абзаца
...
Если бы свойства, заданные, например, для стилевого класса и с помощью встроенного стиля, перекрывались, то они были бы переопределены в соответствии с приведенным выше списком (не забывайте также про модификатор important).
Еще одной особенностью применения стилей является наследование. Это означает, что настройки стиля родительского HTML-элемента автоматически применяются к вложенным элементам. Например, настройки шрифта, заданные для BODY, будут применены по умолчанию ко всему тексту документа. Если же для абзацев (P) также заданы другие стилевые настройки, то они будут дополнять или переопределять настройки, назначенные элементу BODY. Кроме того, стили наследуются в зависимости от того, как они записаны в таблице стилей. Так, в приведенном ниже фрагменте настройки шрифта наследуются в следующем порядке (пример 10.6):
• стиль элемента BODY имеет настройки стиля по умолчанию, кроме свойства font-size, значение которого явно задается в таблице стилей;
• стиль элемента P наследует настройки элемента BODY и переопределяет цвет шрифта;
• стиль элемента P класса italic добавляет к шрифту курсивное начертание;
• «инлайн-стиль» элемента P класса italic наследует настройки последнего и добавляет полужирное начертание шрифта.
<HTML>
<HEAD>
<TITLE>Наследование свойств стиля</TITLE>
<STYLE type = "text/css">
BODY {font-size: 18}
P {color: blue}
P.italic {font-style: italic}
</STYLE>
</HEAD>
<BODY>
Текст 18-м шрифтом
синего цвета
<P class = "italic"> курсивного начертания
<P class = "italic" style = "{font-weight: bold}"> полужирный
</BODY>
</HTML>
Рисунок 10.4 наглядно показывает постепенное наследование свойств стиля, использованное в примере 10.6.
Рис. 10.4. Наследование стилей
Автоматичесое наследование стилей применяется не для всех свойств CSS. Для свойств, не поддерживающих наследование (например, для свойств видимости элемента, рассмотренных в следующей главе), часто предусматривается специальное значение inherit, позволяющее явно указать, что значения свойства нужно унаследовать у родительского элемента.