В этой главе:

Наследование

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

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

Цвет текста заголовка красный

Цвет текста абзаца тоже красный.

Наследуемые свойства можно переопределить, применив индивидуальное правило для нужного элемента:

Цвет текста заголовка синий

Цвет текста абзаца красный.

Вычисление специфичности (приоритета) селекторов

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

Специфичность селекторов (selector"s specificity) определяет их приоритет в таблице стилей. Чем специфичнее селектор, тем выше его приоритет. Для вычисления специфичности селектора используются три группы чисел (a, b, c), расчёт производится следующим образом:

• Считается число идентификаторов в селекторе (группа a)
• Считается число селекторов классов, атрибутов и псевдо-классов в селекторе (группа b)
• Считается число селекторов типа и псевдо-элементов в селекторе (группа c)
• Селектор внутри псевдо-класса отрицания (:not) считается как любой другой селектор, но сам псевдо-класс отрицания не участвует в вычислении селектора
• Универсальный селектор (*) и комбинаторы не участвуют в вычислении веса селектора

В примере ниже селекторы расположены в порядке увеличения их специфичности:

* /* a=0 b=0 c=0 -> специфичность = 0 */ li /* a=0 b=0 c=1 -> специфичность = 1 */ ul li /* a=0 b=0 c=2 -> специфичность = 2 */ ul ol+li /* a=0 b=0 c=3 -> специфичность = 3 */ h1 + * /* a=0 b=1 c=1 -> специфичность = 11 */ ul ol li.red /* a=0 b=1 c=3 -> специфичность = 13 */ li.red.level /* a=0 b=2 c=1 -> специфичность = 21 */ #x34y /* a=1 b=0 c=0 -> специфичность = 100 */ #s12:not(p) /* a=1 b=0 c=1 -> специфичность = 101 */

Самый высокий приоритет имеет число из группы «a», число группы «b» имеет средний приоритет, число из группы «c» имеет наименьший приоритет. Числа из разных групп не суммируются в одно общее, т.е. возьмём из примера последнюю строку со специфичностью селектора «101» - это не означает число «сто один», это значит, что был использован один селектор из группы «a» (идентификатор) и один селектор из группы «c» (селектор типа).

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

Первый абзац

Второй абзац.

Каскадность

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

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

Цвет текста абзаца зелёный.

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

H1 { color: gray; font-family: sans-serif; } h1 { border-bottom: 1px solid black; }

Код, расположенный в примере выше, равносилен коду в примере ниже, в котором все три свойства указаны в одном правиле:

H1 { color: gray; font-family: sans-serif; border-bottom: 1px solid black; }

Обычно дополнительные правила для элемента указываются в тех случаях, когда был задан один стиль сразу для нескольких элементов, но помимо этого необходимо добавить что-то ещё для определённого элемента:

H1, h2, h3 { /* одинаковый стиль для трёх элементов */ color: gray; font-family: sans-serif; } /* дополнительное правило для заголовков второго уровня */ h2 { border-bottom: 1px solid black; }

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

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

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

Body{ color: green; }

То цвет надписи «И здесь пишем любой интересующий нас текст» как ни странно станет зелёным. А что будет, если мы нашу надпись заключим в блок? То есть вот какой стала интересующая нас часть кода:

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

Для справки - тег, который просто обозначает какой-либо участок текста. Если в 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) пройдите предыдущие уроки:

Теория и практика

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

Пример html кода:

Сейчас посмотрите на дерево, которое из себя представляет html:

Сейчас вы видите что по отношению к чему и как относиться. А сейчас пример CSS кода с наследованием. Допустим для