Декларация !important
Декларация !important (от англ. «important» ‒ «важный, значимый») переопределяет приоритет применения параметров стилей. Данная декларация была создана для того, что бы разработчики имели возможность управлять стилями документа или отдельного элемента документа независимо от стилей, прописанными другими авторами.
Примечание
Приоритет может устанавливаться и иметь силу как в рамках одной таблицы стилей (одного файла), так и в рамках разных таблиц подключаемых к одному документу.
В случае использования декларации в сокращённом свойстве (то есть, свойстве одновременно указывающим значения всех подсвойств; например, « border: 1px solid red !important; »), приоритет устанавливаемый « !important » распространяет своё влияние в том числе и на значения подсвойств (« border-width | border-style | border-color »).
Приоритет использования « !important » автором и пользователем (другим разработчиком) приведён в таблице ниже.
| A | A! | |
|---|---|---|
| П | А* | А* |
| П! | П* | А* |
- А — таблица стилей автора;
- А! — таблица стилей автора с применением декларации « !important »;
- П — таблица стилей пользователя;
- П! — таблица стилей пользователя с применением декларации « !important »;
- А* — применяется параметр из таблицы автора;
- П* — применяется параметр из таблицы пользователя.
Что такое important в CSS3?
В CSS !important применяется для явного указания приоритета. К примеру, если указать его для какого-либо свойства, то его применение будет в приоритете, что означает что именно оно будут использовано.
body < background-color: red!important; >body
В этом примере цвет фона будет установлен как red, так как там установлен приоритет.
Комментарии
Пока комментариев нет
Профессия PHP разработчик
Старт: 18 января 2024
!important
Играет роль в том случае, когда пользователи подключают свою собственную таблицу стилей. Если возникает противоречие, когда стиль автора страницы и пользователя для одного и того же элемента не совпадает, то !important позволяет повысить приоритет стиля.
При использовании пользовательской таблицы стилей или одновременном применении разного стиля автора и пользователя к одному и тому же селектору, браузер руководствуется следующим алгоритмом.
- !important добавлен в авторский стиль — будет применяться стиль автора.
- !important добавлен в пользовательский стиль — будет применяться стиль пользователя.
- !important нет как в авторском стиле, так и стиле пользователя — будет применяться стиль автора.
- !important содержится в авторском стиле и стиле пользователя — будет применяться стиль пользователя.
Итог от применения !important в общем случае показан в табл. 1.
Lorem ipsum dolor sit amet.
Будет применяться стиль автора, а именно: установлен серый цвет текста, размер шрифта 8 пунктов.
Lorem ipsum dolor sit amet.
Цвет текста будет установлен пользовательским, а размер шрифта останется исходным. В итоге увидим черный текст размером 8 пунктов.
Lorem ipsum dolor sit amet.
Будут использоваться все стилевые свойства пользователя. Текст станет отображаться как черный, размер 12 пунктов.
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 Минорная пентатоника с пониженной V ступенью также называется блюзовой пентатоникой.
В данном примере для одного селектора задается одно и то же свойство с разными значениями. Но поскольку к первому селектору добавляется !important , то его стиль и будет применяться на странице.
Браузеры
При добавлении !important к значению стилевого свойства его важность повышается. Если переопределить значение того же свойства без !important , оно будет игнорироваться браузерами. Но только не в Intenet Explorer версии 6 и ниже.
Декларация CSS !important
Декларация CSS !important отвечает за приоритет в стилях в случае спорных моментах. Если мы указали эту декларацию, то мы подчеркиваем то, что это свойство является главным.
Синтаксис CSS !important предполагает простое написание этой декларации в конце определяни свойства CSS. Его можно применять к конкретным свойствам CSS. Например
. text-align: center !important; font-size: 14px !important; font-weight: bold !important; .
В целом !important не получил широкого распространения и используется редко.
Когда стоит использовать !important
Если пользователь подключил в своем браузере свою собственную таблицу стилей, то в этом случае может возникнут несколько спорных конфликтов, а какой стиль будет использован.
Рассмотрим все варианты. Сделаем уточнение, что авторский стиль — это стили используемые на сайте.
- Если !important есть в авторском стиле, то будет применяться стиль автора
- Если !important есть в пользовательском стиле, то будет применяться стиль пользователя
- Если !important отсутствует в авторском и пользовательском стиле, то будет применяться стиль автора
- Если !important есть в авторском и пользовательском стиле, то будет применяться стиль пользователя
Примеры с !important
Сначала приведем пример без использования !important
html> head> style> span< color: black; > div.primer1 span< color: blue; > /style> /head> body> div class css">primer1">Черный текст. span>Синий текст/span/div> /body> /html>
На странице преобразуется в следующее
Черный текст. Синий текст
Теперь добавим к общему описанию span декларацию !important. Теперь простое объявление span пересилит свойство div.primer1 span . Поэтому фраза «синий текст» будет иметь черный цвет.
html> head> style> span< color: black !important; > div.primer1 span< color: blue; > /style> /head> body> div class css">primer1">Черный текст. span>Синий текст/span/div> /body> /html>
На странице преобразуется в следующее