skip to main content

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

css

Кратко 🔗

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

Пример 🔗

<p style="color: red">
Весь <span>текст</span> в <em>этом</em> абзаце будет <b>красным</b>.
</p>

Как это понять 🔗

Для некоторых HTML-тегов предопределены особые CSS-свойства по умолчанию (их ещё называют user agent-стили — т. е. стили от браузера), которые характерны только для конкретно этих элементов, например, margin: 8px для <body>, color: #00c для ссылок или font-weight: bolder для <b>. Их можно переопределить, но некоторые свойства (цвета текста, размера шрифта, внешнего вида курсора и другие) будут применяться для любых вложенных элементов, пока для них не будет указано иного значения. Такая наследуемость не случайна и обусловлена одним очень интересным CSS-значением у этих свойств — inherit, что буквально и значит «наследуемое».

Если у какого-то свойства указать значение inherit — оно будет взято у верхнего «родителя». Для некоторых CSS-свойств это значение указано по умолчанию.

Наследуемые свойства 🔗

  • Свойства шрифта: font и его «производных»: font-style, font-variant, font-weight, font-stretch, font-size и font-family; color и line-height;
  • свойства межбуквенных и «межсловных» расстояний: letter-spacing, word-spacing и white-space;
  • параметры текста: text-align, text-indent, text-shadow, text-transform;
  • оформление пунктов списков: list-style, list-style-type, list-style-position;
  • внешний вид курсора: cursor и отображение содержимого элемента visablity.

Например, в отличие от color, ненаследуемое свойство border не будет применено к вложенным элементам:

<h1>
<span>You</span>
<span>Shall not</span>
<span>Pass</span>
</h1>
h1 {
border: 1px solid #ED6742;
color: #ED6742;
}
span {
display: block;
}

Но если мы укажем у <span> свойство border как inherit (т. е. наследуемое):

span {
border: inherit;
}

Подсказки 🔗

💡 Другой пример наследования — использование вместо указания цвета значения currentColor , который равен цвету текста текущего элемента, т. е. значению свойства color. Если color текущего элемента равен inerit (т. е. наследует значение «родителя»), то и currentColor также будет соответствовать текущему значению color «родителя». Причём это ключевое слово можно указывать в качестве значения для любого свойства, где значением является цвет, не только для color. См. раздел «В работе».

Значения rem / em — также частный случай наследования кратного размера текста («родителя», если указан em и корневого тега в случае с rem).

Полный список наследуемых по умолчанию CSS-свойств помечен в спецификации в колонке «Inherited?» значением yes.

Значение любого CSS-свойства можно «позаимствовать» («унаследовать») у родителя. Если «родителя» нет, inherit будет соответствовать значению по умолчанию для этого элемента.

В работе 🔗

Алёна,

🛠 Удобно делать всякие трюки, используя currentColor. Мы не меняем явно цвет бордера по наведению курсора, но он меняется вслед за color.

<button class="magic-btn">Волшебная кнопка</button>
.magic-btn {
padding: 15px;
color: pink;
border: 1px solid;
border-color: currentColor;
background-color: transparent;
cursor: pointer;
transition: all 0.2s;
}

.magic-btn:hover {
color: green;
opacity: 0.99; /* это нужно для Safari, там баг */
}

Автор: Роман,