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

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

h1 {color: gray;}

Meerkat Central



И обычный текст h1, и текст em окрашены в серый цвет, потому что элемент em наследует значение color. Если бы значения свойств не наследовались элементами-потомками, текст em был бы черным, а не серым, и пришлось бы окрашивать этот элемент отдельно. Наследование так же хорошо работает с ненумерованными списками. Скажем, стиль color: gray; применяется к элементам ul:

ul {color: gray;}

Можно ожидать, что стиль, примененный к ul, также будет применен и к элементам списка, и к любому их содержимому. Благодаря наследованию именно это и происходит. Лучше всего принцип работы наследования иллюстрирует древовидное представление документа. Древовидная схема простого документа, содержащего два списка – ненумерованный и нумерованный.

Когда к элементу ul применяется объявление color: gray;, он принимает это объявление.


Затем это значение передается вниз по дереву элементов-потомков до тех пор, пока не останется потомков, которые могли бы наследовать это значение. Значения никогда не передаются вверх по иерархии, т. е. элемент никогда не передает значение своим предкам. В HTML есть исключение из правила восходящего распространения: стили фона, применяемые к элементу body, могут передаваться элементу html, представляющему собою корневой элемент документа и, следовательно, определяющему его полотно (canvas).

Наследование является настолько фундаментальной концепцией CSS, что о ней практически никогда не задумываются, пока не сталкиваются с ней непосредственно. Однако кое-что следует помнить. Во-первых, обратите внимание, что некоторые свойства не наследуются, обычно просто из соображений здравого смысла. Например, не наследуется свойство border (предназначенное для обрамления элемента). Если бы рамки наследовались, документы стали бы намного более загроможденными, и автору приходилось бы прилагать дополнительные усилия, чтобы отключить унаследованные рамки.

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


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

* {color: gray;}
h1#page-title {color: black;}

Meerkat Central



Welcome to the best place on the web for meerkat information!



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

Полное отсутствие специфичности у унаследованных значений отнюдь не мелочь.


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

#toolbar {color: white; background: black;}

Это правило будет выполняться, только если элемент, атрибут id которого имеет значение toolbar, не содержит ничего, кроме обычного текста. Если, однако, весь текст этого элемента представляет собой гиперссылку (элемент a), тогда верх возьмут стили агента пользователя для гиперссылок. Это значит, что в веб-броузере они, скорее всего, будут окрашены синим цветом, поскольку таблица стилей броузера, вероятно, содержит подобную запись:

a:link {color: blue;}

Для решения этой проблемы должно быть объявлено:

#toolbar {color: white; background: black;}
#toolbar a:link {color: white;}

Ориентируя правила непосредственно на элементы a в составе панели инструментов, получим результат.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Важность
Каскад
Объявления и специфичность
Сортировка по порядку расположения
Сортировка по приоритетности и источнику

Вернуться в раздел: CSS / 3. Структура и каскад