основы CSS

Объявления и специфичность

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

h1 {color: red;}

body h1 {color: green;} h2.grape {color: purple;} h2 {color: silver;}

Очевидно, что применено будет только одно из двух правил каждой пары, поскольку сопоставляемый элемент может быть только одного цвета. А как узнать, какое из правил одержит верх?

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

Специфичность селектора

Специфичность селектора определяется компонентами самого селек тора. Значение специфичности состоит из четырех частей: 0,0,0,0. Реальная специфичность селектора определяется следующим образом:

•Для каждого указанного в селекторе значения идентификатора

кспецифичности добавляется 0,1,0,0.

•Для каждого указанного в селекторе имени класса, псевдо­класса или атрибута к специфичности добавляется 0,0,1,0.

•Для каждого заданного в селекторе элемента и псевдо­элемента

кспецифичности добавляется 0,0,0,1.

•Комбинаторы и универсальный селектор не учитываются

h1 {color: red;} /* спец = 0,0,0,1 */

p em {color: purple;} /* специфичность = 0,0,0,2 */

.grape {color: purple;} /* специфичность = 0,0,1,0 */ *.bright {color: yellow;} /* специфичность = 0,0,1,0 */ p.bright em.dark {color: maroon;} /* спец = 0,0,2,2 */ #id216 {color: blue;} /* специфичность = 0,1,0,0 */ div#sidebar *[href] {color: silver;}/* спец =0,1,1,1 */

Пример:

Вычислим специфичности.

h1 {color: red;} /* 0,0,0,1 */

body h1 {color: green;} /* 0,0,0,2 (победитель)*/ h2.grape {color: purple;} /* 0,0,1,1 (победитель) */ h2 {color: silver;} /* 0,0,0,1 */

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

Специфичность универсального селектора

Универсальный селектор не принимает участия в вычислении специфичности селектора. Иначе говоря, он имеет специфичность 0,0,0,0. Поэтому исходя из следующих двух правил цвет текста в абзаце, являющемся потомком div, будет черным, а во всех остальных элементах – серым:

div p {color: black;} /* 0,0,0,2 */

* {color: gray;} /* 0,0,0,0 */

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

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

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

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

h1 {color: gray;}

<h1>Meerkat <em>Central</em></h1>

И обычный текст h1, и текст em окрашены в серый цвет, потому что элемент em наследует значение color. Если бы значения свойств не наследовались элементами потомками, текст em был бы черным, а не серым,и пришлось бы окрашивать этот элемент отдельно.

!

Наследование является настолько фундаментальной концепцией CSS, что о ней практически никогда не задумываются, пока не сталкиваются с ней непосредственно. Однако кое что следует помнить.

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

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

Каскад 1

Имеются следующие правила:

h1 {color: red;}

h1 {color: blue;}

Какое из них победит?

CSS основывается на методе каскадирования стилей, реализация которого стала возможной благодаря сочетанию наследования и специфичности.

Правила каскадирования для CSS2.1 предельно просты:

1. Найти все правила, содержащие селектор, сопоставляемый с данным элементом.

Каскад 2

2. Провести сортировку согласно явной приоритетности всех применяемых к элементу объявлений. Правилам, отмеченным как !important, присваивается более высокий приоритет, чем остальным. Так же все применяемые к данному элементу объявления сортируются согласно их источнику. Существует три возможных источника правил: автор, читатель и агент пользователя. В общем случае стили автора приоритетней стилей читателя. Но стили читателя, отмеченные как !important, сильнее, чем все остальные стили, включая и те стили автора, которые отмечены как !important. И стили автора, и стили читателя замещают применяемые по умолчанию стили агента пользователя.