Какое свойство используется для наследования стилей родителя

Обновлено: 04.07.2024

Один мой хороший друг и коллега Юра Поздняков ( ypozdnyakov ) подсказал решение для проблемы, опубликованной в статье Проблема наследования CSS стилей. Как оказалось, я не до конца понимал суть работы CSS-селекторов, и Юра открыл мне глаза. Оказывается, что всякий селектор, который выбирает некоторый элемент, не выбирает его дочерние элементы. Мне так всегда казалось, потому что когда я просматривал некий элемент в файрбаге, то в списке CSS-правил элемента фигурировали и селекторы родительских компонентов. На самом деле, стиль родительского компонента будет применен к дочернему лишь в том случае, если его значение в дочернем компоненте равно inherit. Вы скажете: "Ха! Так это ж очевидно!" Я понимаю, что это очевидно, но пока ты это сам не прочувствуешь, пока сам с этим не столкнешься, это будет лежать в твоей голове бессмысленным грузом.

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

Вот пример, который полностью перевернул мое представление о CSS:

Как вы думаете, каким шрифтом будет выведена ссылка? Если исходить из понятия "Какой из селекторов круче?", то шрифт будет Comic Sans MS. Очевидно, первый селектор круче второго, потому что в нем целых два класса против одного. Но на самом деле правильный ответ - Arial! Почему? Потому что первый селектор выбирает только лишь компонент

Как же так? А почему же тогда, если удалить второе CSS-правило, то шрифт будет Comic Sans MS, ведь этот селектор не выбирает дочерний компонент?

Все дело в том, что по умолчанию в любом браузере шрифт всех ссылок установлен в значение inherit. Последний приведенный CSS-файл эквивалентен следующему:

Так как ссылка наследует шрифт родителя, то мы и получаем шрифт Comic Sans MS. Честно, когда я это впервые понял, мой мозг просто взорвался =)

Решение

Решение проблемы наследования CSS-стилей, по нашему с Юрой мнению, заключается во внедрении стандарта построения DOM и CSS-файлов. Ниже перечислены правила, описывающие данный стандарт:

1. Не использовать !important

По той же самой причине, по которой нельзя использовать !important, нельзя использовать и селекторы по идентификаторам. Ибо они всегда круче. У них сильно высокий приоритет. Кроме того, вы не можете дать разным компонентам один и тот же идентификатор, поэтому подобные селекторы не дают возможности использовать CSS в полной мере. Лучше прикрутить к компонентам какие-то классы, и заменить все селекторы по идентификаторам селекторами по классам.

3. Правильно именовать классы

Для каждого компонента ввести уникальный класс x, и классы всех дочерних элементов определять как x-y. Пример:

Это гарантирует, что все классы имеют уникальные имена.

4. CSS-файл приложения должен для всех тегов переопределить стили, использующие по умолчанию значение inherit

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

5. Все остальные селекторы строятся только из классов и псевдоклассов

Можно, при желании, добавлять еще класс самого компонента. В итоге, получим примерно следующее:

Это гарантирует, что стили будут применяться ровно к тем компонентам, о которых мы говорим. Тем самым решается проблема приоретизации.

Важно! Не допускайте селекторов вида:

Это испортит вам всю жизнь. Данный стиль будет прикручиваться ко всем дочерним ссылкам и перебивать их своим высоким приоритетом. Используйте такие селекторы лишь в том случае, если совершенно уверены, что внутри .application-main-panel не может быть вложенных компонентов произвольного вида.

6. (опционально) Для компонентов определить стили по умолчанию

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

Заключение

Я надеюсь, что эта статья поможет вам решить многие проблемы, возникающие при верстке веб-страниц, избавит вас от необходимости добавлять !important где попало и сделает программирование еще проще и интереснее.

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

Заметка: активирована адаптивная версия сайта, которая автоматически подстраивается под небольшой размер Вашего браузера и скрывает некоторые детали сайта для удобства чтения. Приятного просмотра!

Рад снова всех вас приветствовать на страницах блога Site on! В прошлой статье мы кратко поговорили об основах CSS и разобрали несколько простых примеров. Сегодня наша тема – это такая важная вещь, как наследование в CSS. Наследованием в CSS называется передача свойств от элемента родителя к дочерним элементам. Или если вам будет понятней: передача CSS свойств от верхнего тега к вложенным в него. Причём наследуется ли свойство или не наследуется зависит от самого свойства, а не от тегов, к которым оно применено. Как это работает? Да очень просто, вернёмся к нашему макету, с помощью которого мы научились создавать нашу первую веб-страницу:

Если мы запишем в CSS:

