В CSS приоритет стиля задается разработчиком. Вся прелесть в том, что одному и тому же элементу можно задать несколько разных стилей. А применяться будет тот, у которого выше приоритет.
CSS — это Cascading Style Sheets, переводится как «каскадные таблицы стилей». «Каскадность» CSS-таблиц является очень важным их свойством. Каскадность в этом контексте — возможность подключать к одному и тому же HTML-элементу разные стилевые правила и разные стилевые документы. При этом браузер показывает стили согласно правилам приоритетности. Сегодня мы обсудим, что такое приоритет стиля в CSS.
Приоритет стиля CSS
Представьте, что вы создаете «чистый» HTML-код, не прописав ни одного CSS-свойства элементам. В этом случае, браузер все равно отразит HTML-элементы в каком-то примитивном стиле, потому что внутри браузера уже заложены «базовые» стили для HTML. Таким образом мы имеем браузерные примитивные CSS-стили, которые «автоматически» добавляются к HTML-компонентам. Браузерные стили имеют самый низкий приоритет.
Более высокий приоритет имеют CSS-стили, которые прописаны разработчиком. Однако при определении стилей, обязательно нужно учитывать, что один вид стилей всегда будет перекрывать другой вид стилей. Чтобы не сталкиваться с ситуацией, что ваши стили не работают, а вы не знаете почему, тогда нужно понимать как распределяется приоритет между разными стилевыми правилами CSS.
Приоритет CSS-стилей по способу их размещения
Даже начинающие веб-разработчики знают, что разместить CSS-стили в собственном проекте можно тремя способами:
Создать таблицу стилей отдельным документом и подключить ее в собственном проекте. Отдельный файл стилей может быть таким: «style.css». Чтобы его подключить нужно в разделе «head» вашего HTML-документа прописать такую строчку: «<link rel="stylesheet" href="style.css">».
Создать внутреннюю таблицу прямо внутри HTML-документа. Она создается в разделе «head» вашего HTML-проекта между тегами <style> и </style>. Такой подход удобен, если вы создаете небольшой проект.
Описать стиль у каждого элемента, применив атрибут «style». Например так: <p style="стили CSS"> </p>.
Самое интересное, что все три способа разместить стили в проекте могут быть использованы одновременно. В этом случае самый высокий приоритет будет у стилей, прописанных в атрибутах элементов, а самый низкий приоритет будет у стилей, описанных в отдельном документе. Таким образом, если у элемента задан какой-то стиль в атрибутах, значит менять его нужно только там. Если вы попытаетесь изменить стили этого элемента во внутренней или внешней таблице, такие изменения не вступят в силу и не будут иметь значения.
Приоритет CSS-стиля в зависимости от выбранного селектора
Селектор — это способ задать стиль определенному HTML-элементу. В CSS есть три вида основных селекторов:
Селектор тега. Это когда в CSS-свойствах вы задаете стили не какому-то конкретному элементу, а всем элементам документа, которые определяются определенным тегом. Например: всем элементам «h1», «p», «ul», «td» и др.
Селектор класса. В этом случае разработчик задает один класс нескольким элементам. А потом в CSS-свойствах прописывает стили этого класса. В этом случае стили будут применяться ко всем элементам, которым задан этот класс. Такой подход позволять задавать свойства сразу нескольким HTML-элементам. При этом список элементов класса разработчик задает самостоятельно.
Селектор идентификатора (ID). Одни идентификатор принадлежит одному элементу. Нельзя задавать один и тот же идентификатор нескольким элементам. В этом случае нужно применить класс элементов. Таким образом, идентификатор — это способ задать CSS-свойства одному определенному HTML-элементу.
Приоритет CSS-стиля между селекторами будет следующим:
самый высокий CSS-приоритет у идентификатора;
самый низкий CSS-приоритет у селектора тега.
Таким образом, если к одному и тому же элементу применить стили тега, класса и идентификатора, тогда будут применяться только стили идентификатора. Важно отметить, что если к элементу применить стили в атрибуте «style», тогда они «перебьют» даже стили идентификатора, так как у них намного больше приоритет.
Приоритет стилей в зависимости от селекторов работает, если вы определяете отдельную таблицу стилей. Причем неважно, будет таблица внешней или внутренней.
Также важно отметить, что если случается так, что вы используете два селектора с одинаковым приоритетом для одного HTML-компонента, тогда применяются стили того селектора, который располагается ниже в коде в CSS-таблицы. Такая ситуация может сложиться, если вы одному и тому же HTML-элементу задали два разных класса.
Термин «!important» в таблице стилей
Случаи бывают разные. Например, вам срочно нужно задать определенный стиль какому-то HTML-элементу. Вы не можете найти место, где ему определяются стили, потому что к проекту подключено много внешних и внутренних таблиц стилей. Разбираться в их иерархии нет времени. В этом случае, вам может помочь термин «!important».
Что делает этот термин? Он «ломает» каскадность и приоритет всех стилей CSS, потому что определяет тот стиль, рядом с которым он прописан. Селектор или «уровень таблицы» ему неважен. Термин «!important» «перебивает» даже те стили, которые прописаны в атрибутах HTML-элемента, хотя они по приоритету являются самыми высокими.
Применять термин «!important» нужно очень осторожно. Потому что он ломает иерархию стилей, а значит может вызвать их конфликт. Веб-разработчики рекомендуют его применять в исключительных случаях, когда по-другому не получается задать стили элементу страницы.
Заключение
Сегодня мы разобрали, как распределяется приоритет стилей в CSS. Мы рассмотрели всю каскадность стилей в зависимости от способа объявления стилей и от иерархии селекторов. Чтобы быстро «вознести до небес» любой стиль, можно применить термин «!important». Однако применять его нужно осторожно, так как если его часто и много использовать, ваши стили в конце концов «сломаются» и будут работать неправильно.
Другое
