PassFront
  1. PassFront
  2. База знаний
  3. Наследование и каскад

Какие свойства CSS наследуются по умолчанию и как управлять наследованием?

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

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

Что наследуется

Обычно это свойства текста и шрифта: color, font-family, font-size, line-height, text-align, visibility, cursor, list-style.

Что не наследуется

Свойства блочной модели и раскладки: margin, padding, border, background, width, height, display, position.

Управление

.card { border: 1px solid; color: navy; }

.card a {
  color: inherit;      /* взять у родителя */
}
.card button {
  border: initial;     /* значение по умолчанию спецификации */
  all: unset;          /* сбросить все свойства */
}
.card .reset {
  color: revert;       /* вернуть стиль браузера */
}
  • inherit включает наследование для ненаследуемого свойства.
  • initial возвращает начальное значение из спецификации.
  • unset ведёт себя как inherit для наследуемых свойств и как initial для остальных.
  • revert откатывает к стилям браузера или пользователя.

Наследование даёт тему: задайте font-family и color на body, а компоненты подхватят их.

Коротко для собеседования

Наследуются свойства текста и шрифта (color, font-family, line-height), размеры и отступы нет. Управлять наследованием можно через inherit, initial, unset и revert.

Другие вопросы раздела