То надпись всё равно останется зелёной, так как свойство color наследуется, а значит, передалось от тега body к вложенному в него тегу div и дальше (если бы было куда). И сразу вам задачка: какого цвета будет наша надпись, если мы имеем следующий код

Для справки - тег, который просто обозначает какой-либо участок текста. Если в CSS для него ничего не задано, то он ничего и не делает.

Правильный ответ: красным . Так как тег div перебил наследование от body (но только для тегов, вложенных внутрь div).

Какой приоритет имеет наследование в CSS ?

Да ровным счётом никакого. Приоритет наследования в CSS даже не равняется нулю, его просто нет. О чём нам это говорит? Да о том, что любое свойство, заданное вложенному тегу напрямую, будет исполняться вместо того свойства, которое он бы унаследовал (но мы не дали этому случится, так как указали это же самое свойство, но с другим значением).

Об этом ярко свидетельствует предыдущий пример, где тег div не дал тегу span унаследовать зелёный цвет текста от тега body, а всё потому, что мы для тега div явно объявили красный цвет, а значит, приоритет у красного цвета наивысший…

А может быть и нет? Давайте рассмотрим пример ниже, где для одного и того же тега будет явно, но различным образом, указано одно и тоже свойство. Итак, смотрим наш CSS:

И там и там явно указан цвет именно для параграфов, но в одном из случаев, только для параграфов внутри блока, посмотрим же результат:

Подытожим: наследование в CSS имеет наименьший из возможных приоритетов, однако стоит помнить, что не все свойства наследуются. Свойства, у которых имеется уточнение обстоятельств (при наведении мыши; если один тег вложен в другой, и тд.) имеют приоритет над свойствами, указанными для всех остальных случаев.

Ещё один важный момент: если после значения CSS свойства поставить пробел и написать !important, то это свойство всегда и везде будет иметь наивысший приоритет. Пример записи:

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

И напоследок вот что вы должны иметь ввиду, если у вас что-то не получается - если написать так:

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

1) Свойства, указанные для класса (class) или уникального идентификатора (id), имеют высший приоритет, причём приоритет у id, выше чем у class. Всё об этих селекторах и о понятии селектора в целом вы узнаете в следующей статье.

Ещё раз напомню вам о том, что лучший учитель по HTML и CSS – это практика + справочник, который я, между прочим, рекомендовал в статье об основах XHTML (HTML). Также рекомендую подписаться на обновления моего блога, так как после общеобразовательных и вступительных статей я обязательно напишу о некоторых тонкостях и, если можно так выразиться, секретах правильной вёрстки сайта.

В предыдущих уроках кратко упоминали, что при знакомстве с таблицей стилей CSS, правилами, свойствами и селекторами стоит уяснить для себя правила наследования стилей. Мы знаем, что весь HTML- документ условно можно представить в виде иерархии, где одни элементы содержат в себе другие. Между элементами существуют различные связи. Они могут быть соседними, а могу иметь свзять родитель-дочерний элемент. У каждого элемента только один непосредственный родитель, это тот, который содержит его явно. Родителя нет только у корневого элемента, в Html-файлах это тег .

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

Какие css-свойства (стили) наследуются

font-size, font-family, font-style, font-weight, color, text-align, text-transform, text-indent, line-height, letter-spacing, word-spacing, white-space, direction и т. д.

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

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

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

Каскадирование CSS, каскадные таблицы стилей

Мы уже знаем о расшифровке аббревиатуры CSS, с таблицей стилей все в принципе понятно, а что же такое каскадная? Каскадирование - один из базовых механизмов при работе с css-правилами. Для одного и того же элемента может быть задано множество пересекающихся стилей. Стили могут задаваться через атрибут style, через селектор тега, класса, идентификатора, могут наследоваться от родителя и т.д. Вопрос в том, какие же стили применяться к элементу в конечном итоге, давайте разбираться.

На выбор стилей для элемента влияют несколько факторов. Приоритет, специфичность, порядок кода. Специфичность простым языком можно описать так, чем конкретнее (точнее) задан селектор, тем он специфичнее. Т.е. чем меньше выбираем элементов для данного правила, тем специфичность больше.

Теперь на примерах:

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

Перекрестное наследование стилей

Далее расскажем про еще один популярный и удобный прием в задании css-свойсв. У большинства сайтов есть похожие друг на друга элементы, которые отличаются лишь незначительно. Одним из таких популярных html-элементов являются кнопки. Как правило, они имеют одинаковые отступы, размеры, закругления, тени, цвет текста и т.д. Здесь и удобно применять перекрестное наследование стилей

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

Видеоверсия:
[iframe align="center" mode="normal" autoplay="no" maxwidth="1280"]

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

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

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

Наследование от абзаца

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

