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

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

В этой статье объясняется, как работает наследование в CSS.

Вы можете ознакомиться с основными наследуемыми и ненаследуемыми свойствами.

YouTube Video

HTML для предварительного просмотра

css-inheritance.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Inheritance</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-inheritance.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Inheritance</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header><h2>CSS Inheritance</h2></header>
19        <article>
20            <h3>Example of Inheritance</h3>
21            <section>
22                <p>
23                    Example of P Element.<br>
24                    <span>Example of Span Element</span>
25                </p>
26            </section>
27            <div>
28                Example of Div Element
29            </div>
30            <ul>
31                <li>List Item 1</li>
32                <li>List Item 2</li>
33                <li>List Item 3</li>
34            </ul>
35        </article>
36        <article>
37            <h3>all</h3>
38            <section>
39                <h4>Initial</h4>
40                <div class="all-initial">This is an initial element</div>
41            </section>
42            <section>
43                <h4>Inherit</h4>
44                <div class="parent-inherit">
45                    <div class="all-inherit">This is an inherited element</div>
46                </div>
47            </section>
48            <section>
49                <h4>Unset All</h4>
50                <div class="parent-unset">
51                    <div class="all-unset">This is an unset element</div>
52                </div>
53            </section>
54            <section>
55                <h4>all and !important</h4>
56                <div class="important-style">
57                    <div class="all-with-important">
58                        This is an initial element with !important
59                    </div>
60                </div>
61            </section>
62        </article>
63    </main>
64</body>
65</html>

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

В CSS некоторые свойства автоматически наследуются от родительских элементов дочерним элементам. Это полезный механизм, так как заданное свойство автоматически применяется к дочерним элементам, что исключает необходимость повторной настройки стиля. Однако не все свойства наследуются: некоторые свойства наследуются, а другие нет. Например, свойства color и font-family наследуются, но свойства модели блока, такие как margin и padding, не наследуются.

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

Наследуемые свойства в основном связаны с текстом и шрифтами.

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

  1. color: Цвет текста
1body {
2    color: black;
3}
  • В этом случае все дочерние элементы внутри body будут иметь черный цвет текста.
  1. font-family: Семейство шрифтов
1body {
2    font-family: "Times New Roman", cursive;
3}
  • Все дочерние элементы будут использовать шрифт Arial.
  1. font-size: Размер текста
1body {
2    font-size: 16px;
3}
  • Весь текст внутри body по умолчанию будет иметь размер 16px.
  1. line-height: Межстрочный интервал
1p {
2    line-height: 1.5;
3}
  • Текст внутри элемента <p> будет отображаться с межстрочным интервалом в 1,5 раза больше, что также затронет дочерние элементы.
  1. text-align: Выравнивание текста
1div {
2    text-align: center;
3}
  • Текст и встроенные элементы внутри элемента div отображаются по центру.
  1. visibility: Видимость элемента
1div {
2    visibility: hidden;
3}
  • visibility — это свойство, управляющее видимостью элемента. При значении hidden элемент становится невидимым.
  • В этом случае дочерние элементы внутри div также будут скрыты.
  1. list-style: Стиль списка (маркеры для <ul> и <ol>)
1ul {
2    list-style: square;
3}
  • В этом случае элементы списка внутри тега <ul> будут отображаться с квадратными маркерами.

Пример:

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

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

Общие ненаследуемые свойства

  1. margin, padding: Внешние и внутренние отступы элемента
1div {
2    margin: 10px;
3    padding: 20px;
4}
  • Даже если заданы внешние или внутренние отступы для элемента div, это не повлияет на его дочерние элементы.
  1. border: Граница элемента
1div {
2    border: 1px solid black;
3}
  • Даже если граница установлена для родительского элемента, это не повлияет на дочерние элементы.
  1. width, height: Ширина и высота элемента
1div {
2    width: 100px;
3    height: 50px;
4}
  • Ширина и высота родительского элемента не влияют автоматически на дочерние элементы.
  1. background: Стиль фона
1body {
2    background-color: lightblue;
3}
  • Цвет фона, заданный для элемента body, напрямую не влияет на дочерние элементы. Однако если у дочернего элемента установлен прозрачный фон, то может быть виден цвет фона родительского элемента.

Пример:

Управление наследованием

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

  • Если вы хотите включить наследование: Вы можете явно принудить наследование, используя ключевое слово inherit.
1div {
2    color: inherit;  /* Inherit the color from its parent element */
3}
  • Если вы не хотите наследования: Вы можете сбросить свойство к его начальному значению, используя ключевые слова initial или unset.
1p {
2    color: initial;  /* Reset the color to its initial/default value */
3}

Пример:

Свойство all

Свойство all — это свойство, которое может сбросить почти все свойства CSS, включая наследуемые, для определенного элемента сразу. В частности, вы можете использовать следующие три ключевых слова, чтобы задать свойства элемента:.

  • initial: Сбрасывает все свойства к их начальному значению.
  • inherit: Наследует все свойства от родительского элемента.
  • unset: Наследует свойство, если оно может быть унаследовано, в противном случае сбрасывает его к начальному значению.

all очень полезен, когда вам нужно массово сбросить или задать несколько свойств, а не только определенные свойства по отдельности.

Пример сброса к начальному значению 

1.all-initial {
2    all: initial;
3    background-color: lightskyblue;
4}

  • Когда вы хотите сбросить все ранее заданные стили для конкретного элемента и вернуть его в изначальное состояние, используйте all: initial таким образом:.

  • В этом примере все свойства элемента <div> с классом .all-initial сбрасываются к значениям по умолчанию, заданным браузером.

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

 1.parent-inherit {
 2    color: blue;
 3    font-size: 20px;
 4    border: 1px solid blue;
 5}
 6
 7.all-inherit {
 8    all: inherit;
 9    background-color: lightskyblue;
10}
  • Использование all: inherit заставляет все свойства наследоваться от родительского элемента.
  • В этом примере элементы с классом .all-inherit наследуют все свойства, такие как color и font-size, от родительского элемента.

Пример определения начального значения или наследования в зависимости от условий 

 1.parent-unset {
 2    color: blue;
 3}
 4
 5.all-unset {
 6    font-weight: bold;
 7}
 8
 9.all-unset {
10    all: unset;
11}
  • Использование all: unset приводит к тому, что свойства наследуются, если это возможно; в противном случае они сбрасываются к их начальному значению.
  • В этом случае color наследуется, а font-weight сбрасывается до своего начального значения, обычно normal.

Соотношение со специфичностью (приоритетом) 

1.all-with-important {
2    color: red !important;
3    background-color: lightskyblue;
4}
5
6.all-with-important {
7    all: initial;
8}

  • Свойство all является мощным механизмом сброса, но оно зависит от специфичности CSS. Если конкретный элемент имеет сильные стильные спецификации, свойство all может не переопределить их. Например, свойства, заданные с помощью !important, не могут быть изменены.

  • В этом примере, даже если вы попытаетесь сбросить стиль с помощью all: initial, свойство color не будет сброшено из-за спецификации color: red !important.

Блочные элементы и встроенные элементы

Блочные элементы

  • Пример: <div>, <p>, <h1> 〜 <h6>, <ul>, <li>, <section>
  • Характеристики:
    • Они всегда начинаются с новой строки и занимают всю ширину родительского элемента.
    • Ширина (width) и высота (height) могут быть установлены свободно.
    • Отступы (margin) и внутренние отступы (padding) могут быть заданы во всех направлениях и будут воздействовать на все стороны.
1div {
2    width: 80%;  /* Set the width to 80% of its parent element's width */
3    padding: 20px;  /* Add a padding of 20 pixels on all sides */
4    margin: 10px 0; /* Add a margin of 10 pixels top and bottom, 0 pixels left and right */
5}

Встроенные элементы

  • Пример: <span>, <a>, <strong>, <em>, <img>, <label>
  • Характеристики:
    • Они отображаются рядом с другими встроенными элементами в одной строке.
    • Ширина (width) и высота (height) не могут быть заданы напрямую (если не применяется display: block).
    • Задание вертикальных отступов (margin) или внутренних отступов (padding) имеет ограниченный эффект (горизонтальные отступы и внутренние отступы эффективны).
1a {
2    padding: 5px;  /* Padding for inline elements */
3    margin-right: 10px;  /* Set margin to the right */
4    color: blue;
5}

Различия между блочными элементами и встроенными элементами

  • Настройки ширины и высоты:

    • Элементы блочного уровня: ширину и высоту можно задать.
    • Элементы строчного уровня: ширину и высоту обычно задать невозможно.

  • Отступы (Margin и Padding):

    • Элементы блочного уровня: отступы применяются со всех сторон.
    • Элементы строчного уровня: отступы сверху и снизу неэффективны или имеют ограниченный эффект.

  • Метод компоновки:

    • Элементы блочного уровня: автоматически размещаются на новой строке.
    • Элементы строчного уровня: выравниваются в одной строке с другими строчными элементами.

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

Обработка блочных и строчных элементов в CSS 

1span {
2    display: block;  /* Display the span element as a block-level element */
3    width: 100px;
4    height: 50px;
5}

Однако, установив свойство display в значение block или inline-block, вы можете изменять стили таких элементов, как ширина и высота, для строчных элементов, как если бы они были блочными.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

Основы CSSДетали селекторов атрибутов в CSS