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

Подготовил: Александр Головко Дата публикации: 16.07.2011

Предыдущая статья Специфичность

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

Зачем это нужно? Чтобы упростить тебе жизнь! Пример:

<div class="green">Этот <span>текст</span> будет зеленым</div>
.green {
	color: #539127;	/* зеленый */
}	 

Если бы не было наследования, определение «окрасить в зеленый цвет» касалось бы только самого тега с классом green, а расположенный внутри него тег span остался бы черным.

результат работы кода Слева — результат, полученный благодаря наследованию.
Справа — результат, который получился бы, если бы наследования не существовало.

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

Надеюсь, я тебя убедил, что наследование — вещь полезная. Теперь давай посмотрим, как с ним управляться.

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

Да будет тебе известно, что наследуются далеко не все свойства. Было бы абсурдно наследовать, например, border.

наследование некоторых свойств нежелательно

Действительно, зачем мне границы вокруг каждого внутреннего тега? Это что, мне теперь их руками отменять надо?

Не волнуйся — не надо! Целый ряд свойств, наследование которых противоречит здравому смыслу, например, отступы, размеры, границы просто не наследуются.

Собственно, проще перечислить те свойства, которые наследуются. Вот они:

О специфичности

Унаследованные свойства, это очень удобно, когда нужно задать стили потомкам элемента. Но если я явно задаю какой-нибудь стиль, было бы, конечно, неправильно, если бы он «перебился» унаследованным. Для того, чтобы на корню исключить такую возможность, договорились, что унаследованные свойства вообще не имеют специфичности. Никакой. Даже нулевой. В результате, любой явно заданный стиль всегда победит унаследованного.

С этим связан интересный нюанс. Дело в том, что специфичность универсального селектора равна 0 (ты помнишь, в расчете специфичности правила мы просто не обращаем на него внимание).

Может, с точки зрения математики, это и чушь, но в CSS-наследовании считается, что специфичность «0» это больше, чем «вообще нет специфичности». Поэтому универсальный селектор перекроет все унаследованные правила.

Это одна из причин, по которой универсальный селектор нужно применять очень осмотрительно (а еще лучше — не применять совсем). Ведь он может вызвать эффект сродни короткому замыканию, перебив унаследованные правила. Например:

<div class="green"><span>Текст в спане - черный</span> Этот текст будет зеленым</div>
* {
	color: #000;	/* черный */
}
.green {
	color: #539127;	/* зеленый */
}	 

Фактически, этим примером мы поломали наследование свойства color и получили то же нехороший результат, что и на самом первом рисунке справа. Текст внутри span (или любого другого внутреннего тега) будет черный.

Наследование и стили браузера

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

<div class="green">Тут идет текст и <a href="#">ссылка</a></div>
.green {
	color: #539127;	/* зеленый */
}	 

В результате такого кода мы увидим зеленый цвет надписи и, скорее всего, синюю ссылку. Почему синюю? Почему ссылка не унаследовала цвет родителя?

Все просто. Где-то в таблице стилей браузера есть примерно такая запись, помещенная туда заботливыми руками разработчика:

a:link {color: blue} 

Вот и получается, что унаследованный стиль перебился явно (пускай даже не мной) заданным.

Получается, чтобы «озеленить» ссылку, нужно не забыть указать ее в правиле:

.green,
.green a {
	color: #539127;	/* зеленый */
}	 

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

Ну что, идем дальше? Следующая статья — Каскад в CSS.

Показать комментарии