По просьбам читателей сегодня я попытаюсь раскрыть такую важную тему в CSS, как приоритет и наследование. А так же вы узнаете о незаменимом помощнике в контексте сегодняшней темы, как для верстальщика, так и для front-end разработчика – веб-инспекторе.

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

Что нужно знать о наследовании в CSS при верстке сайтов? Рассмотрим это на примере фрагмента макета.

Верстальщик должен стремится не плодить лишний код, ведь для этого и существует принцип наследования. Верстка любой страницы начинается с тега body. Это значит, что мы прописываем цвет фона страницы и все атрибуты основного шрифта заранее в тег body (предок). То есть, все теги (p, div), что находятся внутри body, являются его потомками, они так же унаследуют белый фон и заданный шрифт, если мы не перебьем их другими свойствами.

Если для тега h1 зададим другие значения цвета и шрифта, в таком случае тег h1 уже не потомок body.

Здесь надо уточнить, что по наследству передаются главным образом цвет фона и все шрифтовые атрибуты. Нельзя унаследовать атрибуты ссылок, размеры отступов, полей, блоков.

О приоритетах в CSS

Приоритетность таблиц стилей в порядке возрастания для верстальщика:

таблицы стилей самого браузера
внешний css файл, подключаемый к странице через
таблицы стилей написанные на самой странице между тегами
таблицы стилей внутри атрибута style=". "
самый высокий приоритет у стилей с пометкой на конце important!

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

В каких случаях надо писать стили внутри страницы? Если, эта страница уникальна по дизайну, отличается от остальных.

Сущий ад начинается, если сайт работает например на Wordpress-е. Там столько всего намешано: несколько CSS внешних файлов (wp темы, bootstrap-а, плагинов woocommerce, jetpack, виджетов, шорткодов) и это не считая styles внутри страниц. Как же в такой каше разобраться?

Волшебный веб-инспектор

Открываете искомую страницу в браузере Google Chrome --> Дополнительный инструменты --> Инструменты разработчика

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

Давайте разбираться пошагово:

В нашем примере, это style.css темы WordPress-а. Это подтвердилось, тем, что мы щёлкнув по черному квадратику рядом с атрибутом color, выбрали другой цвет. Цвет изменился, значит файл стилей выбран верно.

Вся правая часть вкладки Styles описывает только тег h1.

inherit from - история наследования
зачеркнутые строчки – переопределенные стили
injected stylesheet – внутренние стили внутри тега
user agent stylesheet – дефолтные стили браузера

В Styles отображаются все изменения, которые происходили с тегом h1. А вкладка Computed показывает – что в итоге осталось, окончательный вариант.

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

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 3 ):

Спасибо за статью - новичкам она будет очень полезна. ID имеет самый высокий приоритет который перебивает весь описанный вами список приоритетов - даже локальные стили. даже если и не перебил - указываем вложенность элементов, покуда стиль не будет перебит. так же упустили что один и тот же блок может иметь до 20 классов. в этом случае - самый высокий приоритет у класса который присвоен последним. important! - работает только в том случае, если перебиваем слили аналогичными полностью по вложенности и по названиям классов. Во всех остальных случаях он игнорится, потому что мах приоритет имеют вложенные стили с мах приоритетами (последний класс блока) либо ID если имеется. От себя добавлю - для тестов создайте 3 блок вложенных друг в друга, каждому блоку назначить свой фоновый цвет и перебивать фоновый цвет по схеме: 1. вложенность - все возможные комбинации с использованием всех блоков даже html 2. назначить локальные стили и перебивать внешним CSS файлом 3. все описанное выше + important! 4. дядя гугль не знает ответа,какие стили имеют самые высокие приоритеты 5. создайте несколько CSS файлов и перебивайте стили - оба файла должны перебивать одни и те же стили - научитесь перебивать стили первым подключенным файлом CSS, который имеет ниже приоритет нежели файл подключенный самым последним. У Вас наверное вопрос, зачем такой головняк, я отвечу, поработайте с онлайн библиотекой moodle - где все css файлы 20+ CSS файлов преобразуются PHP в 1 файл, от веселуха то будет, если не разбираетесь в приоритетах стилей и как их перебивать)))).

вы так всех новичков здесь напугаете, после прочтения вашего коммента, у них сложится впечатление, что авторы статей щадят их нервы, скрывая страшную правду о коварном CSS, который мучает даже могучего дядьку Гугла. Это была шутка :)). А если серьезно, то человек слишком практичен, чтобы ломать голову, над тем, что ему сейчас не нужно. По мере углубления в процесс обучения, возникнут и другие вопросы, ответы на которые, найдутся в сообществах.

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

Читайте также: