Последнее обновление: 21.04.2016

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

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

Однако поскольку и элемент p, и элемент h2 находятся в элементе body, то они наследуют от этого контейнера - элемента body многие стили. И чтобы не дублировать определение стиля, мы могли бы написать так:

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

Текст про наследование стилей в CSS 3

В итоге определение стилей стало проще, а результат остался тем же.

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

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

При нескольких уровнях вложенности элементы наследуют стили только ближайшего контейнера:

Copyright MyCorp.com

Здесь веб-страница имеет следующую структуру:

Для элемента div переопределяется цвет текста. И так как элемент h2 и один из параграфов находятся в элементе div, то они наследуют стиль именно элемента div. Второй параграф находится непосредственно в элементе body и поэтому наследует стиль элемента body.

Однако не ко всем свойствам CSS применяется наследование стилей. Например, свойства, которые представляют отступы (margin, padding) и границы (border) элементов, не наследуются.

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

В этой главе:

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

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

Например, все элементы, расположенные внутри элемента , являются его дочерними элементами и потомками. Если в стиле для задать с помощью 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; }

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; }