После ознакомления с основными принципами строения структуры страницы и ее CSS, а также после освоения понятия селектора следует поговорить о наследовании.

Причем стоит отметить, что понятие наследования следует рассматривать в комплексе с двумя другими понятиями: специфичность и каскад.

Итак, начнем с наследования. Данный термин означает процесс, который руководит присвоением стилей для блоков, и, в том числе, для потомков этих же элементов.

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

HTML

<div class="element">В какой цвет перекрасится этот элемент?</div>

CSS

div {
   color: # fff600; /* желтый */
}
.element {
   color: # ff0000; /* красный */
}
body {
   color: # 1200ff; /* синий */
}

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

Говоря конкретнее, в первом правиле мы обращаемся к элементу посредством селектора типа, а во втором посредством селектора, который обращается к классу. Более того третий стиль с вероятностью 99,9% тоже должен применятся к нашему элементу, так как данный div должен находится внутри тега body.

И теперь возникает справедливый вопрос — в какой именно цвет окрасится текст. И тут к нам на помощь приходит понятие каскад. Точнее правила каскадирования, посредством которых определяется важность правила. Стоит заметить, что именно это понятие каскада и сформировало название CSS — таблица каскадных стилей.

Выбор наиболее приоритетного правила осуществляется с помощью назначения числового значения. Эта величина и является сущностью понятия специфичности.

В комплексе понимание принципов работы каскада и специфичности и позволяет лучше понять принцип наследования стилей в CSS.