Important css что это

Как и когда использовать правило !important в CSS

Когда вы смотрите Каскадную таблицу стилей (CSS) веб-страницы, первое, что вы заметите в коде, это !important. Это ключевое слово влияет на приоритетную обработку внутри таблицы стилей.

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

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

Давайте представим, что таблица стилей содержит следующие стили:

p < color: green; > p < color: black; >

Несмотря на то, что к первому параграфу применен зеленый цвет, текст параграфа будет отображен в черном цвете. Причиной этому является то, что значение «black» применяется вторым. Так как CSS читается сверху вниз, завершением является «black».

В продолжении расскажем, как правило !important меняет приоритетность.

Как применить правило !important в CSS?

CSS правило !important дает больше значимости, чем любое другое свойство. В CSS !important означает, что “это важно” (this is important), все последующие правила игнорируются и применяется правило !important . Это правило должно быть указано в конце строки, сразу после точки с запятой.

p < color: green !important; >

Для баланса декларация !important (символ-разделитель «!» и ключевое слово «important» находятся после декларации) имеет преимущество над обычной декларацией. Авторские и пользовательские таблицы стилей могут содержать декларации !important , но пользовательские правила !important переопределяют авторские правила !important . Эта CSS функция улучшает доступность документов, давая пользователям c особыми требованиями (большой шрифт, цветовые комбинации и др.) контроль над отображением.

Объявление, чтобы сокращенное свойство (например, color) было !important, эквивалентно объявлению, чтобы все подсвойства были !important . В результате, !important используется для переопределения стилей, которые раньше были представлены в другом стилевом источнике.

Давайте рассмотрим пример:

Пример

html> html> head> title>Заголовок документа title> style> body < background-color: #1c87c9 !important; background-color: #ffcc00; > h2 < color: #8ebf42 ; > h2 < color: #eeeeee !important; > style> head> body> h2>W3docs h2> p>W3docs дает возможность бесплатно изучить материалы таких языков программирования, как HTML, CSS, Java Script, PHP и др. p> body> html>

В данном примере фон имеет синий цвет вместо желтого, а заголовок имеет серый цвет вместо зеленого. Причиной является то, что применено правило !important .

Когда использовать правило !important

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

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

Используйте !important для проверки или в некоторых случаях для переопределения встроенного стиля, который является частью оформления или шаблонов фреймворка. Даже в таких случаях рекомендуется использовать эту технику редко.

Где использовать правило !important ?

Использование правила !important может быть нормальным в следующих случаях:

• Переопределение стилей в пользовательском таблице стилей

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

• Переопределение исходного кода и встроенных стилей.

Как разработчик вы должны стремиться иметь как можно больше контроля над вашим кодом. но бывают случаи. когда нет другого выбора кроме как работать с тем. что имеете. Используйте !important редко.

Наверное лучшим способом является использование utility-классов. Рассмотрим кнопки. Если на вашей веб-странице есть название класса подобно .button и неважно, какой элемент вы поместите, вам необходимо, чтобы этот элемент имел вид кнопки (с конкретным шрифтом, круглыми углами, особым фоном и границами), можете попробовать следующее:

Пример

html> html> head> title>Заголовок документа title> style> .button < background: #1c87c9; color: white; font-weight: bold; padding: 5px; border-radius: 4px; border: 1px solid #666; text-decoration: none; > style> head> body> a href="#" class="button">BUTTON a> body> html>

Здесь спецификой является 0,0,1,0. Если есть и другие селекторы с высокой спецификой, которые влияют на элемент, у вас могут быть проблемы в таком виде:

Пример

html> html> head> title>Заголовок документа title> style> #mybutton a < border-bottom: 3px dashed #8ebf42; > .button < background: #1c87c9; color: white; font-weight: bold; padding: 5px; border-radius: 4px; border: 3px solid #666; text-decoration: none; > style> head> body> section id="mybutton"> p>This is a a href="#" class="button">BUTTON a> p> section> body> html>

