Другое

Каскадность CSS: определяем приоритет стиля, когда нужен тег important

Lorem ipsum dolor

В CSS приоритет стиля задается разработчиком. Вся прелесть в том, что одному и тому же элементу можно задать несколько разных стилей. А применяться будет тот, у которого выше приоритет.

CSS — это Cascading Style Sheets, переводится как «каскадные таблицы стилей». «Каскадность» CSS-таблиц является очень важным их свойством. Каскадность в этом контексте — возможность подключать к одному и тому же HTML-элементу разные стилевые правила и разные стилевые документы. При этом браузер показывает стили согласно правилам приоритетности. Сегодня мы обсудим, что такое приоритет стиля в  CSS.

Приоритет стиля  CSS

Представьте, что вы создаете «чистый» HTML-код, не прописав ни одного  CSS-свойства элементам. В этом случае, браузер все равно отразит HTML-элементы в каком-то примитивном стиле, потому что внутри браузера уже заложены «базовые» стили для HTML. Таким образом мы имеем браузерные  примитивные CSS-стили, которые «автоматически» добавляются к HTML-компонентам. Браузерные стили имеют самый низкий приоритет.

Более высокий приоритет имеют  CSS-стили, которые прописаны разработчиком. Однако при определении стилей, обязательно нужно учитывать, что один вид стилей всегда будет перекрывать другой вид стилей. Чтобы не сталкиваться с ситуацией, что ваши стили не работают, а вы не знаете почему, тогда нужно понимать как распределяется приоритет между разными стилевыми правилами  CSS.

Приоритет CSS-стилей по способу их размещения

Даже начинающие веб-разработчики знают, что разместить  CSS-стили в собственном проекте можно тремя способами:

  1. Создать таблицу стилей отдельным документом и подключить ее в собственном проекте. Отдельный файл стилей может быть таким: «style.css». Чтобы его подключить нужно в разделе «head» вашего HTML-документа прописать такую строчку: «<link rel="stylesheet" href="style.css">».

  2. Создать внутреннюю таблицу прямо внутри HTML-документа. Она создается в разделе «head» вашего HTML-проекта между тегами <style> и </style>. Такой подход удобен, если вы создаете небольшой проект.

  3. Описать стиль у каждого элемента, применив атрибут «style». Например так: <p style="стили CSS"> </p>.

Самое интересное, что все три способа разместить стили в проекте могут быть использованы одновременно.  В этом случае самый высокий приоритет будет у стилей, прописанных в атрибутах элементов, а самый низкий приоритет будет у стилей, описанных в отдельном документе. Таким образом, если у элемента задан какой-то стиль в атрибутах, значит менять его нужно только там. Если вы попытаетесь изменить стили этого элемента во внутренней или внешней таблице, такие изменения не вступят в силу и не будут иметь значения.

Приоритет  CSS-стиля в зависимости от выбранного селектора

Селектор — это способ задать стиль определенному HTML-элементу.  В  CSS есть три вида основных селекторов:

  1. Селектор тега. Это когда в CSS-свойствах вы задаете стили не какому-то конкретному элементу, а всем элементам документа, которые определяются определенным тегом. Например: всем элементам «h1», «p», «ul», «td» и др.

  2. Селектор класса. В этом случае разработчик задает один класс нескольким элементам. А потом в CSS-свойствах прописывает стили этого класса. В этом случае стили будут применяться ко всем элементам, которым задан этот класс. Такой подход позволять задавать свойства сразу нескольким HTML-элементам. При этом список элементов класса разработчик задает самостоятельно. 

  3. Селектор идентификатора (ID). Одни идентификатор принадлежит одному элементу. Нельзя задавать один и тот же идентификатор нескольким элементам. В этом случае нужно применить класс элементов. Таким образом, идентификатор — это способ задать CSS-свойства одному определенному HTML-элементу. 

Приоритет  CSS-стиля между селекторами будет следующим:

  • самый высокий CSS-приоритет у идентификатора;

  • самый низкий  CSS-приоритет у селектора тега.

Таким образом, если к одному и тому же элементу применить стили тега, класса и идентификатора, тогда будут применяться только стили идентификатора. Важно отметить, что если к элементу применить стили в атрибуте «style», тогда они «перебьют» даже стили идентификатора, так как у них намного больше приоритет.

Приоритет стилей в зависимости от селекторов работает, если вы определяете отдельную таблицу стилей. Причем неважно, будет таблица внешней или внутренней.

Также важно отметить, что если случается так, что вы используете два селектора с одинаковым приоритетом для одного HTML-компонента, тогда применяются стили того селектора, который располагается ниже в коде в  CSS-таблицы. Такая ситуация может сложиться, если вы одному и тому же HTML-элементу задали два разных класса.

Термин «!important» в таблице стилей

Случаи бывают разные. Например, вам срочно нужно задать определенный стиль какому-то HTML-элементу. Вы не можете найти место, где ему определяются стили, потому что к проекту подключено много внешних и внутренних таблиц стилей. Разбираться в их иерархии нет времени. В этом случае, вам может помочь термин «!important».

Что делает этот термин? Он «ломает» каскадность и приоритет всех стилей CSS, потому что определяет тот стиль, рядом с которым он прописан. Селектор или «уровень таблицы» ему неважен. Термин «!important» «перебивает» даже те стили, которые прописаны в атрибутах HTML-элемента, хотя они по приоритету являются самыми высокими.

Применять термин «!important» нужно очень осторожно. Потому что он ломает иерархию стилей, а значит может вызвать их конфликт. Веб-разработчики рекомендуют его применять в исключительных случаях, когда по-другому не получается задать стили элементу страницы. 

Заключение

Сегодня мы разобрали, как распределяется приоритет стилей в  CSS. Мы рассмотрели всю каскадность стилей в зависимости от способа объявления стилей и от иерархии селекторов. Чтобы быстро «вознести до небес» любой стиль, можно применить термин «!important». Однако применять его нужно осторожно, так как если его часто и много использовать, ваши стили в конце концов «сломаются» и будут работать неправильно.

Схожие статьи

Идеи для создания приложений: как придумать что-то интересное
Другое

Идеи для создания приложений: как придумать что-то интересное

Бинарный файл: определение, правила и особенности работы
Другое

Бинарный файл: определение, правила и особенности работы

Архитектура мобильного приложения Android: подробное руководство
Другое

Архитектура мобильного приложения Android: подробное руководство

Что такое игровой движок CryEngine от компании Crytek и для чего они используются
Другое

Что такое игровой движок CryEngine от компании Crytek и для чего они используются