Правила каскадности CSS
На предыдущих уроках были изучены стили CSS разных типов: стиль переопределения тега, стилевой класс, комбинированный стиль, встроенный стиль. Стили могут быть определены во внешних или внутренних таблицах стилей. Каждый из стилей был нами рассмотрен в отдельности. Теперь осталось выяснить приоритет стилей, поскольку к одному и тому же элементу html-страницы могут одновременно применяться сразу несколько разных стилей.
Приоритет стилей или правила каскадности, которые описывают поведение браузера при формировании окончательного стиля:
- Самый низкий приоритет имеет внешняя таблица стилей, которая в html-коде стоит самой первой.
- Внешняя таблица стилей, ссылка на которую в hmtl-коде стоит позже (ниже), имеет более высокий приоритет перед предыдущей.
- Внутрення таблица стилей имеет более высокий приоритет перед внешними таблицами.
- Встроенные стили имеют более высокий приоритет перед стилями, которые заданы в таблицах стилей.
- Более конкретные стили имеют более высокий приоритет перед менее конкретными стилями: стилевой класс "выше" стиля переопределения тега; комбинированный стиль "выше" стилевого класса.
- Если к тегу применяются несколько стилевых классов, то более высокий приоритет имеют стили, которые указаны позже (правее).
Новичку понять правила каскадности достаточно сложно, поэтому, объясним их работу на примерах.
Допустим, что мы создали внешнюю таблицу стилей style.css:
.text {color: Red}
#txt {font-size: 12px}
STRONG {
color: Yellow;
font-style: italic
}
В html-странице мы применили внутренний стиль:
<STYLE>
.text {color: Blue}
STRONG {font-size: 20px}
</STYLE>
Рассмотрим html-код страницы:
ПРИМЕР 1:
<P><STRONG>Желтый полужирный курсив размером 20 пикселей.</STRONG></P> |
Когда одновременно применяются внешний и внутренний листы стилей, браузер в первую очередь обрабатывает и сохраняет в своей памяти внешнюю таблицу стилей, затем - внутреннюю таблицу. Если во внешней и внутренней таблице CSS встрачаются одинаковые селекторы, то браузер суммирует их атрибуты, формируя результирующий стиль. В нашем примере итоговый стиль переопределения тега STRONG будет выглядеть следующим образом:
STRONG {
color: Yellow;
font-size: 20px;
font-style: italic
}
Именно такой стиль браузер применит в нашем примере 1.
ПРИМЕР 2:
<P ID="txt" STYLE="font-weight: bold">Полужирный текст размером 12 пикселей.</P> |
Браузер к атрибуту именованного стиля txt, который загрузит из внешней таблицы, добавит атрибут встроенного стиля. Результирующий стиль будет выглядеть следующим образом:
#txt {
font-size: 12px;
font-weight: bold
}
ПРИМЕР 3:
<P CLASS="text">Текст синего цвета.</P> |
На этот раз атрибуты стилевого класса text задают один и тот же параметр - цвет текста: во внешней таблице - красный цвет; во внутренней таблице - синий цвет. В таких случаях браузер руководствуется правилами каскадности, которые говорят о том, что стиль внутренней таблицы имеет более высокий приоритет, поэтому, текст будет оформлен синим цветом.
Важные атрибуты стилей
Стандарт CSS допускает возможность нарушения правил каскадности. Для этого нужное значение атрибута селектора стиля должно быть выделено при помощи значения !important
STRONG {
font-size: 12px;
color: Red !important
}
В нашем примере текст, оформленный тегом <STRONG>, всегда будет отображаться красным цветом, даже если параметр color будет переопределен в более конкретном стиле.
Обратите внимание, что важными могут быть только отдельные атрибуты стиля в определении стиля, остальные атрибуты стиля, которые не объявлены важными, будут подчиняться стандартным правилам каскадности стилей.
