Приоритеты стилей в CSS
При использовании CSS довольно часто можно наблюдать такую ситуацию, когда указанные стили почему-то не работают, хотя все написано без ошибок. Например, не изменяется размер шрифта, цвет ссылки или какие-то другие параметры HTML-элемента. В таком случае можно говорить только об одном — где-то в таблице стилей уже существует селектор (возможно и не один) воздействующий на данный элемент и содержащий то же самое свойство CSS, которое у вас не хочет действовать. Этот селектор был создан вами ранее и возможно вы о нем забыли или не забыли, а просто не учли правила приоритетов стилей.
Именно о приоритетах стилей мы и поговорим в этом уроке, из которого вы узнаете о целом ряде правил, которые используют браузеры при обработке вашего CSS. Сначала мы по отдельности рассмотрим с вами каждый фактор влияющий на итоговый результат, а затем объединим все это в общую картину.
Важно! Ребята, еще раз повторяю — вычисление приоритетов производится браузерами только в тех ситуациях, когда на один и тот же HTML-элемент воздействует несколько свойств CSS из вашей таблицы стилей, пытаясь у него изменить один и тот же параметр, например цвет рамки или текста. Те свойства, которые для данного элемента не дублируются, просто применяются к нему и все.
Приоритеты стилей в зависимости от типа селектора
Да, селекторы CSS также влияют на стилевые приоритеты, причем в расчет берутся не только простые селекторы (классы, селекторы тегов, атрибуты и т.д.), но и составные (дочерние, соседние, селекторы потомков и т.д.).
Чтобы вычислить уровень приоритета (специфичности) какого-либо селектора браузеры используют определенный алгоритм, где каждому типу начисляется определенное количество баллов, определяющее вес селектора. Стили того селектора, который наберет больший вес, в конечном итоге и будут применены к элементу. Если же получится так, что какие-то селекторы, которые воздействуют на один и тот же HTML-элемент наберут одинаковое число баллов, то будут использованы стилевые свойства того, который находится в коде ниже.
А теперь давайте рассмотрим, каким же образом браузеры считают эти баллы.
Чтобы вы лучше поняли, как вычисляются эти виртуальные баллы, вот вам несколько простых примеров.
* { } /* 0 баллов */
em { } /* 1 балл */
p::first-letter { } /* 2 балла (один селектор тегов и один псевдоэлемент) */
p [title="Приветствие"] { } /* 11 баллов (по одному селектору тегов и атрибутов) */
div.fine .one { } /* 21 балл (два класса и один селектор тегов) */
#header a:hover { } /* 111 баллов (идентификатор, селектор тегов и псевдокласс) */
Как видите все довольно просто. Только вы не пугайтесь заранее, думая, что вам придется постоянно высчитывать эти баллы при создании своих таблиц стилей. На самом деле их никто никогда просто так не считает. Обычно про селекторный приоритет вспоминают только тогда, когда какие-то стили не хотят работать. Вот тут-то и начинаются «танцы с бубном» и поиски виновного. :)
Пример демонстрирующий приоритеты селекторов
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Приоритеты селекторов</title>
<style type="text/css">
#content p {
color: black; /* черный цвет текста параграфов внутри id="content" */
}
.note {
color: green; /* зеленый цвет текста примечания */
border: 5px #c66 double; /* стили рамки примечания */
padding: 5px; /* внутренние отступы */
}
</style>
</head>
<body>
<div id="content">
<p>Обычный параграф.</p>
<p class="note">Примечание.</p>
</div>
</body>
</html>Результат в браузере
Обычный параграф.
Примечание.
В этом примере цвет текста примечания черный, как и цвет остальных параграфов, хотя для него и указан зеленый, а используемое свойство находится ниже в коде. Но при этом стили рамки и внутренние отступы к примечанию были добавлены. Почему это произошло, я думаю, понятно. Выходом в данной ситуации будет перед классом note дополнительно поставить идентификатор #content, который увеличит вес селектора или применить правило !important, о котором читайте далее.
Правило !important
Правило !important используется в тех случаях, когда необходимо, чтобы конкретное свойство было обязательно применено к элементу вне зависимости от того, в каком селекторе и в каком месте CSS-кода оно находится, а также, невзирая на имеющиеся дубли. Общий синтаксис:
Пример использования правила !important
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Правило !important</title>
<style type="text/css">
.one {
color: red; /* красный текст */
}
.one {
color: green; /* зеленый текст */
}
.two {
color: red !important; /* красный текст с приоритетом */
}
.two {
color: green; /* зеленый текст */
}
</style>
</head>
<body>
<p class="one">Первый параграф.</p>
<p class="two">Второй параграф.</p>
</body>
</html>Результат в браузере
Первый параграф.
Второй параграф.
Текст первого параграфа данного примера зеленый, так как берется значение свойства color, которое указано ниже. А вот текст второго параграфа красный, так как был использован !important.
Но это еще не все о правиле !important. Если вы помните, то из урока о подключении CSS вы узнали, что пользователи также могут использовать CSS для изменения внешнего вида сайта. И естественно, если и в пользовательских и в авторских таблицах стилей присутствуют селекторы, которые пытаются изменить одно и то же свойство одного и того же HTML-элемента (например, цвет текста), то браузеру надо сделать выбор в пользу какого-то одного варианта. В этом случае они руководствуются следующим алгоритмом.
Обратите внимание, что свойства с !important имеют даже более высокий приоритет, чем встроенные с помощью атрибута style.
Приоритеты подключаемых и импортируемых стилей
В том же уроке по подключению CSS мы с вами рассматривали правило @import, как один из вариантов этого подключения. Другой вариант — это подключение CSS через тег <LINK>, которым вы пользовались на протяжении всего обучения. Оба этих способа объединяет одно — созданные вами таблицы стилей формируются браузером из отдельных файлов и затем уже применяются к HTML-элементам страницы.
Так как же и в каком порядке браузер создает эту общую таблицу стилей из отдельных файлов-кусочков? Ну, тут все довольно предсказуемо, предполагаю, что многие из вас уже давно догадались. Так вот, браузер считывает подключаемые стили по мере их появления в коде, то есть он сначала берет CSS из самого первого файла, затем ниже добавляет стили второго, еще ниже — третьего и так далее. Таким образом создается одна общая каскадная таблица стилей, в которой действуют такие же правила приоритетов, как и в обычной таблице состоящей из одного файла.
Давайте-ка я вам все-таки быстренько покажу это схематично на примере импортируемых стилей, так сказать, для закрепления материала.
Содержимое файла style1.css
@import url("style/style2.css");
@import url("style/style3.css");
Ниже здесь идут стили самого файла style1.css
Итоговая таблица созданная браузером
Первыми идут стили из style2.css
Затем стили из style3.css
И в конце стили из style1.css
Итоговая таблица стилей с учетом приоритетов и что такое Каскад
Для получения итоговой таблицы стилей браузеры используют несколько этапов отбора, при котором учитывают приоритетные правила рассмотренные нами выше.
Ну а почему же все-таки «каскадные таблицы стилей»? Под каскадом в данном случае как раз и понимается то, что описано чуть выше. То есть возможность для браузера получения CSS из трех разных источников с учетом правил сортировки и приоритетов стилей. Все.
Домашнее задание.
Не глядя в результат задания, определите, какого цвета будет текст внутри каждого элемента. Не сломайте мозг. :) Вот код:
<head>
<style type="text/css">
#content {color: green; }
p { color: black; }
#par em { color: red; }
#content .par em { color: blue; }
.par .em { color: yellow; }
.par b { color: orange; }
em.em { color: gray !important; }
</style>
</head>
<body>
<div id="content">
<p id="par" class="par">Параграф1 <em>текст в EM1</em></p>
<p class="par">Параграф2 <b>текст в B</b></p>
<p>Параграф3 <em class="em">текст в EM2</em></p>
<p class="par">Параграф4 <em class="em">текст в EM3</em></p>
</div>
</body>| Наследование | ← Содержание |