Image Image Image Image Image Image Image Image Image Image

Блог Indigo | 24.05.2018

Наверх

Наверх

Наследование в CSS: что это и как работает

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

Наследование в CSS – это способность элементов-потомков перенимать правила форматирования (свойства CSS), которые присвоены их предкам (о родственных связях элементов HTML мы писали ранее).

Рассмотрим простой пример:

body {
	color: #913D88;
	border: 1px solid #333;
}

И результат на скриншоте:

Пример CSS наследования стилей
Скриншот: пример CSS наследования

На скриншоте можно увидеть, что теги <p> переняли стиль у своего предка <body>: цвет текста на странице стал #913D88. А вот рамка border появляется только один раз – для тега <body>, но не для <p>.

Почему рамка не появилась у других элементов веб-страницы? Всё потому, что согласно спецификации CSS, существуют определенные правила наследования. Есть свойства, которые наследуются (в основном, это свойства, определяющие внешний вид текста) и те, которые не наследуются (например, border, а также свойства, определяющие границы, поля, отступы). К тому же, у браузеров есть свои стили, установленные по умолчанию. Именно поэтому стандартная синяя подчеркнутая гиперссылка a не будет перенимать от body свойство color, что видно на скриншоте.

Узнать, наследуется ли то или иное свойство, можно в этом стандарте CSS. Если в колонке «Inherited?» напротив нужного свойства стоит «yes», значит оно наследуется.

Значение inherit

С помощью inherit можно указать, чтобы элемент наследовал значение свойства у своего предка. Такое значение доступно практически для каждого свойства в CSS.

Для демонстрации используем предыдущий пример: чтобы всё-таки заставить теги <p> унаследовать рамку border от своего предка <body>, необходимо записать:

p {
	border: inherit;
}
Пример использования inherit
Скриншот: пример использования inherit

Такой вариант удобен тем, что при необходимости можно внести правки только в стиль для элемента body, а на теги <p> тратить время не нужно, так как стиль автоматически изменится и для них.

Итоги

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

В следующей главе учебника мы будем изучать каскадность CSS.