Наследование: общие сведения

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

Стоп! О чем это я? Что значит «приоткрыть завесу»? Мы тут учиться собрались, а не в шарады играть! «Пришло время подробно разобраться с вопросами наследования». Вот так гораздо лучше!

На повестке дня три страшных слова: наследование, специфичность и каскад. Давай для начала я тебя с ними немного познакомлю, а позже разберем их очень подробно.

Наследование — это механизм с помощью которого стили применяются не только к самим элементам, но и к их потомкам.

При написании CSS может возникнуть (обязательно возникнет!) ситуация, когда для одного и того же элемента подходит сразу несколько правил. Например:

<div class="box">Какого же я цвета?</div>

div {
	color: #0f0; /* зеленый цвет */
}
.box {
	color: #00f; /* синий цвет */
}
body {
	color: #f00; /* красный цвет */
}

И первое и второе правила подходят для нашего элемента div (в первом случае мы выбираем его, используя селектор типа, во втором — селектор класса). Более того, третье правило тоже нам подходит. Ведь div наверняка лежит внутри тега body и, согласно вышеприведенному определению, должен унаследовать значение его свойства color.

Текст внутри нашего злополучного div, конечно, не может быть одновременно трех цветов. Должны существовать правила, согласно которым точно рассчитывается, какое из определений победит. И они, конечно, есть. А называются они правила каскадирования. Именно этот каскад и поучаствовал в формировании названия CSS — каскадные таблицы стилей.

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

Вот с них то мы и начнем подробное изучение вопросов наследования.

Следующая статья — Специфичность.