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

Когда для свойства элемента не указано значение, дальнейшее определяет наследование. Свойство либо получает значение от родительского элемента, либо возвращается к своему начальному значению (значению по умолчанию).

Какой из двух вариантов применяется, зависит от типа свойства:

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

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

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

Так обычно работают свойства, связанные с текстом, среди которых color, font-family, font-size, line-height и text-align, благодаря чему оформление текста остаётся единообразным во всём документе.

Ниже родительский элемент  передаёт свои значения color и font-size элементу , поэтому текст внутри него синий и имеет размер 20px.

Пример

И color, и font-size здесь передаются от абзаца:

Создайте HTML-страницу, показывающую, как работают наследуемые свойства CSS. Стилизуйте абзац синим цветом и размером шрифта 20px, включив внутрь него элемент <strong>, чтобы продемонстрировать, что дочерний элемент наследует и цвет, и размер шрифта от родителя.

> Результат: полная HTML-страница
"}, {

Prompt

Создайте HTML-страницу, показывающую, как работают наследуемые свойства CSS. Стилизуйте абзац синим цветом и размером шрифта 20px, включив внутрь него элемент , чтобы продемонстрировать, что дочерний элемент наследует и цвет, и размер шрифта от родителя.

Результат: полная HTML-страница "}, {

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Inherited Properties</title>
<style>
p {
  color: blue;
  font-size: 20px;
}
</style>
</head>
<body>

<p>This is a paragraph with some <strong>important</strong> text.</p>

</body>
</html>

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

Если значение не задано, ненаследуемое свойство просто использует своё начальное значение (значение по умолчанию).

Так обычно ведут себя свойства блочной модели и оформления, включая border, background, margin, padding, width и height.

Ниже border-style изначально равно none, поэтому элемент  не получает дополнительной рамки, хотя окружающий его элемент  её имеет.

Пример

border здесь остаётся на абзаце и не передаётся дальше:

Создайте HTML-страницу, показывающую, как работают ненаследуемые свойства CSS. Стилизуйте абзац с рамкой 1px solid red и включите внутрь него элемент <strong>, чтобы продемонстрировать, что дочерний элемент не наследует рамку от родителя.

> Результат: полная HTML-страница
"}, {

Prompt

Создайте HTML-страницу, показывающую, как работают ненаследуемые свойства CSS. Стилизуйте абзац с рамкой 1px solid red и включите внутрь него элемент , чтобы продемонстрировать, что дочерний элемент не наследует рамку от родителя.

Результат: полная HTML-страница "}, {

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Non-inherited Properties</title>
<style>
p {
  border: 1px solid red;
}
</style>
</head>
<body>

<p>This is a paragraph with some <strong>important</strong> text.</p>

</body>
</html>

Ключевое слово inherit

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

Ниже оно указывает элементу  внутри элемента  взять значение border от родителя, поэтому элемент  получает дополнительную рамку.

Пример

Здесь ключевое слово inherit явно запрашивает наследование:

Создайте HTML-страницу, показывающую, как работает ключевое слово CSS inherit. Стилизуйте абзац с рамкой 1px solid red. Затем используйте ключевое слово inherit для элемента strong внутри него, чтобы явно унаследовать рамку от родителя.

> Результат: полная HTML-страница
"}, {

Prompt

Создайте HTML-страницу, показывающую, как работает ключевое слово CSS inherit. Стилизуйте абзац с рамкой 1px solid red. Затем используйте ключевое слово inherit для элемента strong внутри него, чтобы явно унаследовать рамку от родителя.

Результат: полная HTML-страница "}, {

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS inherit Keyword</title>
<style>
p {
  border: 1px solid red;
}

strong {
  border: inherit;
}
</style>
</head>
<body>

<p>This is a paragraph with some <strong>strong</strong> text.</p>

</body>
</html>