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

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

Типичным примером наследуемого свойства является свойство color. Рассмотрим следующие правила стилей и разметку:

p {
  color: green;
}

<p>This paragraph has <em>emphasized text</em> in it.</p>

Слова "выделенный текст" будут отображаться зеленым цветом, так как элемент em унаследовал значение свойства color от элемента p. Он не получает начальное значение свойства (который цвет используется для корневого элемента, когда на странице не указан цвет).

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

Типичным примером ненаследуемого свойства является свойство border. Рассмотрим следующие правила стилей и разметку:

p {
  border: medium solid;
}

<p>This paragraph has <em>emphasized text</em> in it.</p>

У слов "выделенный текст" не будет другого рамки (так как начальное значение border-style равно none).

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

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

p {
  all: revert;
  font-size: 200%;
  font-weight: bold;
}

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

Используя наш предыдущий пример с border, если мы явно зададим наследование с помощью inherit, мы получим следующее:

p {
  border: medium solid;
}

em {
  border: inherit;
}

<p>This paragraph has <em>emphasized text</em> in it.</p>

Здесь мы видим еще одну рамку вокруг слов "выделенный текст".

• Значения CSS для управления наследованием: inherit, initial, revert, revert-layer и unset
• Обработка ошибок CSS
• Введение в каскад CSS
• Основные принципы: каскад CSS
• Основные принципы: слои каскада
• Модуль каскада и наследования CSS
• Руководство по синтаксису CSS
• Модуль синтаксиса CSS
• Правила @
• Начальные, вычисленные, используемые и фактические значения
• Синтаксис определения значений
• Модуль вложенности CSS