Правила каскада

Помимо порядка применения стилей следует также помнить о нескольких правилах работы каскада.

Правило каскада 1. Найти все объявления, применяемые к элементу или свойству. При загрузке каждой страницы браузер просматривает все ее теги, чтобы убедиться, что правило предназначено для него.

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

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

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

Расположение	Тег	Свойство	Значение
Таблица стилей по умолчанию	p	color	black
Пользовательская таблица стилей
Авторская таблица стилей	p	color	blue
Авторские вложенные стили
Авторские линейные стили	p	color	red

Конечно, не все так просто. Следует также иметь в виду и вес объявления. Повысить важность правила можно таким образом (обратите внимание на восклицательный знак):

p {color:red; !important; font-size:12pt}

Добавив !important через пробел после нужного правила, но перед точкой с запятой мы повысим важность или вес этого правила.

Теперь вес этого правила повышается и текст отображается именно красным, даже если далее он будет переопределен другим правилом. Подумайте дважды прежде чем использовать !important - ведь помеченное так правило будет иметь приоритет перед пользовательскими стилям, заданными, возможно, по весьма веской причине.

Правило каскада 3. Сортировка по конкретности. Конкретность правила определяет точность его применения. Если таблица стилей содержит правило:

p. {font-size:12px}

и правило:

р.largetext {font-size:16рх}

то текст:

<р class="largetext">Пример текста</р>

будет отображен шрифтом в 16 пикселов, так как второе правило является более конкретным, и поэтому имеет более высокий приоритет.

А что произойдет, если вместо этого мы добавим следующие стили:

р {font-size:12px}
.largetext {font-size: 16px}

Оба эти правила применимы к нашему тегу, но побеждает правило с указанным классом - текст отображается шрифтом в 16 пикселов. И вот почему: числовая конкретность тега равна 1, класс обладает конкретностью 1-0. Вот как можно подсчитать конкретность любого селектора - сделать это очень просто с помощью трех значений: А-Б-В.

Подсчет происходит следующим образом.

1. Добавьте одну А к каждому идентификатору в селекторе.
2. Добавьте одну Б к каждому классу в селекторе.
3. Добавьте одну В к каждому имени элемента (имени тега).
4. Прочитайте готовый результат как число из трех цифр. Например, вы можете получить результат 0-1-12, а стиль 0-2-0 окажется более конкретным.

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

р {соlог:гed} /*0-0-1 конкретность= 1 */
p. largetext /*0-1-1 конкретность=11*/
p#largetext /*1-0-1 конкретность= 101*/
body p#largetext /*l-0-2 конкретность=102*/
body p#largetext ul.mylist /*1-1-3 конкретность=113*/
body p#largetext ul.mylist li /*1-1-4 конкретность=114*/

Каждый последующий приведенный здесь пример обладает большей конкретностью, чем предыдущий.

Правило каскада 4. Сортировка по порядку. Если есть два правила с одинаковым весом, приоритет имеет правило, расположенное в документе ниже.

Конкретность важнее порядка расположения, поэтому более конкретное правило, распложенное в документе выше, имеет приоритет перед менее конкретным правилом, расположенным ниже.