Css наследование: Наследование — CSS | MDN

Содержание

Наследование — CSS | MDN

Описание каждого CSS свойства говорит наследуется ли оно по умолчанию («Наследуется: да/нет»). Наследование контролирует, что происходит, если значение свойства элемента не определено.

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

Типичный пример наследуемого свойства color (en-US). Стили:

и разметка:

<p>В этом параграфе <em>подчёркнутый текст</em>.</p>

слова «подчёркнутый текст» станут зелёными, т.к. тег em унаследовал значение свойства color (en-US) от элемента p, а не получают начальное значение свойства (цвет, который используется для корневого элемента, когда страница не определяет цвет).

Когда значения свойства элемента, которое не наследуется, не указано(иногда называемое Mozilla — сброшенное свойство), элемент получает начальное значение этого свойства (как указано в описании свойства).

Пример ненаследуемого свойства border. Стили:

 p { border: medium solid }

и разметка:

  <p>В этом параграфе <em>подчёркнутый текст</em>.</p>

у слов «подчёркнутый текст» не будет рамки (т.к. начальное значение border-style (en-US):none).

Ключевое слово inherit позволяет нам явно задать наследование. Это работает и на наследуемых, и на ненаследуемых свойствах.

  • CSS документация
  • Ключевые концепции CSS:
    Синтаксис CSS,
    @-правила,
    комментарии,
    специфичность и
    наследование,
    блочная модель,
    режимы компоновки и
    модели визуального форматирования,
    схлопывание отступов (en-US),
    начальные,
    вычисленные,
    решённые,
    указанные,
    используемые и
    действительные значения.
    Синтаксис определения значений (en-US),
    сокращённые свойства и
    замещаемые элементы.
  • inherit

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

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

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

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


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

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


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

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

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

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

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

Наследование в CSS на примерах — Site on!

Заметка: активирована адаптивная версия сайта, которая автоматически подстраивается под небольшой размер Вашего браузера и скрывает некоторые детали сайта для удобства чтения. Приятного просмотра!

05.04.2013

Рад снова всех вас приветствовать на страницах блога Site on! В прошлой статье мы кратко поговорили об основах CSS и разобрали несколько простых примеров. Сегодня наша тема – это такая важная вещь, как наследование в CSS. Наследованием в CSS называется передача свойств от элемента родителя к дочерним элементам. Или если вам будет понятней: передача CSS свойств от верхнего тега к вложенным в него. Причём наследуется ли свойство или не наследуется зависит от самого свойства, а не от тегов, к которым оно применено. Как это работает? Да очень просто, вернёмся к нашему макету, с помощью которого мы научились создавать нашу первую веб-страницу:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Как создать веб страницу?</title>
</head>
<body>
И здесь пишем любой интересующий нас текст.
</body>
</html>

Если мы запишем в CSS:

body{
color: green;
}

То цвет надписи «И здесь пишем любой интересующий нас текст» как ни странно станет зелёным. А что будет, если мы нашу надпись заключим в блок? То есть вот какой стала интересующая нас часть кода:

<body>
<div>
И здесь пишем любой интересующий нас текст.
</div>
</body>

То надпись всё равно останется зелёной, так как свойство color наследуется, а значит, передалось от тега body к вложенному в него тегу div и дальше (если бы было куда). И сразу вам задачка: какого цвета будет наша надпись, если мы имеем следующий код

<head>
<style>
body{
color: green;
}
div{
color: red;
}
</style>
</head>
<body>
<div>
<span>И здесь пишем любой интересующий нас текст.</span>
</div>
</body>

Для справки <span> — тег, который просто обозначает какой-либо участок текста. Если в CSS для него ничего не задано, то он ничего и не делает.

Правильный ответ: красным. Так как тег div перебил наследование от body (но только для тегов, вложенных внутрь div).

Какой приоритет имеет наследование в CSS ?

Да ровным счётом никакого. Приоритет наследования в CSS даже не равняется нулю, его просто нет. О чём нам это говорит? Да о том, что любое свойство, заданное вложенному тегу напрямую, будет исполняться вместо того свойства, которое он бы унаследовал (но мы не дали этому случится, так как указали это же самое свойство, но с другим значением).

Об этом ярко свидетельствует предыдущий пример, где тег div не дал тегу span унаследовать зелёный цвет текста от тега body, а всё потому, что мы для тега div явно объявили красный цвет, а значит, приоритет у красного цвета наивысший…

А может быть и нет? Давайте рассмотрим пример ниже, где для одного и того же тега будет явно, но различным образом, указано одно и тоже свойство. Итак, смотрим наш CSS:

