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

Наследуется ли font-weight от body к span в HTML

Есть 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>

Будет ли font-weight на span влиять?

Теория: наследование font-weight

Свойство font-weight является наследуемым: если для элемента не задано значение, оно берётся (наследуется) из вычисленного значения родителя.
Следовательно, span, находящийся внутри body, получит полужирное начертание, так как у body задано font-weight: bold, а у span в данном HTML не задано альтернативное значение font-weight.

font-weight относится к оформлению текста, поэтому при отсутствии переопределений ожидается одинаковая жирность у текста всех потомков внутри элемента, где font-weight задан явно.

Механика применения в CSS выглядит так: сначала для элемента ищется «заданное значение» свойства по каскаду (правила автора, пользователя, браузера), и только если значения нет — применяется наследование.
Поэтому наследование — это резервный механизм: если бы у span было собственное значение font-weight (например, normal), оно бы перекрыло унаследованное значение от body.

Иногда создаётся ложное впечатление, что свойство «не наследуется», когда на потомке уже есть собственное значение из других правил каскада (например, из CSS-файла, встроенных стилей компонента или стилей браузера), и тогда наследование просто не используется.

Разбор исходного кода

Имеется стиль на body: color: red; font-weight: bold; display: block; background: url('bg.jpg');.
Из этих свойств color и font-weight по умолчанию наследуются, а, например, background и display — обычно нет, поэтому они не «переезжают» на дочерние элементы через наследование.

Внутри body находится span, и у него в разметке нет атрибута style и нет CSS-правил, задающих font-weight.
Значит, для span будет использовано унаследованное значение font-weight от ближайшего предка (в итоге от body через цепочку div), то есть bold.

Схема наследования в данном фрагменте (упрощённо):

html
└─ body (font-weight: bold)
   └─ div
      └─ div
         └─ span (font-weight: наследуется → bold)

Примеры и таблица

Пример 1. Исходный фрагмент (ключевой эффект — span станет полужирным):

<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>

Пример 2. Явное переопределение на span (полужирность пропадёт, так как наследование не будет применяться):

<html>
  <body style="font-weight: bold;">
    <span style="font-weight: normal;">
      Этот текст станет обычным
    </span>
  </body>
</html>

Пример 3. Явное указание наследования (эффект совпадёт с исходным, но становится «самодокументируемым»):

<html>
  <body style="font-weight: bold;">
    <span style="font-weight: inherit;">
      Этот текст будет полужирным
    </span>
  </body>
</html>

Пример 4. Относительные значения bolder/lighter зависят от веса шрифта родителя, то есть тоже привязаны к родительскому значению font-weight:

<html>
  <body style="font-weight: 700;">
    <span style="font-weight: lighter;">
      Этот текст станет легче, чем родитель
    </span>
  </body>
</html>
СвойствоЧто делаетНаследуется по умолчаниюЧто будет со span в задаче
font-weightТолщина/жирность шрифтаДаБудет bold (унаследуется от body)
colorЦвет текстаДаБудет красным (унаследуется от body)
borderГраница элементаНетНе появится из-за родителя

Кратко: font-weight: bold, заданный на body, будет влиять на span, потому что font-weight наследуется, и у span нет собственного значения этого свойства.