Играет роль в том случае, когда пользователи подключают свою собственную таблицу стилей. Если возникает противоречие, когда стиль автора страницы и пользователя для одного и того же элемента не совпадает, то !important позволяет повысить приоритет стиля.
При использовании пользовательской таблицы стилей или одновременном применении разного стиля автора и пользователя к одному и тому же селектору, браузер руководствуется следующим алгоритмом.
!important добавлен в авторский стиль — будет применяться стиль автора.
!important добавлен в пользовательский стиль — будет применяться стиль пользователя.
!important нет как в авторском стиле, так и стиле пользователя — будет применяться стиль автора.
!important содержится в авторском стиле и стиле пользователя — будет применяться стиль пользователя.
Итог от применения !important в общем случае показан в табл. 1.
Табл. 1. Результат применения !important
Стиль автора
Стиль пользователя
Результат
BODY < /* Серый цвет текста */ color: silver;
/* Размер текста 8 пунктов */ font-size: 8pt >
BODY < /* Черный цвет текста */ color: #000;
/* Размер текста 12 пунктов */ font-size: 12pt >
Lorem ipsum dolor sit amet.
Будет применяться стиль автора, а именно: установлен серый цвет текста, размер шрифта 8 пунктов.
BODY < /* Серый цвет текста */ color: silver;
/* Размер текста 8 пунктов */ font-size: 8pt >
BODY < /* Черный цвет текста, повышенная важность */ color: #000 !important;
/* Размер текста 12 пунктов */ font-size: 12pt >
Lorem ipsum dolor sit amet.
Цвет текста будет установлен пользовательским, а размер шрифта останется исходным. В итоге увидим черный текст размером 8 пунктов.
BODY < /* Серый цвет текста */ color: silver;
/* Размер текста 8 пунктов */ font-size: 8pt >
BODY < /* Черный цвет текста, повышенная важность */ color: #000 !important;
/* Размер текста 12 пунктов, повышенная важность */ font-size: 12pt !important >
Lorem ipsum dolor sit amet.
Будут использоваться все стилевые свойства пользователя. Текст станет отображаться как черный, размер 12 пунктов.
BODY < /* Серый цвет текста, повышенная важность */ color: silver !important;
/* Размер текста 8 пунктов, повышенная важность */ font-size: 8pt !important >
BODY < /* Черный цвет текста, повышенная важность */ color: #000 !important;
/* Размер текста 12 пунктов, повышенная важность */ font-size: 12pt !important >
Lorem ipsum dolor sit amet.
При добавлении !important в ту и другую таблицу приоритет в этом случае имеет стиль пользователя. В результате текст станет черным, а размер его увеличится до 12 пунктов.
В браузере Internet Explorer подключение стиля пользователя делается через меню Сервис > Свойство обозревателя > Оформление , как показано на рис. 1.
Рис. 1. Подключение стиля пользователя в браузере Internet Explorer
В браузере Opera аналогичное действие происходит через команду Инструменты > Общие настройки > Вкладка «Расширенные» > Содержимое > Кнопка «Настроить стили» (рис. 2).
Рис. 2. Подключение стиля пользователя в браузере Opera
Синтаксис
Свойство: значение !important
Значения
У этого свойства нет значений.
HTML5 CSS2.1 IE Cr Op Sa Fx
В данном примере для одного селектора задается одно и то же свойство с разными значениями. Но поскольку к первому селектору добавляется !important , то его стиль и будет применяться на странице.
Браузеры
При добавлении !important к значению стилевого свойства его важность повышается. Если переопределить значение того же свойства без !important , оно будет игнорироваться браузерами. Но только не в Intenet Explorer версии 6 и ниже.
Источник
Как и когда использовать правило !important в CSS
Когда вы смотрите Каскадную таблицу стилей (CSS) веб-страницы, первое, что вы заметите в коде, это !important. Это ключевое слово влияет на приоритетную обработку внутри таблицы стилей.
Каскадная таблица стилей на самом деле является каскадной. Это означает, что стили расположены в особом порядке. Стили обычно применяются в том порядке, в каком читает их браузер. Примените первый стиль, потом второй и т. д.
Поэтому, если нам встречается стиль наверху таблицы стилей, а потом опускается вниз внутри файла, тогда второй сценарий этого стиля это сценарий, примененный в последующих экземплярах, а не в первом. В сущности последний перечисленный используется, если две стили указывают одно и то же (т. е. они имеют одинаковый уровень специфики).
Давайте представим, что таблица стилей содержит следующие стили:
Несмотря на то, что к первому параграфу применен зеленый цвет, текст параграфа будет отображен в черном цвете. Причиной этому является то, что значение «black» применяется вторым. Так как CSS читается сверху вниз, завершением является «black».
В продолжении расскажем, как правило !important меняет приоритетность.
Как применить правило !important в CSS?¶
CSS правило !important дает больше значимости, чем любое другое свойство. В CSS !important означает, что “это важно” (this is important), все последующие правила игнорируются и применяется правило !important . Это правило должно быть указано в конце строки, сразу после точки с запятой.
Для баланса декларация !important (символ-разделитель «!» и ключевое слово «important» находятся после декларации) имеет преимущество над обычной декларацией. Авторские и пользовательские таблицы стилей могут содержать декларации !important , но пользовательские правила !important переопределяют авторские правила !important . Эта CSS функция улучшает доступность документов, давая пользователям c особыми требованиями (большой шрифт, цветовые комбинации и др.) контроль над отображением.
Объявление, чтобы сокращенное свойство (например, color) было !important, эквивалентно объявлению, чтобы все подсвойства были !important . В результате, !important используется для переопределения стилей, которые раньше были представлены в другом стилевом источнике.
Давайте рассмотрим пример:
Пример¶
В данном примере фон имеет синий цвет вместо желтого, а заголовок имеет серый цвет вместо зеленого. Причиной является то, что применено правило !important .
Когда использовать правило !important¶
При тестировании и отладки веб-страницы !important является эффективным. Если вы не уверены, почему применятся стиль, и думаете, что это может быть конфликтом специфики, добавьте !important к вашему стилю. Если таким образом проблема решается, измените порядок селекторов и удалите директивы !important из вашего кода.
В результате у вас будет таблица стилей, загруженная стилями !important , если вы слишком много опирались на !important для достижения желаемых стилей. Вы можете изменить обработку CSS страницы в значительной степени.
Используйте !important для проверки или в некоторых случаях для переопределения встроенного стиля, который является частью оформления или шаблонов фреймворка. Даже в таких случаях рекомендуется использовать эту технику редко.
Где использовать правило !important ?!important ?»>¶
Использование правила !important может быть нормальным в следующих случаях:
Переопределение стилей в пользовательском таблице стилей
Главным образом правило !important было создано, чтобы предоставить пользователю возможность переопределить стили веб-страниц. Оно часто используется программой чтения экрана, средствами блокирования рекламы и т. д.
Переопределение исходного кода и встроенных стилей.
Как разработчик вы должны стремиться иметь как можно больше контроля над вашим кодом. но бывают случаи. когда нет другого выбора кроме как работать с тем. что имеете. Используйте !important редко.
Наверное лучшим способом является использование utility-классов. Рассмотрим кнопки. Если на вашей веб-странице есть название класса подобно .button и неважно, какой элемент вы поместите, вам необходимо, чтобы этот элемент имел вид кнопки (с конкретным шрифтом, круглыми углами, особым фоном и границами), можете попробовать следующее:
Пример¶
Здесь спецификой является 0,0,1,0. Если есть и другие селекторы с высокой спецификой, которые влияют на элемент, у вас могут быть проблемы в таком виде:
Пример¶
Как видите, кнопки с особым дизайном имеют нижнюю пунктирную границу в зеленом цвете, но мы ожидали другое. Довольно просто и иногда полностью подходяще установить CSS селектор со значением выше 0,0,1,0.
Будет более эффективно добавление правила !important к значениям. Рассмотрим пример, где к кнопкам применено правило !important .
Пример¶
Пользовательские таблицы стилей¶
Эта директива была введена, чтобы помочь пользователям веб-страниц справиться с таблицами стилей, которые представляют для них трудность при использовании или чтении страниц.
Если кто-то определяет таблицу стилей для просмотра веб-страниц, то эта таблица будет переопределена таблицей стилей автора страницы. Если пользователь указывает стиль подобно !important, этот стиль переопределяет таблицу стилей автора веб-страницы, даже если автор выбирает такое правило, как !important .
Эта структура полезна для тех пользователей, кто каким-нибудь образом должен установить стили. Например на всех используемых ими веб-страницах слабовидящему читателю понадобится увеличить размер шрифта по умолчанию. С помощью использования директивы !important при разработке страниц, вы обеспечиваете индивидуальные требования ваших пользователей.
Источник
Important — перевод, произношение, транскрипция
прилагательное ↓
Мои примеры
Словосочетания
Примеры
‘What did you say?’ ‘Oh, nothing important.’
— Что вы сказали? — Да ничего важного.
Nothing could be more important to me than my family.
Для меня не может быть ничего важнее семьи.
Cost is obviously important.
Стоимость, конечно, важна.
Diet and exercise are important for health.
Правильное питание и физические упражнения очень важны для здоровья.
Happiness is more important than money.
Счастье — важнее, чем деньги.
It’s vitally important that you understand the danger.
Для вас жизненно важно осознавать всю опасность.
Irrigation is important for farming.
Ирригация важна для сельского хозяйства.
It’s important to exercise regularly.
Важно регулярно заниматься спортом.
The most important thing is to stay calm.
Самое главное — сохранять спокойствие.
It’s important to explain the procedure to the patient.
Важно объяснить эту процедуру пациенту.
It’s important to exercise every day.
Важно заниматься спортом каждый день.
Play is very important to a child’s development.
Игра очень важна для развития ребёнка.
He has some important choices to make.
Он должен принять несколько важных решений.
The two projects are equally important.
Эти два проекта одинаково важны.
They carry guns because it makes them feel important.
Они носят с собой оружие, потому что из-за него они чувствуют себя важными.
It’s important not to jump to conclusions.
Важно не спешить с выводами.
I personally consider it capitally important.
Лично я считаю это крайне важным.
The fishing industry is very important to the area.
Рыбная промышленность очень важна для этой области.
It was always very important to me to be financially independent.
Для меня всегда было очень важно быть финансово независимым.
It was important for the president to continue his schedule, regardless of the bomb threat.
Для президента важно продолжить работать согласно графику, независимо от угрозы взрыва.
He has to make some important choices.
Он должен принять несколько важных решений.
Getting regular exercise is important.
Регулярные физические упражнения очень важны.
Nothing occurred that seemed important.
Вроде бы ничего важного не произошло.
The auction is an important fund-raiser.
Этот аукцион является важным мероприятием по сбору средств.
Christmas «dos» are especially important.
Рождественские представления особенно важны.
Would I jest about something so important?
Стал бы я шутить с такими важными вещами?
I take it to be an important breakthrough that.
Я считаю важным достижением то, что.
Your second point is no less important.
Второй отмеченный вами момент не менее важен.
This is a critically important meeting.
Это критически важное совещание.
Doing her job well is important to her.
Для неё очень важно хорошо выполнять свою работу.
Примеры, ожидающие перевода
A little careful planning is important in gardening.
. too important a diplomatic post to assign to some congenial featherhead.
. just concentrate on the important duties of the job and forget about the chicken stuff.
Для того чтобы добавить вариант перевода, кликните по иконке ☰ , напротив примера.