div p {
Color: green;
}
p{
color:red;
}

И там и там явно указан цвет именно для параграфов, но в одном из случаев, только для параграфов внутри блока, посмотрим же результат:

<div>
<p>
Текст внутри блока зелённый
</p>
</div>
<p>
А просто внутри параграфа - красный
</p>

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

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

Ещё один важный момент: если после значения CSS свойства поставить пробел и написать !important, то это свойство всегда и везде будет иметь наивысший приоритет. Пример записи:

p{
color:red !important;
}

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

И напоследок вот что вы должны иметь ввиду, если у вас что-то не получается — если написать так:

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

То применится то значение, которое в коде находится ниже, то есть green. Подобных случаев может быть много, особенно пока у вас мало опыта и при этом они могут быть довольно разнообразными, чтобы быстро сориентироваться в проблеме, советую использовать просмотр элементов страницы с помощью веб-инспекторов. О том, как ими пользоваться и что это такое вы можете прочесть по приведённой выше ссылке.

Заметки:

1) Свойства, указанные для класса (class) или уникального идентификатора (id), имеют высший приоритет, причём приоритет у id, выше чем у class. Всё об этих селекторах и о понятии селектора в целом вы узнаете в следующей статье.

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

На сегодня всё, спасибо за ваше внимание!

Пожалуйста, оцените эту статью

Средняя оценка: 4.52 из 5 (проголосовало: 91)

Статья оказалась вам полезной? Подпишитесь, чтобы не пропустить новые!

Вы можете помочь развитию проекта, сделав всего 1 клик:

Спасибо!

Учебник CSS 3. Статья «Наследование в CSS»

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

Зачастую, если у ребёнка родители чудаки, то он от них не отстает, или как говорится: «яблоко от яблони недалеко падает». Что касается наследования в CSS, то это не что иное, как метод тиражирования различных CSS свойств, относящихся к одному элементу страницы на вложенные в него элементы (потомки).

Давайте сразу перейдем к примеру и рассмотрим наследование стилей на примере HTML элемента <body>, который определяет видимое содержимое страницы.

Рис.28 Схема наследования стиля в CSS.

Создадим стиль для элемента <body>, который будет изменять цвет и тип шрифта:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример наследования стиля в CSS</title>
<style>
body { /* используем селектор типа */
color: green; /* устанавливаем цвет текста */
font-family: arial; /* устанавливаем тип шрифта */
}
</style>
</head>
<body>
	<h3>Заголовок второго уровня</h3>
	<p>Полный <strong>абзац</strong></p>
</body>
</html>

В этом примере для элемента <body> мы установили зеленый цвет текста и тип шрифта Arial.
CSS свойства color и font-family наследуются, а это означает, что эти свойства будут применяться и на вложенные элементы внутри <body> (на все его потомки).

Обращаю Ваше внимание на то, что вы всегда можете посмотреть наследуется или нет конкретное свойство в полном справочнике CSS.

Результат нашего примера:

Рис. 29 Пример наследования стиля в CSS.

В выше рассмотренном примере все элементы, расположенные внутри <body> (его потомки) унаследовали его свойства.
Механизм наследования имеет многоуровневую систему и распространяется не только на прямых потомков элемента, но и переносится на все вложенные элементы. В нашем примере к такому элементу относится элемент <strong>, который по аналогии с другими элементами унаследовал все свойства стиля, заданного для элемента <body>. В этом заключается основной смысл наследования, который используется в CSS.

Механизм наследования значительно сокращает код CSS, например, если бы наш элемент <strong> получил цвет по умолчанию – чёрный, то нам пришлось бы отдельно для этого элемента устанавливать стиль, который бы определял как цвет, так и тип шрифта, что значительно увеличивало бы трудозатраты на разработку конкретной страницы.

Еще один момент, который обязательно необходимо понять, это то, что аналогично действует механизм наследования не только для селекторов типа, но и для всех типов селекторов, рассмотренных в предыдущих статьях, посвященной этой тематике. Допустим, мы создали селектор класса с аналогичными CSS свойствами и применили его к элементу <body>, то в этом случае все элементы, вложенные в него также унаследуют эти свойства.

Вы будете в дальнейшем использовать эти особенности CSS для упрощения Вашей работы по созданию стилей для элементов документа.

Ограничения и нюансы наследования

Ограничения:

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

Нюансы:

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