Как видите, кнопки с особым дизайном имеют нижнюю пунктирную границу в зеленом цвете, но мы ожидали другое. Довольно просто и иногда полностью подходяще установить CSS селектор со значением выше 0,0,1,0.

Будет более эффективно добавление правила !important к значениям. Рассмотрим пример, где к кнопкам применено правило !important .

Пример

html> html> head> title>Заголовок документа title> style> #mybutton a < border-bottom: 3px dashed #8ebf42; > .button < background: #1c87c9 !important; color: white !important; font-weight: bold !important; padding: 5px !important; border-radius: 4px !important; border: 3px solid #666 !important; text-decoration: none !important; > style> head> body> section id="mybutton"> p>This is a a href="#" class="button">BUTTON a> p> section> body> html>

Пользовательские таблицы стилей

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

Если кто-то определяет таблицу стилей для просмотра веб-страниц, то эта таблица будет переопределена таблицей стилей автора страницы. Если пользователь указывает стиль подобно !important, этот стиль переопределяет таблицу стилей автора веб-страницы, даже если автор выбирает такое правило, как !important .

Эта структура полезна для тех пользователей, кто каким-нибудь образом должен установить стили. Например на всех используемых ими веб-страницах слабовидящему читателю понадобится увеличить размер шрифта по умолчанию. С помощью использования директивы !important при разработке страниц, вы обеспечиваете индивидуальные требования ваших пользователей.

Не рекомендуется использовать правило !important слишком часто, так как единственное, что может переопределить !important — это другое правило !important. Один раз используя его, у вас получится CSS файл, полный правилами !important , и это не очень хорошо.

Что такое important в CSS3?

В CSS !important применяется для явного указания приоритета. К примеру, если указать его для какого-либо свойства, то его применение будет в приоритете, что означает что именно оно будут использовано.

body < background-color: red!important; >body

В этом примере цвет фона будет установлен как red, так как там установлен приоритет.

Комментарии

Пока комментариев нет

Профессия Java разработчик
Старт: 20 ноября 2023

!important

Опасный приём для повышения важности стилей. Ломает специфичность и каскад.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

Обновлено 9 февраля 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

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

Пример

Скопировать ссылку «Пример» Скопировано

 .text  color: green !important;> .text  color: red;> .text  color: green !important; > .text  color: red; >    Скопировать Скопировано Не удалось скопировать   

По логике каскада текст в блоке с классом text должен быть красного цвета, потому что это правило стоит ниже в коде. Но из-за модификатора !important цвет текста будет зелёным.

 #main-title  color: purple;> .title  color: blue !important;> #main-title  color: purple; > .title  color: blue !important; >    Скопировать Скопировано Не удалось скопировать   

В этом примере селектор #main — title более специфичный, чем .title . Но цвет текста будет голубым из-за !important .

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Модификатор !important можно написать после любого значения, чтобы прибить это значение гвоздями. Важно написать его через пробел после значения и до точки с запятой.

Как понять

Скопировать ссылку «Как понять» Скопировано

Модификатор !important — последний аргумент в споре стилей. С ним нужно обращаться очень аккуратно. Перед тем как использовать его в своём коде, убедитесь, что иначе никак.

Вот часто встречающийся сценарий:

1. Хм, почему мои великолепные стили не применяются?
2. Использую-ка !important .
3. Теперь всё отлично!

Но делать так не стоит. Лучше потратить время и разобраться в исходной причине.

Использовав !important , вы подставите подножку себе или следующему разработчику, пришедшему на проект — перебить его будет катастрофически сложно.

Зачем он нужен?

Скопировать ссылку «Зачем он нужен?» Скопировано

Раз инструмент существует, значит, для его появления были причины. Иногда !important действительно оказывался полезным.

Атрибут style

Скопировать ссылку «Атрибут style» Скопировано

