CSS / 3. Структура и каскад

Зная, что каждый действительный (valid) документ генерирует структурное дерево, вы можете создавать селекторы, которые определяют целевой элемент через предков, атрибуты, сестринские элементы и т. д. Структурное дерево – это то, благодар селекторы выполняют свои функции; кроме того, это центральное понятие не менее важного аспекта CSS – наследования (inheritance). Наследование – это механизм, с помощью которого некоторые значения свойств передаются от элемента к его потомкам. Определяя, какие значения должны быть применены к элементу, агент пользователя должен учитывать не только наследование, но и специфичность объявлений, а также их происхождение. Этот процесс анализа и скрывается за термином каскад (cascade). В данной главе мы изучим взаимосвязи между этими тремя механизмами: спецификой, наследованием и каскадом. Хотя все эти понятия могут казаться совершенно абстрактными, не останавливайтесь! Ваша настойчивость будет вознаграждена.
Статьи раздела '3. Структура и каскад':
Важность
Иногда важность объявления настолько велика, что перевешивает все остальные факторы. CSS2.1 называет их (по вполне понятным причинам) важными объявлениями (important declarations) и предоставляет вам возможность отмечать их путем ...
Каскад
До сих пор в данной главе мы обходили один весьма важный вопрос: что происходит, когда к одному элементу применяются два правила с равной специфичностью? Как броузер разрешает этот конфликт? Например, имеются следующие правила: ...
Наследование
Для понимания механизма применения объявлений к документу не менее важное значение, чем специфичность, имеет еще одно ключевое понятие – наследование. Наследование – это механизм, с помощью которого стили применяются не только к у...
Объявления и специфичность
Как только специфичность селектора вычислена, ее значение передается всем ассоциированным с селектором объявлениям. Рассмотрим следующее правило: h1 {color: silver; background: black;} Чтобы определить специфичность, агент п...
Сортировка по порядку расположения
И наконец, согласно четвертому правилу, если два правила имеют совершенно одинаковые приоритетность, источник и специфичность, тогда побеждает то из них, которое расположено в таблице стилей позже. Вернемся к нашему предыдущему пр...
Сортировка по приоритетности и источнику
Согласно второму правилу, если к элементу применяются два правила и одно из них отмечено как !important, то оно побеждает: p {color: gray !important;} Well, hello there! Несмотря на то что цвет задан в атрибуте style абзаца...
Сортировка по специфичности
Согласно третьему правилу, если к элементу применяются конфликтующие объявления и все они имеют одинаковую приоритетность, они должны сортироваться в соответствии со специфичностью. Побеждает объявление, обладающее наибольшей спец...
Специфичность
Существует множество способов выбора необходимых элементов. Фактически один и тот же элемент может быть выбран двумя и более правилами, каждое из которых имеет собственный селектор. Рассмотрим следующие три пары правил. Предположи...
Специфичность подставляемых в строку стилей
Все рассмотренные до сих пор значения специфичности начинались с нуля, и вы, наверное, хотите знать, зачем он вообще там нужен. Дело в том, что этот первый нуль зарезервирован для встроенных объявлений стилей, специфичность которы...
Специфичность селекторов идентификаторов и атрибутов
Важно отметить разницу в специфичности селектора идентификатора (ID selector) и селектора атрибутов (attribute selector), в котором указан атрибут id. Возвращаясь к третьей паре правил в примере кода, мы находим: html > body ta...
Специфичность универсального селектора
Как упоминалось ранее, универсальный селектор не принимает участия в вычислении специфичности селектора. Иначе говоря, он имеет специфичность 0,0,0,0, а это не то же самое, что совсем не иметь специфичности (этот вопрос будет обсу...

Страницы: 1