Создание сайтов с нуля - урок 28 - Наследование в CSS

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

Например, размер шрифта и его цвет достаточно применить к body, чтобы все элементы внутри имели те же свойства.

Таким образом, при правильном использовании наследование позволяет значительно сократить размер таблицы стилей.

Но наследование работает не для всех свойств. Некоторые свойства применяются только к самому элементу и не переходят к его потомкам.

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

К наследуемым свойствам относятся в первую очередь свойства, определяющие параметры отображения текста:

- часто используемые - font-size, font-family, font-style, font-weight, color, text-align, text-transform, text-indent, line-height, letter-spacing, word-spacing, white-space, direction и т. д.;

- реже используемые list-style, cursor, visibility, border-collapse и некоторые другие.

Эти свойства можно и нужно задавать через предков.

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

К ненаследуемым свойствам относятся параметры позиционирования, размеров, отступов, фона, рамок и т. д.: background, border, padding, margin, width, height, position и др.

Не наследуются они из соображений здравого смысла. Например: если для какого-либо блока установлен внутренний отступ, автоматически выставлять такой же отступ каждому вложенному элементу нет никакой надобности. Эти параметры чаще всего уникальны для каждого отдельного блока.

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

Для каждого свойства может быть задано значение inherit.

Оно означает, что данное свойство принимает такое же значение, как и у родительского элемента. Значение inherit может быть использовано для усиления наследуемых значений, а также в свойствах, которые обычно не наследуются.

Запись выглядит следующим образом:

a {

    border: inherit;

}

В данном случае у тегов a свойство border будет таким же, как и у их родительских тегов.