Любой профессионал своего дела должен владеть терминологией. Если Вы занимаетесь версткой, можете ли без раздумий ответить на вопрос в заголовке статьи?
Возможно сейчас вы откроете для себя что-то новое. Давайте сделаем решительный шаг на пути к профессионализму:)
Наследование
Начнем с самой простой для понимания концепции CSS. Суть ее состоит в том, что стили, присвоенные некоторому элементу, наследуются всеми потомками (вложенными элементами), если они не переопределены явно. Например, размер шрифта и его цвет достаточно применить к дескриптору body чтобы все элементы внутри имели те же свойства. Но, для заголовков h1-h6 размер шрифта не будет присвоен, потому что у браузера для них есть своя таблица стилей по умолчанию, а наследованные стили имеют самый низкий приоритет. Аналогичная ситуация с цветом ссылок.
Таким образом, наследование позволяет сократить таблицу CSS. Но в то же время если стилей много, то отследить какой родительский элемент установил некоторое свойство, становится довольно сложно.
Каскадирование
Правила каскадирования позволяют разрешать ситуации, когда для одного элемента прописано несколько стилей. Каскадирование основано на присвоении некоторого приоритета каждому правилу. Авторские таблицы стилей имеют самый большой приоритет, меньший — пользовательские, самый низкий — таблицы стилей по умолчанию браузера. У пользователя есть возможность переопределить авторское правило путем добавления флага !important к своему.
Правила каскадирования определяют следующие приоритеты:
- пользовательские стили, отмеченные !important
- авторские стили, отмеченные !important
- авторские стили
- пользовательские стили
- стили по умолчанию
После каскадирования правила упорядочиваются на основе специфичности селекторов.
Специфичность
Специфичность — это некоторое число в системе с неопределенно высоким основанием, которое является отражением приоритета какого-либо правила. Вычисляется оно на основе специфичности каждого из селекторов, входящих в правило CSS.
Специфичность селектора разбивается на 4 группы — a b c d:
- если стиль встроенный, т.е. определен как style=»», то а=1
- значение b равно количеству селекторов идентификаторов
- значение c равно количеству классов, псевдоклассов и селекторов атрибутов
- значение d равно количеству селекторов типов
Пример вычисления специфичности:
| Селектор | Специфичность | Специфичность в системе с основанием 10 |
|---|---|---|
| style | 1,0,0,0 | 1000 |
| #wrapper #content {} | 0,2,0,0 | 200 |
| #content .datePosted {} | 0,1,1,0 | 110 |
| div#content {} | 0,1,0,1 | 101 |
| #content {} | 0,1,0,0 | 100 |
| p.comment .datePosted {} | 0,0,2,1 | 21 |
| p.comment {} | 0,0,1,1 | 11 |
| div p {} | 0,0,0,2 | 2 |
| p {} | 0,0,0,1 | 1 |
Неопределенно высокое основание системы счисления является следствием того, что неизвестно заранее, насколько большими будут числа a, b, c, d. Если они меньше 10, то удобно использовать десятичную СС.
Некоторые особенности:
- если два правила имеют одинаковую специфичность, то приоритетным становится правило, определенное последним
- наследованные стили имеют нулевую специфичность
На сегодня все. Комментируем, добавляем, исправляем:)
При подготовке статьи использовалась книга Энди Бадд: «Мастерская CSS: профессиональное применение web-стандартов».
Больше статей и материалов по web-разработке в tg-канале - подписывайтесь!
Подписаться в telegram
Спасибо за статью, познавательно! Хочется только уточнить, что имеется ввиду под «Авторские таблицы стилей» или «авторские стили». И что такое «пользовательские стили» и чем эти стили отличаются друг от друга.
Авторские стили — это те, которые написал разработчик веб-ресурса. Пользовательские стили может подключить к браузеру сам пользователь и переопределить вид сайта.
Если два селектора имеют одинаковую специфичность, то применяться будет тот стиль, что указан в коде ниже.