Приоритеты стилей в CSS
При использовании CSS довольно часто можно наблюдать такую ситуацию, когда указанные стили почему-то не работают, хотя все написано без ошибок. Например, не изменяется размер шрифта, цвет ссылки или какие-то другие параметры HTML-элемента. В таком случае можно говорить только об одном — где-то в таблице стилей уже существует селектор (возможно и не один) воздействующий на данный элемент и содержащий то же самое свойство CSS, которое у вас не хочет действовать. Этот селектор был создан вами ранее и возможно вы о нем забыли или не забыли, а просто не учли правила приоритетов стилей.
Именно о приоритетах стилей мы и поговорим в этом уроке, из которого вы узнаете о целом ряде правил, которые используют браузеры при обработке вашего CSS. Сначала мы по отдельности рассмотрим с вами каждый фактор влияющий на итоговый результат, а затем объединим все это в общую картину.
Важно! Ребята, еще раз повторяю — вычисление приоритетов производится браузерами только в тех ситуациях, когда на один и тот же HTML-элемент воздействует несколько свойств CSS из вашей таблицы стилей, пытаясь у него изменить один и тот же параметр , например цвет рамки или текста. Те свойства, которые для данного элемента не дублируются, просто применяются к нему и все.
Приоритеты стилей в зависимости от типа селектора
Да, селекторы CSS также влияют на стилевые приоритеты, причем в расчет берутся не только простые селекторы (классы, селекторы тегов, атрибуты и т.д.), но и составные (дочерние, соседние, селекторы потомков и т.д.).
Чтобы вычислить уровень приоритета (специфичности) какого-либо селектора браузеры используют определенный алгоритм, где каждому типу начисляется определенное количество баллов, определяющее вес селектора. Стили того селектора, который наберет больший вес, в конечном итоге и будут применены к элементу. Если же получится так, что какие-то селекторы, которые воздействуют на один и тот же HTML-элемент наберут одинаковое число баллов, то будут использованы стилевые свойства того, который находится в коде ниже.
А теперь давайте рассмотрим, каким же образом браузеры считают эти баллы.
- Универсальный селектор — количество начисляемых баллов равно нулю (0).
- Селекторы тегов и псевдоэлементы — по одному (1) баллу за каждый.
- Селекторы атрибутов, классы и псевдоклассы — по десять (10) баллов за каждый.
- Идентификаторы — по сто (100) баллов за каждый идентификатор находящийся в селекторе.
- Атрибут style — встроенные стили не используют селекторов, а указываются непосредственно внутри тегов элементов, но при этом они имеют самый высокий приоритет исчисляемый тысячей (1000) баллов.
Чтобы вы лучше поняли, как вычисляются эти виртуальные баллы, вот вам несколько простых примеров.
* < >/* 0 баллов */ em < >/* 1 балл */ p::first-letter < >/* 2 балла (один селектор тегов и один псевдоэлемент) */ p [title="Приветствие"] < >/* 11 баллов (по одному селектору тегов и атрибутов) */ div.fine .one < >/* 21 балл (два класса и один селектор тегов) */ #header a:hover < >/* 111 баллов (идентификатор, селектор тегов и псевдокласс) */ Как видите все довольно просто. Только вы не пугайтесь заранее, думая, что вам придется постоянно высчитывать эти баллы при создании своих таблиц стилей. На самом деле их никто никогда просто так не считает. Обычно про селекторный приоритет вспоминают только тогда, когда какие-то стили не хотят работать. Вот тут-то и начинаются «танцы с бубном» и поиски виновного. 🙂
Пример демонстрирующий приоритеты селекторов
Обычный параграф. В этом примере цвет текста примечания черный, как и цвет остальных параграфов, хотя для него и указан зеленый, а используемое свойство находится ниже в коде. Но при этом стили рамки и внутренние отступы к примечанию были добавлены. Почему это произошло, я думаю, понятно. Выходом в данной ситуации будет перед классом note дополнительно поставить идентификатор #content, который увеличит вес селектора или применить правило !important , о котором читайте далее.
Правило !important
Правило !important используется в тех случаях, когда необходимо, чтобы конкретное свойство было обязательно применено к элементу вне зависимости от того, в каком селекторе и в каком месте CSS-кода оно находится, а также, невзирая на имеющиеся дубли. Общий синтаксис:
Пример использования правила !important
Текст первого параграфа данного примера зеленый, так как берется значение свойства color, которое указано ниже. А вот текст второго параграфа красный, так как был использован !important .
Но это еще не все о правиле !important . Если вы помните, то из урока о подключении CSS вы узнали, что пользователи также могут использовать CSS для изменения внешнего вида сайта. И естественно, если и в пользовательских и в авторских таблицах стилей присутствуют селекторы, которые пытаются изменить одно и то же свойство одного и того же HTML-элемента (например, цвет текста), то браузеру надо сделать выбор в пользу какого-то одного варианта. В этом случае они руководствуются следующим алгоритмом.
- Самый низкий приоритет имеют стили установленные в браузере по умолчанию, как например вертикальные поля у параграфов.
- Более высокий приоритет получают обычные стили подключаемые пользователями.
- Еще более высокий — авторские стили, то есть ваши.
- Еще более высокий достается также авторским стилям, но у которых указан !important .
- И наконец самый высокий приоритет получают стили пользователей с правилом !important . Это сделано для того, чтобы пользователи с ограниченными возможностями в любом случае могли изменить внешний вид страниц сайта под свои нужды.
Обратите внимание, что свойства с !important имеют даже более высокий приоритет, чем встроенные с помощью атрибута style .
Приоритеты подключаемых и импортируемых стилей
Так как же и в каком порядке браузер создает эту общую таблицу стилей из отдельных файлов-кусочков? Ну, тут все довольно предсказуемо, предполагаю, что многие из вас уже давно догадались. Так вот, браузер считывает подключаемые стили по мере их появления в коде, то есть он сначала берет CSS из самого первого файла, затем ниже добавляет стили второго, еще ниже — третьего и так далее. Таким образом создается одна общая каскадная таблица стилей, в которой действуют такие же правила приоритетов, как и в обычной таблице состоящей из одного файла.
Давайте-ка я вам все-таки быстренько покажу это схематично на примере импортируемых стилей, так сказать, для закрепления материала.
Содержимое файла style1.css
@import url("style/style2.css"); @import url("style/style3.css"); Ниже здесь идут стили самого файла style1.css
Итоговая таблица созданная браузером
Первыми идут стили из style2.css Затем стили из style3.css И в конце стили из style1.css
Итоговая таблица стилей с учетом приоритетов и что такое Каскад
Для получения итоговой таблицы стилей браузеры используют несколько этапов отбора, при котором учитывают приоритетные правила рассмотренные нами выше.
- Выбираются все стили подключенные к текущей странице с учетом типа устройства, на котором происходит просмотр.
- Происходит сортировка свойств с учетом имеющихся правил !important и источников CSS (браузерные, авторские и пользовательские таблицы).
- Делается еще одна сортировка, но уже по весу селекторов.
- Последняя сортировка, где вычисляются те свойства, которые, находясь в селекторах с одинаковым весом и влияя на один и тот же элемент, имеют дубли. Из них выбираются те, которые располагаются ниже в CSS-коде.
- Происходит отсеивание всех менее приоритетных дубликатов свойств и применение CSS к HTML-странице.
Ну а почему же все-таки «каскадные таблицы стилей»? Под каскадом в данном случае как раз и понимается то, что описано чуть выше. То есть возможность для браузера получения CSS из трех разных источников с учетом правил сортировки и приоритетов стилей. Все.
Не глядя в результат задания, определите, какого цвета будет текст внутри каждого элемента. Не сломайте мозг. 🙂 Вот код:
#content p < color: black; >#par em < color: red; >#content .par em < color: blue; >.par .em < color: yellow; >.par b < color: orange; >em.em текст в EM1 текст в B
Параграф3
Как повысить приоритет стилей в css, если к странице подключены два файла css
CSS является одним из основных инструментов веб-дизайнера. Он позволяет осуществлять контроль над оформлением элементов на веб-странице. Однако, нередко возникает ситуация, когда на веб-странице используются два файла CSS, и задача состоит в том, чтобы повысить приоритет стилей, прописанных в одном из файлов.
В данной статье мы рассмотрим несколько способов, которые помогут вам повысить приоритет стилей в CSS, если к странице подключены два файла CSS.
1. Использование !important
Один из наиболее простых способов повысить приоритет стилей — это использование ключевого слова !important. Оно позволяет придать стилю максимальную важность. Если вы хотите, чтобы стиль из одного из файлов CSS имел больший приоритет, чем другой стиль, просто добавьте !important к его правилу. Например:
В этом примере мы присваиваем всем элементам p красный цвет текста, который имеет максимальный приоритет благодаря использованию !important.
2. Использование вложенности селекторов
Еще один способ повысить приоритет стиля — это использование вложенности селекторов. Это значит, что вы можете присваивать стиль элементу, который содержится в другом элементе. Например:
В этом примере мы задаем красный цвет текста для элементов p, которые содержатся в элементах с классом container. Это правило имеет больший приоритет, чем простой селектор для элементов p:
3. Использование атрибутов
Еще один способ повысить приоритет стилей — это использование атрибутов. Вы можете присваивать определенный стиль для элементов, которые содержат определенный атрибут. Например:
В этом примере мы задаем белый цвет текста и синий фон для элементов a с классом button, имеющих атрибут href со значением #.
4. Использование идентификаторов
Еще один способ повысить приоритет стилей — это использование идентификаторов. Идентификаторы — это уникальные имена, которые присваиваются элементам на веб-странице. Вы можете присваивать стили элементам, которые содержат определенный идентификатор. Например:
В этом примере мы задаем серый фон для элементов с идентификатором header.
5. Использование псевдоэлементов
И последний способ повысить приоритет стилей — это использование псевдоэлементов. Псевдоэлементы — это специальные части элементов на веб-странице, которые можно оформлять отдельно от основной части элемента. Например:
В этом примере мы добавляем стрелочку перед текстом, который содержится в элементе span, который является частью элемента p.
В заключение, мы рассмотрели несколько способов повысить приоритет стилей в CSS, если к странице подключены два файла CSS. Каждый из них имеет свои преимущества и может быть использован в зависимости от специфики проекта. Более того, вы можете комбинировать эти способы, чтобы достичь наилучшего эффекта.
Похожие записи: