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

Последнее обновление: 21.04.2016

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Наследование стилей в CSS3</title>
        <style>
			p {color: red;}
			h2 {color: red;}
        </style>
    </head>
    <body>
		<h2>Наследование стилей</h2>
		<p>Текст про наследование стилей в CSS 3</p>
    </body>
</html>

Однако поскольку и элемент p, и элемент h2 находятся в элементе body, то они наследуют от этого контейнера - элемента body многие стили. И чтобы не дублировать определение стиля, мы могли бы написать так:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Наследование стилей в CSS3</title>
        <style>
			body {color: red;}
        </style>
    </head>
    <body>
		<h2>Наследование стилей</h2>
		<p>Текст про наследование стилей в CSS 3</p>
    </body>
</html>

В итоге определение стилей стало проще, а результат остался тем же.

Если нам нежелателен унаследованный стиль, то мы его можем переопределить для определенных элементов:

body {color: red;}
p {color: green;}

При нескольких уровнях вложенности элементы наследуют стили только ближайшего контейнера:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Наследование стилей в CSS3</title>
        <style>
			body {color: red;}
			div {color:black;}
        </style>
    </head>
    <body>
		<div>
			<h2>Наследование стилей</h2>
			<p>Текст про наследование стилей в CSS 3</p>
		</div>
		<p>Copyright © MyCorp.com</p>
    </body>
</html>

Здесь веб-страница имеет следующую структуру:

Структура html и наследование стилей в css

Для элемента div переопределяется цвет текста. И так как элемент h2 и один из параграфов находятся в элементе div, то они наследуют стиль именно элемента div. Второй параграф находится непосредственно в элементе body и поэтому наследует стиль элемента body.

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

Однако не ко всем свойствам CSS применяется наследование стилей. Например, свойства, которые представляют отступы (margin, padding) и границы (border) элементов, не наследуются.

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

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850