А сейчас на примере элемента <a>, определяющего гиперссылку, мы рассмотрим пример в котором рассмотрим почему некоторые элементы не наследуют некоторые свойства своего предка:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Нюансы наследования стилей</title>
<style>
body { /* используем селектор типа */
color: green; /* устанавливаем цвет текста */
text-decoration: none; /* убираем декорирование текста (нижнее подчеркивание) */
}
</style>
</head>
<body>
	<p>Абзац, который содержит внутри себя <a href = "#">гиперссылку</a>.</p>
</body>
</html>

В этом примере для элемента <body> мы установили следующие стили: зеленый цвет текста и отсутствие декорирования текста (убрали нижнее подчеркивание снизу). Обратите внимание на элемент <a> на изображении, он полностью не изменился. Давайте разберемся ниже (после просмотра изображения) почему так происходит.

Результат нашего примера:

Рис. 29а Нюансы наследования стилей.

При возникновении конфликта побеждает сильнейший, в CSS это, как правило, явно определенный стиль. Откроем инструменты разработчика (для Chrome это F12). Обратите внимание какие встроенные в браузер CSS свойства (user agent stylesheet) имеет любая ссылка (any link) в документе. Для неё заданы следующие стили: цвет текста синий (-webkit-link — значение браузера по умолчанию), декорирование текста (нижнее подчеркивание) и определено, что браузер устанавливает курсор автоматически (значение auto CSS свойства cursor).

Ниже отображаются свойства, которые были унаследованы (Inherited from) элементом <a> от <body>. Как вы можете заметить, браузер отбросил все стили элемента <body>, по той причине, что у элемента <a> стиль, который определяет цвет текста явно определен (встроенный стиль по умолчанию), а свойство, которое определяет декорирование текста не наследуется и отображается с небольшой прозрачностью в инструментах разработчика, но даже если бы оно наследовалось, то не применилось бы по аналогии с цветом теста (у элемента <a> это свойство тоже явно определно).

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

Вопросы и задачи по теме

Перед тем как перейти к следующей статье ответьте на следующие вопросы:

  • Что представляет из себя механизм наследования в CSS?

    Наследование — метод тиражирования различных CSS свойств, относящихся к одному элементу страницы на вложенные в него элементы (потомки).

  • Где можно посмотреть наследуется или нет конкретное свойство если я не помню?

    Вы всегда можете посмотреть наследуется или нет конкретное свойство на сайте в справочнике CSS.

  • Где можно посмотреть какие встроенные CSS стили используются для HTML элементов?

    При необходимости, вы можете посмотреть их на сайте в справочнике HTML выбрав конкретный элемент.

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

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

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

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

Если там стоит значение «Да», значит это свойство переносит свое значение от родительских элементов к дочерним. 

Давайте рассмотрим, как это работает. 

Для примера, возьмем свойство color и оно у нас наследуется. 

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

<div>
<p>Абзац 2</p>
<div>
<p>Абзац</p>
</div>
<p>Абзац 3 <a href="#">Ссылка</a></p>
</div>

Если для родительского элемента добавить свойство color:red, то, несмотря на то, что у дочерних элементов не было присвоено свойство color, тем не менее все дочерние элементы унаследуют от родителя свойство color и станут красным цветом.

<div style="color:red;">
<p>Абзац 2</p>
<div>
<p>Абзац</p>
</div>
<p>Абзац 3 <a href="#">Ссылка</a></p>
</div>

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

При работе со сложными и большими страницами, с последствиями наследования приходится сталкиваться довольно часто.

Изучаем наследование в CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<html>
<head>
    <title>Главная</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div>
        <div>
            <p>Aliquam malesuada tellus justo, eget lacinia nunc rutrum a. Phasellus dictum tempor eleifend. Nunc ut magna non purus fermentum egestas ac eu nulla.</p>
            <p>Fusce est tellus, mattis quis nisl et, egestas posuere libero. Donec scelerisque tellus porttitor massa dictum pulvinar.</p>
        </div>
        <div>
            <p>Cras</p>
            <ul>
                <li>amet condimentum</li>
                <li>aliquam volutpat</li>
                <li>elementum interdum</li>
            </ul>
        </div>
    </div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#content{
    font:14px bold arial,verdana,sans-serif;
    color:#C91212;
}
 
.firstPar{
    font:inherit;
    color:inherit;
}
 
.secondPar{
    font:10px bold arial,verdana,sans-serif;
    color:#000CFF;
}

СелекторСпецифичностьСпецифичность в системе
с основанием 10
Style=»»1,0,0,01000
#wrapper #content {}0,2,0,0200
#content .datePosted {}0,1,1,0110
div#content {}0,1,0,1101
#content {}0,1,0,0100
p.comment .datePosted {}0,0,2,121
p.comment {}0,0,1,111
div p {}0,0,0,22
p {}0,0,0,11