Правила приоритетности для стилей

В Web-странице могут быть использованы таблицы стилей из трех источников:

· автор (проектировщик) Web-страницы;

· пользователь, просматривающий Web-страницу;

· пользовательский агент – Web-браузер.

Автор задает стили с помощью внешних и внутренних таблиц стилей, а также атрибута style.

Пользователь может изменить авторские стили, используя средства Web-браузера. Так, все Web-браузеры позволяют увеличить или уменьшить размер шрифта Web-страницы, а также изменить кодировку содержимого.

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

Правила и свойства стилей, задаваемые этими тремя источниками, могут перекрываться. Кроме этого, в авторских стилях некоторые правила и свойства стилей также могут перекрываться, например, в таблице стилей для элементов h1 задан красный цвет текста (color="red"), а атрибуте style конкретного элемента h1 указан синий цвет (color="blue"). Чтобы определить, какое правило будет действовать, в CSS каждому правилу присваивается вес, а затем используется каскадирование стилей.

По умолчанию, авторские таблицы стилей имеют больший вес, чем пользовательские (если не после значения свойств не задано объявление важности!important). И авторские, и пользовательские таблицы стилей имеют больший вес, чем таблицы стилей Web-браузера.

В CSS определены следующие правила каскадирования:

1. Определяются все объявления для рассматриваемого элемента и его свойства.

2. Выполняется сортировка объявлений в порядке возрастания веса:

a. Объявления Web-браузера.

b. Нормальные объявления пользователя.

c. Нормальные объявления автора.

d. Важные объявления автора.

e. Важные объявления пользователя.

3. Аналогичным образом выполняется сортировка объявлений по специфичности селектора (псевдоэлементы и псевдоклассы рассматриваются как обычные элементы и классы).

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

Специфичность селектора определяется с помощью четырех чисел (a, b, c и d) следующим образом:

· a=1, если объявление стиля в атрибуте style и 0 в противном случае;

· b равно количеству атрибутов id в селекторе;

· c равно количеству других атрибутов и псевдоклассов в селекторе;

· d равно количеству элементов и псевдоэлементов в селекторе.

После этого из четырех чисел формируется число abcd, которое и определяет специфичность селектора.

В упрощенном виде приведенные выше правила можно представить следующим образом:

· наибольший приоритет имеет определение стиля в атрибуте style;

· более низкий приоритет имеют селекторы id;

· еще более низкий приоритет имеют селекторы атрибутов, классов и псевдоклассов;

· самый низкий приоритет имеют универсальный селектор, селекторы типа и селекторы псевдоэлементов.

Пример 4.3.35. Определение и изменение приоритета свойства:

1. Задана следующая таблица стилей:

/* Селектор элемента span */

span {color: red}

/* Селектор элемента span как потомка элемента p */

p span {color: green}

/* Селектор элемента span как дочернего элемента p */

p > span {color: brown}

Для фрагмента документа HTML

<h1>Сеть <span style="color: blue">Internet</span></h1>

<h2>Общая характеристика <span>Internet</span></h2>

<p>Internet - это <span>сеть <span>сетей</span></span>

компьютеров, которые связаны с помощью межсетевых

шлюзов.</p>

вывод Web-страницы будет иметь следующий вид:

Первый элемент span в таблице стилей имеет специфичность 0001 (в селекторе один элемент), второй и третий – специфичность 0002 (в селекторах по два элемента).

В заголовке h1 элемент span имеет специфичность 1000, поскольку значение цвета определено в атрибуте style, поэтому в этом заголовке элемент выводится синим цветом.

В заголовке h2 элемент span выводится, как это определено в таблице стилей (красным цветом).

В элементе p более приоритетными по сравнению с первым правилом являются второе и третье правило. Эти правило являются перекрывающимися, поскольку дочерний элемент span элемента p одновременно является потомком элемента p. Однако, поскольку селектор p > span следует после селектора p span, дочерний элемент span будет выведен коричневым цветом, остальные потомки – зеленым цветом.

2. В таблице задано следующее правило:

p#p1 {color:brown!important}

Для фрагмента документа HTML

<p id="p1" style="color:blue">Содержимое абзаца p1</p>

вывод Web-страницы будет иметь следующий вид:

Для элемента p с id="p1"цвет определен и во внедряемой таблице стилей (специфичность 0100) и непосредственно в самом элементе с помощью атрибута style (специфичность 1000). В данном случае более приоритетным является встроенный стиль, поэтому содержимое элемента p должно быть выведено синим цветом. Однако использование объявления для правила в таблицу стилей делает более приоритетным это правило, поэтому содержимое элемента p выводится коричневым цветом.

Все свойства стилей CSS2 еще не полностью реализованы в Web-браузерах. Ниже рассматриваются основные свойства стилей CSS2, которые работают практически во всех распространенных Web-браузерах.