9. Каскадирование стилей

С документом может быть связано несколько стилевых определений (в отдельном стилевом файле, в головной части HTML-кода и в отдельных тегах).

Принцип обработки множественных определений, заданных для одного элемента, называется каскадированием.

Общее правило каскадирования: конкретное определение главнее общего.

Можно сформулировать и так: стилевое определение потомка отменяет аналогичное определение родителя и передаётся по наследству.

Сформулируем правила каскадирования более детально.

1. Если для родительского элемента (например, BODY) задано стилевое определение, и оно не конфликтует со стилевыми определениями, заданными для потомка (например, для P), то стилевое определение родителя наследуется потомком.
2. Стилевое определение потомка (например, P) главнее аналогичных определений родителя (например, BODY).
3. Стилевое определение в теге главнее стилевого определения в головной части HTML-кода, а последнее главнее определений, заданных в отдельном стилевом файле.
4. Если задано несколько конфликтующих стилевых определений равного каскадного веса, то действует последнее из них. Например, текст в абзаце <P style="color:red;color:blue"> будет синего цвета.

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

Посмотрите, как работают правила каскадирования в этом примере: