Наследование css классов: Наследование в CSS на примерах — Site on!
Наследование в 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>
То надпись всё равно останется зелёной, так как свойство
<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, а всё потому, что мы для тега
А может быть и нет? Давайте рассмотрим пример ниже, где для одного и того же тега будет явно, но различным образом, указано одно и тоже свойство. Итак, смотрим наш 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.51 из 5 (проголосовало: 89)Статья оказалась вам полезной? Подпишитесь, чтобы не пропустить новые!
Вы можете помочь развитию проекта, сделав всего 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-стилей — Часть 1. Проблема / Хабр
Главным драйвером роста веба на рубеже тысячелетий было потребление контента. Сайты создавались для предоставления своим посетителям какой-либо полезной информации или развлекательного содержимого. Но в последние годы резко выросло значение веб-ресурсов, предоставляющих пользователям сервисы генерации контента (текстовые и графические редакторы, электронные таблицы, мессенджеры и т.п.). Это вызвало трансформацию сайтов в одностраничные приложения и миграцию в веб сложных интерфейсов, которые ранее были прерогативой прикладных программ.В процессе этих трансформаций и миграций выяснилось, что рост трудоемкости создания и поддержания веб-интерфейса значительно опережает рост его сложности. Проблему пытались (и пытаются до сих пор) решить путем разбиения на модули, абстрагирования, инкапсуляции. С этой целю было создано большое количество JavaScript-фреймворков (
Backbone
, Ember
, Angular
), HTML-шаблонизаторов (Jade
, Handlebars
), систем управления зависимостями (RequireJS
) и т.п.Наиболее сложным с этой точки зрения оказался CSS, где по дизайну языка любое свойство, объявленное в любом подключенном CSS-файле или тэге style
, может повлиять на отображение любого элемента DOM-дерева.
Формализация задачи.
Предположим для простоты, что весь JavaScript-код заключен в модули, которые ничего не знают друг о друге и инкапсулируют в себе все необходимое им для своей работы. Модуль знает как сгенерить свое HTML-представление (назовем его блок) и куда его вставить в DOM-дереве. При этом блоки могут вкладываться друг в друга. На уровне разметки блок состоит из корневого элемента и дочерних элементов.
Задача заключается в том, чтобы на отображение элементов любого блока можно было повлиять только намеренным изменением в HTML-представлении и соответствующих CSS-файлах и тэгах
style
.Любое ненамеренное изменение отображения элементов блоков будем называть протечкой стилей.
Протечки стилей могут возникать как при изменениях в свойствах элементов других блоков (протечки свойств), так и при изменениях в DOM-дереве (каскадные протечки).
Иточники протечек стилей
Если рассматривать какой-либо блок сам по себе, то протечки стилей могут быть как извне, так и наружу. В связи с тем, что протечка наружу для одного блока будет являться протечкой извне для другого, при классификации протечек можно ограничиться случаем протечек извне.
1. Наследование свойств
При отсутствии у CSS-свойства какого-либо элемента явно заданного значения используется значение по умолчанию. Если это значение
inherit
, то значение свойства задается равным значению свойства родительского элемента.Таким образом, корневой элемент текущего блока может наследовать стили своего родителя, по определению принадлежащего другому блоку.
К примеру,
.outer-block{
color: red;
}
<div>
Я намеренно сделан красным
<div>
Я красный из-за наследования стилей
</div>
</div>
посмотреть на jsfiddle.net
2. Конформизм свойств
При отсутствии у CSS-свойства какого-либо элемента явно заданного значения используется значение по умолчанию. Если это свойство подстраивается под свойство родительского элемента (к примеру, как свойства
width
и height
со значением по умолчанию auto
) или мимикрирует (к примеру, как свойство background-color
со значением по умолчанию transparent
), то у конечного пользователя будет создаваться впечатление, что стили родительского элемента протекли на стили дочернего элемента.К примеру,
.outer-block{
background: red;
}
<div>
Я намеренно сделан красным
<div>
Я красный из-за конформизма стилей
</div>
</div>
посмотреть на jsfiddle.net
Стоит заметить, что само существование протечек стилей через конформизм может быть поставлено под сомнение, так как стили родительского элемента формально к дочернему элементу не применяются, а на практике такое поведение может рассматриваться даже как желаемое. Но если уж исходить из формальной точки зрения, то придется признать, что конформизм стилей определенно нарушает их инкапсуляцию. В качестве практического доказательства автор предлагает пытливому читателю воспользоваться утиным тестом.
3. Каскадный беспредел
Применение стилей к целевым элементам селекторов происходит в три этапа.
На первом этапе из всего DOM-дерева выбираются все элементы, соответствующие селектору целевого элемента. К примеру, для селектора
.current-block h4
на первом этапе будут выбраны все элементы с тэгом h4
. Способа ограничить пространство выбора каким-либо участком DOM-дерева не существует.На втором этапе выбранные элементы фильтруются на предмет соответствия селектору путем обхода родительских элементов целевого элемента. При использовании комбинатора потомка
пробел
(descendant combinator) поиск соответствия может идти вплоть до корневого элемента DOM-дерева. При использовании сестринского комбинатора ~
(general sibling combinator) — до самого первого сестринского элемента.К примеру,
.current-block h4 {
background: blue;
}
.outer-block h4 {
background: red;
}
<div>
<h4>Я намеренно сделан красным</h4>
<div>
<h4>Я красный из-за каскадного беспредела</h4>
</div>
</div>
посмотреть на jsfiddle.net
Единственным способом ограничить пространство поиска является использование дочернего комбинатора >
(child combinator) и ближайшего сестринского комбинатора +
(adjacent sibling combinator). Для этого необходимо задавать точный путь в DOM-дереве от целевого элемента к корневому элементу блока, что приводит к увеличению связанности CSS и HTML-кода.
На третьем этапе выбранным и отфильтрованным целевым элементам назначаются стилевые свойства. При этом, если на один и тот же целевой элемент претендуют несколько селекторов, каждый со своим вариантом свойства, то значение свойства определяется на основе специфичности селекторов, а при ее равенстве — на основе порядка объявления.
Таким образом, при определенных условиях (используемые комбинаторы, соотношение специфичностей, порядок объявления) стили элементов внешнего блока могут влиять на стили элементов вложенного блока. Этого влияния можно было бы избежать, если бы можно было указывать область DOM-дерева, в которой следует выбирать и фильтровать целевые элементы.
4. Позиционная обусловленность
Элементы блоков могут менять свое отображение в зависимости от позиции блока в DOM-дереве при использовании в селекторах сестринских комбинаторов (
+
и ~
) или псевдоклассов (:first-child
и т.п.).К примеру,
.block {
background: red;
}
.block + .block {
background: blue;
}
<div>
<h4>Я красный, но при добавлении блока передо мной я стану синим</h4>
</div>
<div>
<h4>Я синий</h4>
</div>
посмотреть на jsfiddle.net
Как и в случае с конформизмом свойств, стоит отметить, что многие разработчики находят позиционную обусловленность весьма полезной. Автор статьи солидарен с ними до тех пор, пока обусловленность не выходит за границы блока, поскольку в этом случае налицо явное нарушение инкапсуляции стилей.
Очевидно, что идеальная инкапсуляция CSS-стилей должна устранять любые возможности для их протечек.
Вторая часть статьи («Инкапсуляция CSS-стилей — Часть 2. Решения») будет посвящена анализу того, насколько текущие подходы (OOCSS, SMACSS, ACSS, BEM, CSS-препроцессоры) соответствуют идеалу, а также их классификации.
Буду рад полезным советам и конструктивной критике.
Наследование | htmlbook.ru
Наследованием называется перенос правил форматирования для элементов, находящихся внутри других. Такие элементы являются дочерними, и они наследуют некоторые стилевые свойства своих родителей, внутри которых располагаются.
Разберём наследование на примере таблицы. Особенностью таблиц можно считать строгую иерархическую структуру тегов. Вначале следует контейнер <table> внутри которого добавляются теги <tr>, а затем идёт тег <td>. Если в стилях для селектора TABLE задать цвет текста, то он автоматически устанавливается для содержимого ячеек, как показано в примере 18.1.
Пример 18.1. Наследование параметров цвета
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Наследование</title>
<style>
TABLE {
color: red; /* Цвет текста */
background: #333; /* Цвет фона таблицы */
border: 2px solid red; /* Красная рамка вокруг таблицы */
}
</style>
</head>
<body>
<table cellpadding="4" cellspacing="0">
<tr>
<td>Ячейка 1</td><td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td><td>Ячейка 4</td>
</tr>
</table>
</body>
</html>
В данном примере для всей таблицы установлен красный цвет текста, поэтому в ячейках он также применяется, поскольку тег <td> наследует свойства тега <table>. При этом следует понимать, что не все стилевые свойства наследуются. Так, border задаёт рамку вокруг таблицы в целом, но никак не вокруг ячеек. Аналогично не наследуется значение свойства background. Тогда почему цвет фона у ячеек в данном примере тёмный, раз он не наследуется? Дело в том, что у свойства background в качестве значения по умолчанию выступает transparent, т. е. прозрачность. Таким образом цвет фона родительского элемента «проглядывает» сквозь дочерний элемент.
Чтобы определить, наследуется значение стилевого свойства или нет, требуется заглянуть в справочник по свойствам CSS и посмотреть там. Подключать свою интуицию в подобном случае бесполезно, может и подвести.
Наследование позволяет задавать значения некоторых свойств единожды, определяя их для родителей верхнего уровня. Допустим, требуется установить цвет и шрифт для основного текста. Достаточно воспользоваться селектором BODY, добавить для него желаемые свойства, и цвет текста внутри абзацев и других текстовых элементов поменяется автоматически (пример 18.2).
Пример 18.2. Параметры текста для всей веб-страницы
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Наследование</title>
<style>
BODY {
font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта */
color: navy; /* Синий цвет текста */
}
</style>
</head>
<body>
<p>Цвет текста этого абзаца синий.</p>
</body>
</html>
В данном примере рубленый шрифт и цвет текста абзацев устанавливается с помощью селектора BODY. Благодаря наследованию уже нет нужды задавать цвет для каждого элемента документа в отдельности. Однако бывают варианты, когда требуется всё-таки изменить цвет для отдельного контейнера. В этом случае придётся переопределять нужные параметры явно, как показано в примере 18.3.
Пример 18.3. Изменение свойств наследуемого элемента
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Наследование</title>
<style>
BODY {
font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта */
color: navy; /* Синий цвет текста */
}
P.red {
color: maroon; /* Темно-красный цвет текста */
}
</style>
</head>
<body>
<p>Цвет текста этого абзаца синий.</p>
<p>А у этого абзаца цвет текста уже другой.</p>
</body>
</html>
В данном примере цвет первого абзаца наследуется от селектора BODY, а для второго установлен явно через класс с именем red.
что это и как работает — учебник CSS
Выполняя уроки в предыдущих главах, вы уже имели дело с наследованием стилей CSS (возможно, даже не задумываясь об этом). Определение данного термина довольно-таки очевидное.
Наследование в CSS – это способность элементов-потомков перенимать правила форматирования (свойства CSS), которые присвоены их предкам (о родственных связях элементов HTML мы писали ранее).
Рассмотрим простой пример:
body { color: #913D88; border: 1px solid #333; }
И результат на скриншоте:
Скриншот: пример 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
Такой вариант удобен тем, что при необходимости можно внести правки только в стиль для элемента body
, а на теги <p>
тратить время не нужно, так как стиль автоматически изменится и для них.
Итоги
Благодаря тому, что наследование существует, вы можете экономить очень большое количество времени, сил и места в коде. Если бы таких правил не существовало, трудно представить, насколько бы усложнилась наша работа. При этом механизм наследования CSS хорошо продуман, поскольку не все свойства наследуются (и если бы они наследовались, то ни к чему хорошему это бы не привело).
В следующей главе учебника мы будем изучать каскадность CSS.
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 свойства говорит наследуется ли оно по-умолчанию («Наследуется: да/нет»). Наследование контролирует, что происходит, если значение свойства элемента не определено.
Наследуемые свойства
Когда никакого значения для свойства, которое наследуется, у элемента не установлено, элемент получает вычисленное значение этого свойства от его родителя. Только корневой элемент документа получает начальное значение из описания свойства.
Типичный пример наследуемого свойства color
. Стили:
p { color: green }
и разметка:
<p>В этом параграфе <em>подчёркнутый текст</em>.</p>
слова «подчёркнутый текст» станут зелёными, т.к. тег em
унаследовал значение свойства color
от элемента p,
а не получают начальное значение свойства (цвет, который используется для корневого элемента, когда страница не определяет цвет).
Ненаследуемые свойства
Когда значения свойства элемента, которое не наследуется, не указано(иногда называемое Mozilla — сброшенное свойство), элемент получает начальное значение этого свойства (как указано в описании свойства).
Пример ненаследуемого свойства border
. Стили:
p { border: medium solid }
и разметка:
<p>В этом параграфе <em>подчёркнутый текст</em>.</p>
у слов «подчёркнутый текст» не будет рамки (т.к. начальное значение border-style
:none
).
Замечание
Ключевое слово inherit
позволяет нам явно задать наследование. Это работает и на наследуемых, и на ненаследуемых свойствах.
Смотрите также
- CSS документация
- Ключевые концепции CSS: Синтаксис CSS, @-правила, комментарии, специфичность и наследование, блочная модель, режимы компоновки и модели визуального форматирования, схлопывание отступов, начальные, вычисленные, решённые, указанные, используемые и действительные значения. Синтаксис определения значений, сокращённые свойства и замещаемые элементы.
inherit
Значение наследовать | Справочник CSS
basicweb.ru- HTML
- Учебник HTML
- Справочник тегов
- Атрибуты событий
- Глобальные атрибуты
- Коды языков
- Мнемоники
- Цвета
- Тесты знаний
- CSS
- Учебник CSS
- Справочник свойств
- Селекторы
- Обязательства
- Правила
- Flexbox генератор
- Сетевой генератор
- Учебник МЕНЬШЕ
- JavaScript
- Интерфейсы веб API
- Объект Массив
- Дата размещения
- Объект Функция
- Объект Global
- Объект JSON
- Объект Математика
- Номер объекта
- Объект Объект
- Объект RegExp
- Обещание объекта
- Строка объекта
- jQuery
- Селекторы
- События
- Методы ДОМ
- Перераз
- Утилиты
- Эффекты
- AJAX
- Объект Обратные звонки
- Объект отложен
HTML
- HTML учебник
- Справочник тегов
- Атрибуты событий
- Глобальные атрибуты
- Мнемоники
- Коды языков
- HTML цвета
- Тесты знаний
CSS
- Учебник CSS
- Справочник свойств
- CSS селекторы
- CSS функции
- Правила CSS
- Flexbox генератор
- Сетевой генератор
- МЕНЬШЕ учебник
JavaScript
- Интерфейсы веб API
- Объект Массив
- Дата размещения
- Объект Функция
- Объект Global
- Объект JSON
- Объект Math β
- Номер объекта
- Объект Объект
- Обещание объекта
- Объект RegExp
- Строка объекта
jQuery
- jQuery селекторы
- jQuery события
- jQuery методы DOM
- jQuery перемещение
- jQuery утилиты
- jQuery эффекты
- jQuery AJAX
- Обратные вызовы объекта jQuery
- jQuery объект отложен
CSS свойства
- align-content
- align-items
- выровнять себя
- все
- анимация
- задержка анимации
- анимация-направление
- продолжительность анимации
- режим заливки анимации
- количество итераций анимации
- имя-анимации
- состояние воспроизведения анимации
- функция синхронизации анимации
- задняя поверхность-видимость
- фон
- фон-приставка
- фоновый режим наложения
- фон-клип
- цвет фона
- фоновое изображение
- фон происхождения
- фон-позиция
- фон-повтор
- размер фона
- граница
- нижняя граница
- цвет нижней границы
- граница-нижний-левый-радиус
- граница-нижний-правый-радиус
- с окантовкой снизу
- ширина-нижняя граница
- пограничный обвал
- цвет рамки
- изображение границы
- граница-изображение-исход
- повтор изображения границы
- фрагмент изображения границы
- источник изображения границы
- ширина-границы-изображения
- граница слева
- левая рамка, цвет
- с рамкой слева
- ширина рамки слева
- граница-радиус
- граница правая
- цвет границы справа
- с рамкой справа
- ширина рамки справа
- интервал границы
- с бордюром
- кайма
- цвет верхней границы
- граница-верх-левый-радиус
- граница-верх-правый-радиус
- с бордюром
- ширина по верху границы
- ширина границы
- низ
- тень коробки
- размер коробки
- обрыв после
- перед перерывом
- взлом
- со стороны подписи
- прозрачный
- зажим
- цвет
- количество столбцов
- столбец-заполнитель
- колонна-зазор
- столбец-линейка
- столбец-линейка-цвет
- стиль столбца-правила
- ширина-правило столбца
- колонна-пролет
- ширина столбца
- столбцов
- содержание
- счетчик
- сброс счетчика
- курсор
- направление
- дисплей
- пустых ячеек
- фильтр
- гибкий
- гибкая основа
- гибкое направление
- гибкий поток
- гибкий рост
- гибкая термоусадочная
- гибкая пленка
- с плавающей запятой
- шрифт
- @ font-face
- семейство шрифтов
- размер шрифта
- стиль шрифта
- вариант шрифта
- font-weight
- сетка
- сетка
- сетка-автоматические столбцы
- сетка-автоматический поток
- сетка автоматических рядов
- сетка-столб
- конец столбца сетки
- сетка-столбец-зазор
- начало столбца сетки
- сетка-зазор
- сетка-рядка
- сетка-ряд-начало
- сетка-рядок-зазор
- конец строки сетки
- сетка-шаблон
- сетка-шаблон-области
- сетка-шаблон-столбцы
- сетка-шаблон-ряды
- justify-content
- justify-items
- оправдать себя
- высота
- @keyframes
- осталось
- межбуквенный интервал
- высота строки
- в виде списка
- изображение в стиле списка
- позиция в стиле списка
- тип списка
- маржа
- нижнее поле
- левое поле
- поле справа
- верхняя маржа
- макс. Высота
- макс. Ширина
- @media
- мин-высота
- мин. Ширина
- непрозрачность
- заказать
- детей-сирот
- наброски
- контурный цвет
- контур-офсет
- контурный
- ширина контура
- перелив
- перелив-обертка
- переполнение-x
- переполнение
- набивка
- обивка нижняя
- отступ слева
- обивка правая
- утеплитель
- разрыв страницы после
- разрыв страницы до
- разрыв страницы внутри
- перспектива
- перспективное происхождение
- место-содержание
- единиц места
- самообслуживание
- позиция
- цитат
- изменить размер
- правый
- размер табулятора
- стол-сервиз
- выравнивание текста
- выравнивание текста последнее
наследство — Веб-технологии для разработчиков
Ключевое слово наследование
(CSS) вынуждает элемент использовать вычисленное значение аналогичного свойства родительского элемента. Это может быть применено к любому свойству CSS, включая свойство CSS all
.
Для наследуемых свойств, это усиливает поведение по умолчанию и требуется только для переопределения других правил. Для ненаследуемых свойств это указывает на поведение, которое обычно имеет относительно мало смысла, и вы можете рассмотреть возможность использовать вместо начальное
или отключенное
со своимством все
.
Наследование происходит всегда от родительского элемента в дереве документов, даже если родительский элемент не является содержащим блоком.
Пример
/ * Делает заголовки второго уровня зелеными * / h3 {цвет: зеленый; } / * ... но не делает зелеными элементы боковой панели, которые используют цвет своего родителя * / #sidebar h3 {цвет: наследование; }
В этом примере элементы h3 внутри боковой панели могут быть разных цветов. Например, если один из них был второстепенный раздел, соответствующий правилу...
div # текущий {цвет: синий; }
...
он был бы синим .
Спецификации
Совместимость с браузерами
Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом https://github.com/mdn/browser-compat-data. Если вы хотите внести свой вклад в данные, проверьте данные и отправьте нам соответствующий запрос. Обновление данных о совместимости на GitHubКомпьютеры | Мобильные | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome для Android | Firefox для Android | Opera для Android | Safari на iOS | Samsung Internet | |
наследовать | Chrome Полная поддержка 1 | Кромка Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка 8 | Опера Полная поддержка 4 | Safari Полная поддержка 1 | WebView Android Полная поддержка 1 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Опера Android Полная поддержка 14 | Safari iOS Полная поддержка 1 | Samsung Интернет Android Полная поддержка 1.0 |
Легенда
- Полная поддержка
- Полная поддержка
Смотрите также
-
Наследование
-
Используйте
initial
, чтобы установить свойство в его начальное значение. -
Используйте
unset
, чтобы установить свойство в его унаследованное значение, если оно наследует, или его начальное значение, если нет. -
Используйте
revert
для сброса свойств до значений, установленного таблицей стилей пользователя-агента (или стилями пользователя, если они существуют). -
Свойство
all
позволяет сбросить все свойства сразу до начального (начального), унаследованного (унаследованного), возвращенного (возвращенного) или неустановленного (неустановленного) состояния.