Наследование стилей. Наследование и приоритеты CSS стилей

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

В основном это происходит из-за применения основных принципов применения css стилей — наследования и каскадирования.

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

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

Но сначала давайте рассмотрим основные принципы применения css стилей.

1. Принцип наследования css стилей.

Ни для кого не секрет, что структура кода любой интернет страницы имеет иерархическую структуру. То есть одни элементы входят в состав других, а те, в свою очередь — входят в состав третьих и так далее.

Для каждого уровня вложенности можно прописать свои css инструкции. Но если Вам нужно чтобы все одинаковые элементы страницы имели одинаковые стили, то Вам не нужно прописывать эти стили на каждом уровне вложенности.

Дочерние элементы (которые находятся внутри других) наследуют стили от своих предков. И нам нужно прописать стили только на самом верхнем уровне — и они применятся на всех уровнях.

Это очень удобно. Например : нам нужно задать цвет шрифта для всех элементов страницы. Мы прописываем css инструкцию для самого верхнего уровня:

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

Нужно учесть, что элемент будет наследовать только те стили, которые он поддерживает. Так, не смогут наследовать свойства, предназначенные для , например height (высота).

2. Каскадирование css.

Принцип каскадирования стилей css применяется в том случае, если одному и тому же элементу задано несколько css свойств с разными значениями и между ними возникает конфликт.

Что это значит? Для того, чтобы правильно назначить стили какому-либо элементу, мы можем использовать различные комбинации и придать нашему свойству более весомый приоритет, чем тот, который наследуется элементом от родителя или прописан в другой css инструкции.

3. Приоритеты css стилей.

Итак, мы с Вами подошли к самому интересному. Сейчас мы научимся правильно адресовать стили, чтобы они применялись именно там, где нам нужно, а не где попало.

Начнем с самого низа:

1. Самым низким приоритетом обладают стили браузера. Не удивляйтесь — каждый браузер имеет свои стили по умолчанию. Они применяются, если для элемента вообще не заданы никакие стили. Поэтому, если Вы хотите, чтобы Ваш сайт во всех браузерах смотрелся одинаково — нужно обязательно прописывать стили всем элементам.Есть еще один способ на тот случай, если Вы все-таки забыли прописать стили к какому-нибудь элементу. Это сброс css стилей. Смысл заключается в том, чтобы изначально сбросить все стили браузеров. Для этого используются готовые блоки css инструкций, которые нужно просто вставить в начало вашего файла со стилями. Вот Вам один из вариантов такого «сбрасывающего» блока инструкций:

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

   html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font , img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin : 0 ; padding : 0 ; border : 0 ; outline : 0 ; font-weight : inherit ; font-style : inherit ; font-size : 100% ; font-family : inherit ; vertical-align : baseline ; } :focus { outline : 0 ; } body { line-height : 1 ; color : black ; background : white ; } ol, ul { list-style : none ; } table { border-collapse : separate ; border-spacing : 0 ; } caption, th, td { text-align : left ; font-weight : normal ; } blockquote:before , blockquote:after , q:before , q:after { content : "" ; } blockquote, q { quotes : "" "" ; }

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

