Что такое наследование

В этой статье рассматривается очень важный принцип CSS — наследование. Предположим что мы применили стили к элементу div. Все элементы которые будут находиться внутри элемента div получат те же самые стили, которые применены к нему:

HTML CSS Вывод

<div>

    <h4>Наследование.</h4>

    <p>Если элементы находятся внутри родительского элемента, то они наследуют его стили.</p>

</div>

div {

color: green;

font-size: 20px;

}

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

Если элементы находятся внутри родительского элемента, то они наследуют его стили.

Как видим из примера выше элементы h4 и p являются детьми элемента div. Элемент div является родителем. Стили применились ко всем элементам находящимся внутри div. Цвет текста стал зелёным, заголовок h4 и абзац p имеют одинаковый размер шрифта равный 20 пикселам.

Добавим в уже имеющуюся разметку ещё пару элементов и применим терминологию к этим элементам:

Здесь в элементе абзаца p добавляются элементы em и strong, у них родителем является элемент p, а элемент div для них является предком. Для элемента div все элементы, находящиеся внутри него, являются потомками. По отношению друг к другу элементы em и strong будут называться элементами одного уровня, так как находятся внутри одного родителя, элемента p.

Важно отметить что не все свойства наследуются. Например такое свойство как border (граница) не наследуется и это грамотно, потому что если бы оно наследовалось то рамка была бы не только вокруг родительского элемента div, но и вокруг всех элементов, которые находятся внутри.

Приведём пример свойства border:

HTML CSS Вывод

<div>

    <h4>Наследование.</h4>

    <p>Если элементы находятся внутри родительского элемента, то они наследуют его стили.</p>

</div>

div {

border: 1px solid red;

}

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

Если элементы находятся внутри родительского элемента, то они наследуют его стили.

В этом примере толщина рамки равна 1 пикселу, она красного цвета и у неё сплошное начертание.

Также нужно понимать что если к родительскому элементу применяются стили для шрифта, то они не будут активны для таких элементов как изображения — img.

Поделиться