Александр Чиртик - HTML - Популярный самоучитель

OL.ordinary_list LI {}

OL.italic_list LI {font-style: italic}

OL.colored_list LI {color: green; background-color: yellow}

Список, оформленный обычным шрифтом

1. Элемент списка
   
   
2. Элемент списка
   
   

Список, оформленным курсивным шрифтом

1. Элемент списка
   
   
2. Элемент списка
   
   

Раскрашенный список

1. Элемент списка
   
   
2. Элемент списка
   
   

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

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

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

P STRONG {color: red} /*применяется к элементам STRONG внутри P*/

.par .colored {color: red} /*применяется к элементам со стилевым классом

"colored", находящимся внутри элементов со стилевым классом "par"*/

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

/* Это однострочный комментарий */

/* А здесь записан

многострочный

комментарий */

В самом начале главы говорилось не просто о таблицах стилей, а о каскадных таблицах стилей. Рассмотрим, в чем же проявляется каскадирование и как его можно использовать. Каскадирование проявляется при наличии в одной или нескольких используемых документом таблицах стилей задания разных значений одного и того же свойства определенного 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‑элементов, стилевые классы и встроенные стили (заданные в атрибуте style) каскадируются следующим образом (последующие элементы списка переопределяют предыдущие):

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

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

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

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

...

P {font-weight: bold}

.p {color: blue}

Текст абзаца

...

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

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