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

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

Зачем нужно

Наследование избавляет от необходимости задавать одни и те же стили каждому элементу. Достаточно установить font-family на body — и все текстовые элементы унаследуют шрифт. Это делает CSS компактным и поддерживаемым.

Где используется

  • Установка базовых стилей текста на корневом элементе
  • Тематизация компонентов через CSS-переменные (они наследуются)
  • Переключение color для всего блока одним правилом

Предпосылки

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

Наследуются преимущественно текстовые свойства:

/* Все эти свойства наследуются потомками */
body {
  color: #333;                /* цвет текста */
  font-family: Arial, sans-serif; /* шрифт */
  font-size: 16px;            /* размер шрифта */
  font-weight: normal;        /* жирность */
  font-style: normal;         /* курсив */
  line-height: 1.6;           /* высота строки */
  letter-spacing: 0.02em;     /* межбуквенный интервал */
  word-spacing: normal;       /* интервал между словами */
  text-align: left;           /* выравнивание текста */
  text-indent: 0;             /* отступ первой строки */
  text-transform: none;       /* преобразование регистра */
  white-space: normal;        /* обработка пробелов */
  direction: ltr;             /* направление текста */
  visibility: visible;        /* видимость */
  cursor: default;            /* курсор */
  list-style: disc;           /* стиль маркеров списка */
}

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

Блочная модель и позиционирование НЕ наследуются:

.parent {
  /* Ничего из этого НЕ передастся детям */
  margin: 20px;
  padding: 20px;
  border: 1px solid black;
  width: 500px;
  height: 300px;
  background-color: lightblue;
  display: flex;
  position: relative;
  top: 10px;
  z-index: 1;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  opacity: 0.9;
  transform: rotate(5deg);
}

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

<div class="article">
  <h2>Заголовок</h2>
  <p>Параграф с <strong>жирным</strong> и <em>курсивом</em></p>
  <ul>
    <li>Пункт списка</li>
  </ul>
</div>

.article {
  color: #2c3e50;          /* Унаследуется всеми потомками */
  font-family: Georgia, serif; /* Унаследуется всеми потомками */
  padding: 20px;           /* НЕ унаследуется */
  border: 1px solid #ddd;  /* НЕ унаследуется */
}

/* h2, p, strong, em, ul, li — все получат color и font-family */
/* Но padding и border будут ТОЛЬКО у .article */

Ключевые слова управления наследованием

inherit — принудительное наследование

Заставляет свойство наследоваться, даже если оно ненаследуемое по умолчанию:

.parent {
  border: 2px solid red;
  padding: 20px;
}

.child {
  border: inherit;  /* Получит border от родителя */
  padding: inherit; /* Получит padding от родителя */
}

initial — начальное значение

Сбрасывает свойство к его начальному значению из спецификации CSS (НЕ к стилям браузера):

h1 {
  font-size: initial;  /* = medium (~16px), НЕ стандартный размер h1 */
  font-weight: initial; /* = normal, НЕ bold */
  display: initial;     /* = inline, НЕ block */
}

initial задаёт значение из CSS-спецификации, а не из стилей браузера (user-agent). Это часто неожиданно!

unset — умный сброс

Работает как inherit для наследуемых свойств и как initial для ненаследуемых:

.reset() {
  color: unset;      /* = inherit (color наследуемый) */
  font-size: unset;  /* = inherit (font-size наследуемый) */
  padding: unset;    /* = initial = 0 (padding ненаследуемый) */
  border: unset;     /* = initial = none (border ненаследуемый) */
}

revert — возврат к стилям браузера

Откатывает к стилям user-agent (стилям браузера по умолчанию):

h1 {
  font-size: revert;  /* Вернёт крупный размер h1 из браузера */
  font-weight: revert; /* Вернёт bold из браузера */
  display: revert;     /* Вернёт block из браузера */
}

revert-layer — возврат к предыдущему слою

Откатывает к значению из предыдущего CSS Layer:

@layer base {
  h1 { color: navy; }
}

@layer theme {
  h1 { color: revert-layer; } /* = navy из слоя base */
}

Сравнительная таблица

Ключевое слово Наследуемое свойство Ненаследуемое свойство
inherit Значение родителя Значение родителя
initial Значение из спецификации Значение из спецификации
unset Значение родителя (= inherit) Значение из спецификации (= initial)
revert Значение из user-agent Значение из user-agent

all — сброс всех свойств

/* Сбросить ВСЕ стили элемента */
.reset()-all {
  all: unset; /* Все наследуемые = inherit, ненаследуемые = initial */
}

.use-browser-defaults {
  all: revert; /* Все свойства = стили браузера */
}

/* Полезно для изоляции компонента от внешних стилей */
.isolated-component {
  all: initial;
  display: block; /* Задаём заново только нужное */
  font-family: sans-serif;
}

Наследование CSS-переменных

Custom properties (CSS-переменные) всегда наследуются:

:root {
  --color-primary: #007bff;
  --spacing: 16px;
}

.card {
  --color-primary: #e74c3c; /* Переопределение для .card и потомков */
  color: var(--color-primary); /* #e74c3c */
}

.card .button {
  /* Унаследует --color-primary = #e74c3c от .card */
  background: var(--color-primary);
}

Частые ошибки

  1. initial вместо revert — initial НЕ возвращает стили браузера:
    /* ОШИБКА: h1 станет inline с мелким шрифтом */
h1 {
  display: initial;    /* inline, не block! */
  font-size: initial;  /* medium, не 2em! */
}
  2. Ожидание наследования background — фон не наследуется, но прозрачный фон потомка показывает фон родителя:
    .parent { background: lightblue; }
.child { /* фон прозрачный — видно lightblue родителя */ }
/* Это НЕ наследование, а прозрачность по умолчанию */
  3. Ненаследуемый line-height с единицами — значение с px наследуется как абсолютное:
    /* ПЛОХО */
body { font-size: 16px; line-height: 24px; }
h1 { font-size: 32px; } /* line-height всё ещё 24px — тесно! */

/* ХОРОШО — безразмерное значение */
body { font-size: 16px; line-height: 1.5; }
h1 { font-size: 32px; } /* line-height = 32 * 1.5 = 48px */
  4. Наследование a не работает для color — у ссылок есть стили user-agent:
    .parent { color: red; }
/* <a> внутри .parent всё ещё синяя — user-agent стили */

/* Исправление */
.parent a { color: inherit; }

Практика

  • Задать color и font-family на body и убедиться, что потомки наследуют
  • Проверить, наследуются ли padding, border, background
  • Попробовать inherit, initial, unset, revert на одном элементе
  • Использовать all: unset для полного сброса компонента
  • Задать безразмерный line-height и проверить наследование в h1

Связанные темы

Ресурсы