Подготовка к тех.интервью

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

Есть шаблон вложенного HTML кода:

<html>
  <head>
    <title>CSS test 2</title>
  </head>
  <body style="color: red; font-weight: bold; display: block; background: url('bg.jpg');">
    <div>
      Some test text
      <div>
        Lorem ipsum etc..
        <span>
          One more dummy text
        </span>
      </div>
    </div>
  </body>
</html>

Какой будет цвет у текста «One more dummy text»?

Теория: наследование и currentColor

Если для наследуемого свойства на элементе не задано собственное значение, берётся вычисленное значение этого свойства у родителя (это и называется наследованием).
Свойство color — один из основных примеров наследуемого свойства, поэтому потомки обычно получают цвет текста от ближайшего предка, у которого он явно определён.
currentColor означает «текущее значение color у этого элемента» и часто используется в других свойствах (например, в border-color), чтобы рамка и текст совпадали по цвету.
Начальное (initial) значение color задаётся браузером (и может зависеть от темы/настроек), поэтому «по умолчанию чёрный» — не строгое правило для всех сред.

Начальные цвета, выбираемые браузером, могут отличаться в зависимости от тёмной/светлой темы и пользовательских настроек, поэтому ожидать один и тот же «чёрный» во всех случаях некорректно.

Разбор данного HTML по шагам

Исходный фрагмент (ключевой момент — color: red на <body>):

<html>
  <head>
    <title>CSS test 2</title>
  </head>
  <body style="color: red; font-weight: bold; display: block; background: url('bg.jpg');">
    <div>
      Some test text
      <div>
        Lorem ipsum etc..
        <span>
          One more dummy text
        </span>
      </div>
    </div>
  </body>
</html>

Шаг 1. На <body> явно задано color: red, значит базовый цвет текста внутри body — красный (если ниже по дереву он не переопределён).

Шаг 2. Внутренние элементы <div> и <span> не имеют собственных правил color, поэтому срабатывает наследование: берётся цвет у родителя.

Шаг 3. Путь наследования в дереве выглядит так (упрощённо):

body (color: red)
└── div (color: наследуется → red)
    └── div (color: наследуется → red)
        └── span (color: наследуется → red)

Шаг 4. Следовательно, текст внутри <span> («One more dummy text») будет красным, то есть правильный вариант — 3. red.

Мини-таблица: что именно наследуется здесь

СвойствоЗадано на <body>Наследуется потомкамиВлияет на «One more dummy text»
colorredДаДа, делает текст красным
font-weightboldДаДа, делает текст жирным
backgroundurl('bg.jpg')НетНет, не меняет цвет текста
Фон (background) не изменяет color текста; это разные свойства: фон рисуется «под» содержимым, а цвет текста задаётся color.

Примеры, ловушки и подсказка

Частая ловушка 1: принудительно сбросить цвет у потомка к начальному значению.
Если добавить дочернему элементу color: initial, текст перестанет наследовать красный и возьмёт начальное значение color, выбранное браузером.

<body style="color: red;">
  <span style="color: initial;">One more dummy text</span>
</body>

Частая ловушка 2: перепутать currentColor с «именем цвета».
currentColor — это ссылка на текущее значение color на этом же элементе и часто применяется для синхронизации цветов.

.button {
  color: red;
  border: 2px solid currentColor;
}

Частая ловушка 3: браузерные стили некоторых элементов.
Например, у ссылок (<a>) часто есть собственный цвет по умолчанию, из‑за чего может казаться, что цвет «не наследуется», хотя фактически происходит конкуренция правил каскада (у элемента появляется собственное значение color из других правил).

Кратко: на <body> задан color: red, color наследуется, у <span> переопределения нет, поэтому «One more dummy text» будет красным (вариант 3).