Подкаст CSS – 005: Наследование
Допустим, вы только что написали CSS, чтобы элементы выглядели как кнопки.
<a href="http://example.com" class="my-button">I am a button link</a>
.my-button {
display: inline-block;
padding: 1rem 2rem;
text-decoration: none;
background: pink;
font: inherit;
text-align: center;
}
Затем вы добавляете элемент ссылки в статью контента со значением class
.my-button
. Однако есть проблема: текст имеет не тот цвет, который вы ожидали. Как это произошло?
Некоторые свойства CSS наследуются, если вы не укажете для них значение. В случае с этой кнопкой она унаследовала color
от этого CSS:
article a {
color: maroon;
}
В этом уроке вы узнаете, почему это происходит и почему наследование — это мощная функция, которая поможет вам писать меньше CSS.
Поток наследования
Давайте посмотрим, как работает наследование, используя этот фрагмент HTML:
<html>
<body>
<article>
<p>Lorem ipsum dolor sit amet.</p>
</article>
</body>
</html>
Корневой элемент ( <html>
) ничего не наследует, поскольку это первый элемент в документе. Добавьте немного CSS к элементу HTML, и он начнет распространяться по документу.
html {
color: lightslategray;
}
Свойство color
по умолчанию наследуется другими элементами. Элемент html
имеет color: lightslategray
, поэтому все элементы, которые могут наследовать цвет, теперь будут иметь lightslategray
.
body {
font-size: 1.2em;
}
p {
font-style: italic;
}
Только <p>
будет выделен курсивом, поскольку это самый глубоко вложенный элемент. Наследование осуществляется только вниз, а не обратно к родительским элементам.
Какие свойства наследуются по умолчанию?
Не все свойства CSS наследуются по умолчанию, но многие из них наследуются. Для справки, вот весь список свойств, наследуемых по умолчанию, взятый из ссылки W3 на все свойства CSS:
- азимут
- коллапс границ
- расстояние между границами
- сторона подписи
- цвет
- курсор
- направление
- пустые ячейки
- семейство шрифтов
- размер шрифта
- стиль шрифта
- вариант шрифта
- вес шрифта
- шрифт
- межбуквенный интервал
- высота строки
- изображение в стиле списка
- позиция в стиле списка
- тип стиля списка
- стиль списка
- сироты
- кавычки
- выравнивание текста
- текстовый отступ
- преобразование текста
- видимость
- пробел
- вдовы
- межсловный интервал
Как работает наследование
Каждый элемент HTML имеет каждое свойство CSS, определенное по умолчанию с начальным значением. Начальное значение — это свойство, которое не наследуется и отображается по умолчанию, если каскаду не удается вычислить значение для этого элемента.
Свойства, которые могут быть унаследованы каскадом вниз, а дочерние элементы получат вычисленное значение, которое представляет значение его родительского элемента. Это означает, что если родительский шрифт имеет значение bold
font-weight
, все дочерние элементы будут выделены полужирным шрифтом, если только для их font-weight
не установлено другое значение или в таблице стилей пользовательского агента не указано значение font-weight
для этого элемента.
Как явно наследовать и контролировать наследование
Наследование может влиять на элементы неожиданным образом, поэтому в CSS есть инструменты, которые помогут в этом.
Ключевое слово inherit
Вы можете заставить любое свойство наследовать вычисленное значение своего родителя с помощью ключевого слова inherit
. Полезный способ использования этого ключевого слова — создание исключений.
strong {
font-weight: 900;
}
Этот фрагмент CSS устанавливает для всех элементов <strong>
font-weight
900
вместо значения bold
по умолчанию, которое было бы эквивалентом font-weight: 700
.
.my-component {
font-weight: 500;
}
Вместо этого класс .my-component
устанавливает font-weight
равным 500
. Чтобы сделать элементы <strong>
внутри .my-component
также font-weight: 500
добавьте:
.my-component strong {
font-weight: inherit;
}
Теперь элементы <strong>
внутри .my-component
будут иметь font-weight
500
.
Вы можете явно установить это значение, но если вы будете использовать inherit
и CSS .my-component
изменится в будущем, вы можете гарантировать, что ваш <strong>
будет автоматически соответствовать ему.
initial
ключевое слово
Наследование может вызвать проблемы с вашими элементами, и initial
предоставляет вам мощную возможность сброса.
Ранее вы узнали, что каждое свойство имеет значение по умолчанию в CSS. Ключевое слово initial
возвращает свойству исходное значение по умолчанию.
aside strong {
font-weight: initial;
}
Этот фрагмент удалит жирный шрифт со всех элементов <strong>
внутри элемента <aside>
и вместо этого придаст им нормальный вес, который является начальным значением.
unset
ключевое слово
unset
свойство ведет себя по-разному, если свойство наследуется по умолчанию или нет. Если свойство наследуется по умолчанию, ключевое слово unset
будет таким же, как inherit
. Если свойство не наследуется по умолчанию, ключевое слово unset
равно initial
.
Запомнить, какие свойства CSS наследуются по умолчанию, может быть сложно, в этом контексте может оказаться полезным unset
. Например, color
наследуется по умолчанию, а margin
— нет, поэтому вы можете написать следующее:
/* Global color styles for paragraph in authored CSS */
p {
margin-top: 2em;
color: goldenrod;
}
/* The p needs to be reset in asides, so you can use unset */
aside p {
margin: unset;
color: unset;
}
Теперь margin
удаляется, и color
снова становится унаследованным вычисленным значением.
Вы также можете использовать значение unset
со свойством all
. Возвращаясь к приведенному выше примеру, что произойдет, если глобальные стили p
получат еще несколько свойств? Будет применяться только то правило, которое было установлено для margin
и color
.
/* Global color styles for paragraph in authored CSS */
p {
margin-top: 2em;
color: goldenrod;
padding: 2em;
border: 1px solid;
}
/* Not all properties are accounted for anymore */
aside p {
margin: unset;
color: unset;
}
Если вместо этого вы измените правило aside p
на all: unset
, то не имеет значения, какие глобальные стили будут применены к p
в будущем, они всегда будут отключены.
aside p {
margin: unset;
color: unset;
all: unset;
}
Проверьте свое понимание
Проверьте свои знания о наследстве
Какие из следующих свойств наследуются?
line-height
color
animation
text-align
font-size
Какое значение ведет себя как inherit
, если только наследовать нечего, а затем ведет себя как initial
?
superset
unset
reset