Наследование

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

 

Пример. < p> Белеет парус < em> одинокий < /em> < /p>

Автор < em> М.Ю. Лермонтов < /em>

В данном примере содержимое тега < em> внутри параграфа унаследует стиль тега < p>, если для тега < em> не указан собственный стиль.

Стили, применяемые к конкретным элементам, подменяют собой свойства, заданные выше в иерархии.

3.3. Конфликтующие правила стилей: каскад

Возможной (и даже типичной) является ситуация, когда элементы документа получают инструкции по представлению из нескольких источников. При этом обязательно возникают конфликты. Рабочая группа, создававшая CSS, предвидела эту ситуацию и разработала иерархическую систему, в которой различным источниками информации о стилях присваиваются разные веса. Каскадом в таблице стилей называется то, что происходит, когда несколько источников информации о стилях соперничают за контроль над элементами страницы. Информация о стилях передается ниже по иерархии, пока не будет перезаписана информацией, имеющей больший вес.

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

Ниже приводятся веса различных способов объявления стилей в порядке от наименьшего веса к наибольшему.

Связанные (при помощи элемента link) внешние таблицы стилей

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

< head>

< link rel=" stylesheet" href=" stylel.ess" type=" text/css" />

< link rel=" stylesheet" href=" style2.ess" type=" text/css" />

< /head>

Если стилевое правило, указанное в файле style2.css, конфликтует со стилевым правилом, указанным в файле stylel.css, то правило из style2.css будет иметь более высокий приоритет, поскольку данная таблица стилей находится ниже в исходном документе.

Импортированные внешние таблицы стилей (с помощью @import)

Импортированная информация о стилях подменяет связанные элементом link стили. Если в документе есть несколько директив @import, то правила таблицы, расположенной ниже в документе, имеют приоритет перед правилами таблицы, расположенной выше.

Встроенные таблицы стилей (при помощи элемента style)

Стили, применяемые в конкретном документе, подменяют те, которые берутся извне.

Внутристрочные стили (использующие атрибут style в теге элемента)

Внутристрочные стили подменяют собой все прочие объявления стилей, относящиеся к данному элементу, за одним исключением.

Объявления стилей, помеченные индикатором! important

Любой стиль, помеченный индикатором! important, подменяет собой все прочие конфликтующие с ним правила стилей. Например, чтобы текст абзацев всегда отображался синим цветом, используйте в таблице стилей следующее правило:

р {color: blue! important; }

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