Бывают случаи, когда вам приходится иметь дело с элементами HTML-документа, у которых стили заданы при помощи атрибута style :

   Заголовок  h1 class="header" style="color: red"> Заголовок h1>    Скопировать Скопировано Не удалось скопировать   

Вы не сможете перебить свойство color у элемента даже усилением веса селектора:

 h1.header  color: green;> h1.header  color: green; >    Скопировать Скопировано Не удалось скопировать   

В результате, цвет текста останется красным. Вот тут модификатор !important сможет вам помочь переопределить стили:

 .header  color: green !important;> .header  color: green !important; >    Скопировать Скопировано Не удалось скопировать   

В результате, цвет изменится на зелёный.

Легаси

Скопировать ссылку «Легаси» Скопировано

Если вы работаете с проектом, в котором большая и старая кодовая база, то бывает опасно править существующие стили — кто знает, что может посыпаться. В таких ситуациях новые стили дописывают, чтобы переопределить старые, а если не хватает специфичности — добавляют !important .

Браузерные расширения

Скопировать ссылку «Браузерные расширения» Скопировано

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

Как перебить правило с !important

Скопировать ссылку «Как перебить правило с !important» Скопировано

Специфичный селектор

Скопировать ссылку «Специфичный селектор» Скопировано

Используйте более специфичный селектор в сочетании с !important :

 h2 span  font-size: 50px !important;> #main-title span  font-size: 20px !important;> .title span  font-size: 10px !important;> h2 span  font-size: 50px !important; > #main-title span  font-size: 20px !important; > .title span  font-size: 10px !important; >    Скопировать Скопировано Не удалось скопировать   

Хотя во всех трёх CSS-правилах используется !important , размер шрифта будет 20 пикселей, потому что селектор #main — title span «весит» больше остальных.

Каскад

Скопировать ссылку «Каскад» Скопировано

Напишите ниже в коде точно такое же правило вместе с !important , но с другим значением свойства.

 h2 span  font-size: 50px !important;> h2 span  font-size: 10px !important;> h2 span  font-size: 50px !important; > h2 span  font-size: 10px !important; >    Скопировать Скопировано Не удалось скопировать   

В этой борьбе выиграет правило, стоящее ниже — из-за каскадной натуры стилей. Размер текста будет 10 пикселей.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Если вам пришлось использовать !important в коде, то это сигнал о серьёзных проблемах. Потратьте время и найдите первопричину. Приложите усилия, чтобы не использовать этот модификатор.

!important¶

Модификатор !important играет роль в том случае, когда пользователи подключают свою собственную таблицу стилей, также применяется для повышения специфичности стилевого правила. Если возникает противоречие, когда стиль автора страницы и пользователя для одного и того же элемента не совпадает, то !important позволяет повысить приоритет стиля.

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

• !important добавлен в авторский стиль — будет применяться стиль автора.
• !important добавлен в пользовательский стиль — будет применяться стиль пользователя.
• !important нет как в авторском стиле, так и стиле пользователя — будет применяться стиль автора.
• !important содержится в авторском стиле и стиле пользователя — будет применяться стиль пользователя.

Синтаксис¶

Свойство: !important 

Спецификации¶

• CSS Level 3
• CSS Level 2 (Revision 1)
• CSS Level 2

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

 html> head> meta charset="utf-8" /> title>importanttitle> style> p  background: url(/example/image/tune1.png) no-repeat !important; min-height: 112px; /* Минимальная высота */ padding-left: 65px; /* Поле слева от текста */ > p  background: url(/example/image/tune2.png) no-repeat; > style> head> body> p> Минорная пентатоника с пониженной V ступенью также называется блюзовой пентатоникой. p> body> html> 

В данном примере для одного селектора задается одно и то же свойство с разными значениями. Но поскольку к первому селектору добавляется !important , то его стиль и будет применяться на странице.

Примечание¶

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