CSS урок 2. Наследование

Не знаю, удивитесь вы или нет, но теги в 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 всеми дочерними и потомственными элементами, что и происходит после обновления веб-страницы:

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

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

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

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

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

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

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

body {

font: 14px Verdana;

color: yellow;

border: 1px solid black;

}

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

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

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

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

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

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

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