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

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

Какие свойства наследуются

  • Текстовые свойства: color, font-family, font-size, line-height
  • Свойства списка: list-style
  • Свойства таблиц: border-collapse, caption-side

Какие свойства не наследуются

  • Блочные и позиционированные свойства: margin, padding, border, width, height
  • Фоновые свойства: background, background-color
  • Свойства отображения и позиционирования: display, position, float

Пример наследования

div.parent {
  color: darkblue;
  font-family: Arial, sans-serif;
}

div.child {
  font-size: 14px; /* наследует цвет и шрифт от родителя */
}

В этом примере div.child автоматически получает color: darkblue и font-family: Arial от родителя.

Принудительное наследование

Можно принудительно наследовать свойства с помощью inherit:

span {
  color: inherit;
}

Резюме

  • Наследование упрощает стилизацию и поддержание кода.
  • Не все свойства наследуются автоматически.
  • Можно использовать inherit для принудительного наследования.