2. Вторыми по значимости являются стили, которые пользователь выставил в настройках браузера. Они тоже сбрасываются при помощи вышеуказанного списка инструкций.
3. Следующим уровнем приоритета обладают стили, унаследованные элементами от своих предков. Это то, о чем мы говорили в начале статьи.
4. Еще более высокий приоритет имеют стили, прописанные при помощи различных селекторов во внешнем файле с css стилями. Как подключить файл со стилями к Вашей интернет странице, я рассказывал в статье:
5. Следующими по значимости являются стили, прописанные при помощи селекторов непосредственно внутри HTML документа внутри тегов
   И здесь пишем любой интересующий нас текст.

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

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

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

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

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

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

   Div p { Color: green; } p{ color:red; }

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

   Текст внутри блока зелённый

   А просто внутри параграфа - красный

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

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

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

   P{ color:red !important; }

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

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

   P{ color:red; } p{ color:green; }

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

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

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

   На сегодня всё, спасибо за ваше внимание!

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

   Зачастую, если у ребёнка родители чудаки, то он от них не отстает, или как говорится: "яблоко от яблони недалеко падает". Что касается наследования в CSS, то это не что иное, как метод тиражирования различных CSS свойств, относящихся к одному элементу страницы на вложенные в него элементы (потомки).

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

   
   

   Создадим стиль для элемента , который будет изменять цвет и тип шрифта:

   Заголовок второго уровня

   Полный абзац

   В этом примере для элемента мы установили зеленый цвет текста и тип шрифта Arial . CSS свойства color и font-family наследуются, а это означает, что эти свойства будут применяться и на вложенные элементы внутри (на все его потомки).

   Обращаю Ваше внимание на то, что вы всегда можете посмотреть наследуется или нет конкретное свойство в полном справочнике CSS .

   Результат нашего примера:

   В выше рассмотренном примере все элементы, расположенные внутри (его потомки) унаследовали его свойства. Механизм наследования имеет многоуровневую систему и распространяется не только на прямых потомков элемента, но и переносится на все вложенные элементы. В нашем примере к такому элементу относится элемент , который по аналогии с другими элементами унаследовал все свойства стиля, заданного для элемента . В этом заключается основной смысл наследования, который используется в CSS.

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

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

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

   Ограничения и нюансы наследования

   Ограничения:

   • Не наследуются свойства, которые влияют на размещение элементов на странице, свойства отвечающие за внешние и внутренние отступы элемента, свойства отвечающие за границы элементов. Все эти свойства мы подробно рассмотрим далее в учебнике. Повторюсь, что вы всегда можете посмотреть наследуется или нет конкретное свойство на сайте в справочнике CSS .
   • Я хочу, чтобы вы поняли, что многие свойства не наследуются по объективным причинам, представьте, что мы создаем границу для родительского элемента и после этого все потомки по этой логике должны унаследовать это свойство, что выглядело бы абсурдно и напротив увеличивало бы работу по созданию стилей (их отмене, или сбросу).

   Нюансы:

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

   А сейчас на примере элемента , определяющего гиперссылку, мы рассмотрим пример в котором рассмотрим почему некоторые элементы не наследуют некоторые свойства своего предка:

   Абзац, который содержит внутри себя href = "#" > гиперссылку .

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

   Результат нашего примера:

   При возникновении конфликта побеждает сильнейший, в CSS это, как правило, явно определенный стиль. Откроем инструменты разработчика (для Chrome это F12). Обратите внимание какие встроенные в браузер CSS свойства (user agent stylesheet ) имеет любая ссылка (any link ) в документе. Для неё заданы следующие стили: цвет текста синий (-webkit-link - значение браузера по умолчанию), декорирование текста (нижнее подчеркивание) и определено, что браузер устанавливает курсор автоматически (значение auto CSS свойства cursor).

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

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

   Вопросы и задачи по теме

   Перед тем как перейти к следующей статье ответьте на следующие вопросы.

   11 марта 2014 в 18:23

   Инкапсуляция CSS-стилей - Часть 1. Проблема

   • CSS ,
   • HTML

   Главным драйвером роста веба на рубеже тысячелетий было потребление контента. Сайты создавались для предоставления своим посетителям какой-либо полезной информации или развлекательного содержимого. Но в последние годы резко выросло значение веб-ресурсов, предоставляющих пользователям сервисы генерации контента (текстовые и графические редакторы, электронные таблицы, мессенджеры и т.п.). Это вызвало трансформацию сайтов в одностраничные приложения и миграцию в веб сложных интерфейсов, которые ранее были прерогативой прикладных программ.
   
   В процессе этих трансформаций и миграций выяснилось, что рост трудоемкости создания и поддержания веб-интерфейса значительно опережает рост его сложности. Проблему пытались (и пытаются до сих пор) решить путем разбиения на модули, абстрагирования, инкапсуляции. С этой целю было создано большое количество JavaScript-фреймворков (Backbone , Ember , Angular), HTML-шаблонизаторов (Jade , Handlebars), систем управления зависимостями (RequireJS) и т.п.

   Наиболее сложным с этой точки зрения оказался CSS, где по дизайну языка любое свойство, объявленное в любом подключенном CSS-файле или тэге style , может повлиять на отображение любого элемента DOM-дерева.

   Формализация задачи.

   Предположим для простоты, что весь JavaScript-код заключен в модули, которые ничего не знают друг о друге и инкапсулируют в себе все необходимое им для своей работы. Модуль знает как сгенерить свое HTML-представление (назовем его блок ) и куда его вставить в DOM-дереве. При этом блоки могут вкладываться друг в друга. На уровне разметки блок состоит из корневого элемента и дочерних элементов .
   Задача заключается в том, чтобы на отображение элементов любого блока можно было повлиять только намеренным изменением в HTML-представлении и соответствующих CSS-файлах и тэгах style .

   Любое ненамеренное изменение отображения элементов блоков будем называть протечкой стилей .

   Протечки стилей могут возникать как при изменениях в свойствах элементов других блоков (протечки свойств ), так и при изменениях в DOM-дереве (каскадные протечки ).

   Иточники протечек стилей

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

   1. Наследование свойств

   При отсутствии у CSS-свойства какого-либо элемента явно заданного значения используется значение по умолчанию. Если это значение inherit , то значение свойства задается равным значению свойства родительского элемента.
   Таким образом, корневой элемент текущего блока может наследовать стили своего родителя, по определению принадлежащего другому блоку.

   К примеру,
   .outer-block{ color: red; }
   

   Я красный из-за наследования стилей
   
   

   2. Конформизм свойств

   При отсутствии у CSS-свойства какого-либо элемента явно заданного значения используется значение по умолчанию. Если это свойство подстраивается под свойство родительского элемента (к примеру, как свойства width и height со значением по умолчанию auto) или мимикрирует (к примеру, как свойство background-color со значением по умолчанию transparent), то у конечного пользователя будет создаваться впечатление, что стили родительского элемента протекли на стили дочернего элемента.

   К примеру,
   .outer-block{ background: red; }
   

   Я намеренно сделан красным

   Я красный из-за конформизма стилей
   
   

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

   3. Каскадный беспредел

   Применение стилей к целевым элементам селекторов происходит в три этапа.
   На первом этапе из всего DOM-дерева выбираются все элементы, соответствующие селектору целевого элемента. К примеру, для селектора.current-block h3 на первом этапе будут выбраны все элементы с тэгом h3 . Способа ограничить пространство выбора каким-либо участком DOM-дерева не существует.
   На втором этапе выбранные элементы фильтруются на предмет соответствия селектору путем обхода родительских элементов целевого элемента. При использовании комбинатора потомка пробел (descendant combinator) поиск соответствия может идти вплоть до корневого элемента DOM-дерева. При использовании сестринского комбинатора ~ (general sibling combinator) - до самого первого сестринского элемента.

   К примеру,
   .current-block h3 { background: blue; } .outer-block h3 { background: red; }
   

   Я намеренно сделан красным

   Я красный из-за каскадного беспредела

   
   

   Единственным способом ограничить пространство поиска является использование дочернего комбинатора > (child combinator) и ближайшего сестринского комбинатора + (adjacent sibling combinator). Для этого необходимо задавать точный путь в DOM-дереве от целевого элемента к корневому элементу блока, что приводит к увеличению связанности CSS и HTML-кода.

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

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

   4. Позиционная обусловленность

   Элементы блоков могут менять свое отображение в зависимости от позиции блока в DOM-дереве при использовании в селекторах сестринских комбинаторов (+ и ~) или псевдоклассов (:first-child и т.п.).

   К примеру,

   Block { background: red; } .block + .block { background: blue; }