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

Подкаст CSS – 005: Наследование

Допустим, вы только что написали CSS, чтобы элементы выглядели как кнопки.

<a href="http://example.com" class="my-button">I am a button link</a>

.my-button {
  display: inline-block;
  padding: 1rem 2rem;
  text-decoration: none;
  background: pink;
  font: inherit;
  text-align: center;
}

Затем вы добавляете элемент ссылки в статью контента со значением class .my-button . Однако есть проблема: текст имеет не тот цвет, который вы ожидали. Как это произошло?

Некоторые свойства CSS наследуются, если вы не укажете для них значение. В случае с этой кнопкой она унаследовала color от этого CSS:

article a {
  color: maroon;
}

В этом уроке вы узнаете, почему это происходит и почему наследование — это мощная функция, которая поможет вам писать меньше CSS.

Поток наследования

Давайте посмотрим, как работает наследование, используя этот фрагмент HTML:

<html>
  <body>
    <article>
      <p>Lorem ipsum dolor sit amet.</p>
    </article>
  </body>
</html>

Корневой элемент ( <html> ) ничего не наследует, поскольку это первый элемент в документе. Добавьте немного CSS к элементу HTML, и он начнет распространяться по документу.

html {
  color: lightslategray;
}

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

body {
  font-size: 1.2em;
}

p {
  font-style: italic;
}

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

Какие свойства наследуются по умолчанию?

Не все свойства CSS наследуются по умолчанию, но многие из них наследуются. Для справки, вот весь список свойств, наследуемых по умолчанию, взятый из ссылки W3 на все свойства CSS:

Как работает наследование

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

Свойства, которые могут быть унаследованы каскадом вниз, а дочерние элементы получат вычисленное значение, которое представляет значение его родительского элемента. Это означает, что если родительский шрифт имеет значение bold font-weight , все дочерние элементы будут выделены полужирным шрифтом, если только для их font-weight не установлено другое значение или в таблице стилей пользовательского агента не указано значение font-weight для этого элемента.

Как явно наследовать и контролировать наследование

Наследование может влиять на элементы неожиданным образом, поэтому в CSS есть инструменты, которые помогут в этом.

Ключевое слово inherit

Вы можете заставить любое свойство наследовать вычисленное значение своего родителя с помощью ключевого слова inherit . Полезный способ использования этого ключевого слова — создание исключений.

strong {
  font-weight: 900;
}

Этот фрагмент CSS устанавливает для всех элементов <strong> font-weight 900 вместо значения bold шрифта по умолчанию, которое было бы эквивалентом font-weight: 700 .

.my-component {
  font-weight: 500;
}

Вместо этого класс .my-component устанавливает font-weight равным 500 . Чтобы сделать элементы <strong> внутри .my-component также font-weight: 500 добавьте: 

.my-component strong {
  font-weight: inherit;
}

Теперь элементы <strong> внутри .my-component будут иметь font-weight 500 .

Вы можете явно установить это значение, но если вы будете использовать inherit и CSS .my-component изменится в будущем, вы можете гарантировать, что ваш <strong> будет автоматически соответствовать ему.

initial ключевое слово

Наследование может вызвать проблемы с вашими элементами, и initial предоставляет вам мощную возможность сброса.

Ранее вы узнали, что каждое свойство имеет значение по умолчанию в CSS. Ключевое слово initial возвращает свойству исходное значение по умолчанию. 

aside strong {
  font-weight: initial;
}

Этот фрагмент удалит жирный шрифт со всех элементов <strong> внутри элемента <aside> и вместо этого придаст им нормальный вес, который является начальным значением.

unset ключевое слово

unset свойство ведет себя по-разному, если свойство наследуется по умолчанию или нет. Если свойство наследуется по умолчанию, ключевое слово unset будет таким же, как inherit . Если свойство не наследуется по умолчанию, ключевое слово unset равно initial .

Запомнить, какие свойства CSS наследуются по умолчанию, может быть сложно, в этом контексте может оказаться полезным unset . Например, color наследуется по умолчанию, а margin — нет, поэтому вы можете написать следующее: 

/* Global color styles for paragraph in authored CSS */
p {
  margin-top: 2em;
  color: goldenrod;
}

/* The p needs to be reset in asides, so you can use unset */
aside p {
  margin: unset;
  color: unset;
}

Теперь margin удаляется, и color снова становится унаследованным вычисленным значением.

Вы также можете использовать значение unset со свойством all . Возвращаясь к приведенному выше примеру, что произойдет, если глобальные стили p получат еще несколько свойств? Будет применяться только то правило, которое было установлено для margin и color . 

/* Global color styles for paragraph in authored CSS */
p {
    margin-top: 2em;
    color: goldenrod;
    padding: 2em;
    border: 1px solid;
}

/* Not all properties are accounted for anymore */
aside p {
    margin: unset;
    color: unset;
}

Если вместо этого вы измените правило aside p на all: unset , то не имеет значения, какие глобальные стили будут применены к p в будущем, они всегда будут отключены. 

aside p {
    margin: unset;
    color: unset;
    all: unset;
}

Проверьте свое понимание

Проверьте свои знания о наследстве

Какие из следующих свойств наследуются по умолчанию?

animation
Анимации не передаются детям.
font-size
🎉
color
🎉
text-align
🎉
line-height
🎉

Какое значение ведет себя как inherit если только наследовать нечего, а затем ведет себя как initial ?

reset
недопустимое значение, попробуйте еще раз!
unset
🎉
superset
недопустимое значение, попробуйте еще раз!

Ресурсы