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

1. Что такое наследование?

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

<div style="color: red; font-size: 20px;">
  Родитель
  <p>Дочерний элемент — тоже красный и крупный</p>
</div>

Здесь <p> унаследует color: red и font-size: 20px, если ему не заданы свои значения.

2. Какие свойства наследуются, а какие — нет?

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

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

3. Управление наследованием

Есть четыре ключевых слова, которые управляют наследованием (inherit, initial, unset, revert):

Примеры:

/* Принудительное наследование даже для ненаследуемых свойств */
.child {
  border: inherit; /* наследует border от родителя */
}

/* Сброс к значению по умолчанию */
p {
  color: initial; /* цвет станет чёрным (браузерный default) */
}

/* Универсальный сброс */
div {
  all: unset; /* сбрасывает все свойства */
}

4. Специальное свойство all

Позволяет одним махом управлять наследованием для всех свойств элемента:

.element {
  all: inherit;   /* наследует все свойства */
  all: initial;   /* все свойства по умолчанию */
  all: unset;     /* наследуемые наследуются, остальные сбрасываются */
  all: revert;    /* браузерные стили */
}

6. Важные нюансы

1. Наследование работает только от родителя → потомку, никогда наоборот.
2. Расчётные значения — наследуется не исходное значение, а вычисленное (например, font-size: 2em — наследуется уже посчитанное значение в пикселях).
3. Встроенные стили имеют наивысший приоритет, но !important может перебить и их.
4. Некоторые свойства наследуются не полностью, а по частям (например, background не наследуется, но background-color можно наследовать отдельно).