CSS каскадирование, специфичность, наследование: что это и как правильно использовать?

Любой профессионал своего дела должен владеть терминологией. Если Вы занимаетесь версткой, можете ли без раздумий ответить на вопрос в заголовке статьи?
Возможно сейчас вы откроете для себя что-то новое. Давайте сделаем решительный шаг на пути к профессионализму:)
Наследование
Начнем с самой простой для понимания концепции CSS. Суть ее состоит в том, что стили, присвоенные некоторому элементу, наследуются всеми потомками (вложенными элементами), если они не переопределены явно. Например, размер шрифта и его цвет достаточно применить к дескриптору body чтобы все элементы внутри имели те же свойства. Но, для заголовков h1-h6 размер шрифта не будет присвоен, потому что у браузера для них есть своя таблица стилей по умолчанию, а наследованные стили имеют самый низкий приоритет. Аналогичная ситуация с цветом ссылок.
Таким образом, наследование позволяет сократить таблицу CSS. Но в то же время если стилей много, то отследить какой родительский элемент установил некоторое свойство, становится довольно сложно.
Каскадирование
Правила каскадирования позволяют разрешать ситуации, когда для одного элемента прописано несколько стилей. Каскадирование основано на присвоении некоторого приоритета каждому правилу. Авторские таблицы стилей имеют самый большой приоритет, меньший — пользовательские, самый низкий — таблицы стилей по умолчанию браузера. У пользователя есть возможность переопределить авторское правило путем добавления флага !important к своему.
Правила каскадирования определяют следующие приоритеты:
пользовательские стили, отмеченные !important
авторские стили, отмеченные !important
авторские стили
пользовательские стили
стили по умолчанию
После каскадирования правила упорядочиваются на основе специфичности селекторов.
Специфичность
Специфичность — это некоторое число в системе с неопределенно высоким основанием, которое является отражением приоритета какого-либо правила. Вычисляется оно на основе специфичности каждого из селекторов, входящих в правило CSS.
Специфичность селектора разбивается на 4 группы — a b c d:
если стиль встроенный, т.е. определен как style="", то а=1
значение b равно количеству селекторов идентификаторов
значение c равно количеству классов, псевдоклассов и селекторов атрибутов
значение d равно количеству селекторов типов
Неопределенно высокое основание системы счисления является следствием того, что неизвестно заранее, насколько большими будут числа a, b, c, d. Если они меньше 10, то удобно использовать десятичную СС.
Некоторые особенности:
если два правила имеют одинаковую специфичность, то приоритетным становится правило, определенное последним
наследованные стили имеют нулевую специфичность
На сегодня все. Комментируем, добавляем, исправляем:)
При подготовке статьи использовалась книга Энди Бадд: «Мастерская CSS: профессиональное применение web-стандартов».
Алексей Валеев

Комментарии

Комментариев нет.