Не знаю, удивитесь вы или нет, но теги в CSS имеют общее сходство с людьми. Точно так же как дети наследуют некоторые внешние особенности или черты характера своих родителей, подобным образом теги в CSS наследуют свойства своих родительских элементов. Данное явление называется наследованием и является одним из самых важных особенностей работы каскадных таблиц стилей. Для полного понимания этой темы необходимо знание CSS селекторов.

Видеоверсия:
[iframe id="https://www.youtube.com/embed/H_di4K5SJT0?rel=0&vq=hd720" align="center" mode="normal" autoplay="no" maxwidth="1280"]


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

Как было сказано выше, наследование является одним из важнейших явлений в CSS. Например, если мы придадим всем абзацам желтый цвет и шрифт Verdana размером в 14px, эти свойства будут унаследованы тегами вложенными в тег p.

p {
font: 14px Verdana;
color: yellow;
}

В первом абзаце нашей веб-страницы есть два вложенных тега - strong и em. Правило, которое мы прописали для абзацев были приняты этими двумя вложенными тегами.

Наследование вложенных тегов
Наследование от абзаца

Как видно на скриншоте, слова находящиеся внутри вложенных тегов также отображаются шрифтом Verdana размером в 14px, хотя и имеют жирное и курсивное начертание.

Следующим шагом давайте придадим те же CSS свойства для тега body, при этом удалив предыдущее.

body {
font: 14px Verdana;
color: yellow;
}

Дальше, по логике мы можем ожидать наследование свойств тега body всеми дочерними и потомственными элементами, что и происходит после обновления веб-страницы:

Наследование от body
Наследование от тега body

Как мы видим, все вложенные теги приняли свойства своего родителя. Однако, это не совсем справедливо для ссылок, которые отображаются синим цветом, и заголовков, имеющих больший размер нежели 14px. Это произошло по причине того, что у браузера есть свои базовые настройки, касающиеся этих элементов, в соответствии с которыми ссылки должны быть синего цвета, а заголовки больше по размеру чем основной текст. Все другие свойства оба тега всё-таки унаследовали от своего предка.

В одном из следующих уроков мы научимся удалять базовые настройки браузера для болей гибкой работы с оформлением веб-страниц.

Зачем нужно наследование

Наследование свойств родителя здорово облегчает нам работу с каскадными таблицами стилей. Представьте себе, что в случае отстутствия этого явления нам пришлось бы прописывать одно и то же свойство для всех тегов веб-страницы. Это могло бы занять очень много сил и времени, не говоря уже о весе конечного файла.

В общем, для нас очень хорошо, что вложенные теги наследуют свойства своих родителей. Как вариант, при оформлении веб-страницы можно использовать селектор тегов и создавать отдельные правила для header, footer, aside, nav и так далее (новые теги HTML5). В этом случае вложенные теги также унаследуют свойства предков.

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

Возможно, вы уже догадались о том что не все свойства могут наследоваться. Например, возьмем тот же тег border (граница). Давайте пропишем ее для тега body:

body {
font: 14px Verdana;
color: yellow;
border: 1px solid black;
}

Логично предположить, что данное свойство не будет унаследовано вложенными тегами, иначе страница выглядела бы ужасно.

свойство border не наследуется
свойство border не наследуется

Мы были правы в своих предположениях. Граница появляется только у тела документа. То, как выглядела бы веб-страница в случае наследования свойства border:

если бы свойство border наследовалось
Вид страницы если бы свойство border наследовалась

Как видно из иллюстрации выше, не зря это свойство является ненаследуемым. Для того чтобы узнать наследуется какое-либо свойство или нет вы можете перейти по ссылке. Необходимо обращать внимание на колонку inhertited в таблице. Yes - означает наследуется, no - нет.

Также иногда может возникать конфликт свойств, когда для одного и того же тега прописаны разные правила CSS. Как решаются подобного рода конфликты и каким образом распределяются приоритеты мы узнаем в уроке по каскадности.

На этом у меня все. Надеюсь, данный материал оказался для вас полезным. Если это так:

  1. Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу
  2. [popup_trigger id="3874" tag="span"]Подписывайтесь[/popup_trigger] на мою рассылку, чтобы не пропустить полезные и интересные публикации на моем блоге

На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!

2 Comments

  1. Добрый Человек - Ответить

    Исправьте пожалуйста в самом начале
    Видеоверсия:
    iframe id="https://www.youtube.com/embed/H_di4K5SJT0?rel=0&vq=hd720" align="center" mode="normal" autoplay="no" maxwidth="1280"

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вы можете использовать следующие теги HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

шестнадцать + два =

Закрыть