Css important – Декларация !important в CSS | CSS-Tricks по-русски

!important | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0 7.0+ 1.0+ 3.5+ 3.0+ 1.0+ 1.0+ 1.0+

Краткая информация

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

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

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

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

Итог от применения !important в общем случае показан в табл. 1.

Табл. 1. Результат применения !important
Стиль автора Стиль пользователя Результат
BODY {
color: silver;


font-size: 8pt
}

BODY {
color: #000;


font-size: 12pt
}

Lorem ipsum dolor sit amet...

Будет применяться стиль автора, а именно: установлен серый цвет текста, размер шрифта 8 пунктов.

BODY {
color: silver;


font-size: 8pt
}

BODY {
color: #000 !important;


font-size: 12pt
}

Lorem ipsum dolor sit amet...

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

BODY {
color: silver;


font-size: 8pt
}

BODY {
color: #000 !important;


font-size: 12pt !important
}

Lorem ipsum dolor sit amet...

Будут использоваться все стилевые свойства пользователя. Текст станет отображаться как черный, размер 12 пунктов.

BODY {
color: silver !important;
font-size: 8pt !important
}
BODY {
color: #000 !important;


font-size: 12pt !important
}

Lorem ipsum dolor sit amet...

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

В браузере Internet Explorer подключение стиля пользователя делается через меню , как показано на рис. 1.

Рис. 1. Подключение стиля пользователя в браузере Internet Explorer

В браузере Opera аналогичное действие происходит через команду (рис. 2).

Рис. 2. Подключение стиля пользователя в браузере Opera

Синтаксис

Свойство: значение !important

Значения

У этого свойства нет значений.

Пример

HTML5CSS2.1IECrOpSaFx

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

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

Браузеры

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

!important | CSS | WebReference

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

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

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

Итог от применения !important в общем случае показан в табл. 1.

Табл. 1. Результат применения !important
Стиль автораСтиль пользователяРезультат
BODY {
color: silver;


font-size: 8pt
}

BODY {
color: #000;


font-size: 12pt
}

Lorem ipsum dolor sit amet...

Будет применяться стиль автора, а именно: установлен серый цвет текста, размер шрифта 8 пунктов.

BODY {
color: silver;


font-size: 8pt
}

BODY {
color: #000 !important;


font-size: 12pt
}

Lorem ipsum dolor sit amet...

Цвет текста будет установлен пользовательским, а размер шрифта останется исходным. В итоге увидим чёрный текст размером 8 пунктов.

BODY {
color: silver;


font-size: 8pt
}

BODY {
color: #000 !important;


font-size: 12pt !important
}

Lorem ipsum dolor sit amet...

Будут использоваться все стилевые свойства пользователя. Текст станет отображаться как чёрный, размер 12 пунктов.

BODY {
color: silver !important;
font-size: 8pt !important
}
BODY {
color: #000 !important;


font-size: 12pt !important
}

Lorem ipsum dolor sit amet...

При добавлении !important в ту и другую таблицу приоритет в этом случае имеет стиль пользователя. В результате текст станет чёрным, а размер его увеличится до 12 пунктов.

В браузере Internet Explorer подключение стиля пользователя делается через меню , как показано на рис. 1.

Подключение стиля пользователя в браузере Internet Explorer

Рис. 1. Подключение стиля пользователя в браузере Internet Explorer

Краткая информация

Значение по умолчаниюНет
НаследуетсяНет
ПрименяетсяКо всем элементам

Синтаксис ?

Свойство: <значение> !important

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && B
Значения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#
×

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>important</title>
  <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, оно будет игнорироваться браузерами. Но только не в Internet Explorer версии 6 и ниже.

Спецификация ?

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.
×

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 27.08.2017

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Декларация !important в CSS | CSS-Tricks по-русски

Декларация !important в CSS

Декларация !important валидна с первой версии CSS, но похоже она приобрела плохую репутацию в последние годы. Однако если её использовать с осторожностью, то это будет полезным и мощным инструментом. Статья представляет собой руководство к тому как работает декларация и как её надо использовать.

Как использовать?

Декларация !important - это ключевое слово, которое может быть добавлено в конце любой пары ключ/значение. Например:


p {margin-left: 5px !important}
p {margin: 10px 5px 0 10px !important}

Каково её влияние?

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

Если появляются два конфликтующих правила, то применяется следующий подход для его разрешения:

  • Источник правила - если одно правило находится в таблице стилей сайта, а второе непосредственно на клиентском компьютере, то применено будет правило клиента.
  • Специфика - если два или более правил имеют отношение к одному и тому же свойству, одного и того же элемента, а также один уровень важности и один источник, то будет применено правило более конкретного селектора.
  • Порядок - если у двух правил один вес, то будет применено последнее.

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

В следующем примере, второй селектор является более конкретным и объявлено в конце, но использоваться будет именно первое правило, поскольку в нём используется декларация !important, которое заменяет все остальные правила.


p {margin-left: 5px !important}
#id p {margin-left: 10px}

Когда необходимо использовать !important?

Несколько примеров и тонкостей использования:

IE 5/6

Internat Explorer 5 и 6 игнорируют !important, если одно и тоже свойство объявлено в правиле дважды.


p {
	margin-left: 5px !important; 
	margin-left: 10px
}

Internat Explorer 5 и 6 применят значение 10px, тогда как остальные браузеры - 5px.

Замена inline-стилей

!important может использоваться для переопределения inline-стилей, которые обычно генерируются WYSIWYG-редакторами в различных CMS.

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

Например, пользователь хочет вывести текст красным цветом


<div><p>Some text</p></div>

Однако автор сайта может переопределить этот стиль, чтобы текст всех параграфов выводился, например, чёрным цветом:


#content p {color:black !important}
Стилевые файлы для печати

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

Обратная сторона

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

В CSS1 декларация !important автора сайта имела больший приоритет над пользовательским файлом стилей. Это правило изменилось в CSS2, то есть пользователь всегда может переопределить внешний вид сайта.

Заключение

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

!important - Xiper.net

Автор: Евгений Рыжков Дата публикации: 25.03.2009

Правило !important (важно) — это способ сделать правила, которые должны реагировать одинаково независимо о того, в какой части документа оно применяется (т.е. имеет приоритет над каскадностью и правилами наследования). Например, нужно задать чтобы цвет ссылок в любой части документа был красным. Для этого в начале CSS-файла достаточно прописать:

a {
color: red !important;
}

Теперь, если дальше по коду задать другой цвет ссылок, цвет все равно останется красным:

a {
color: red !important;
}
...
p a {
color: blue;
}

Цвет ссылки останется красным даже если непосредственно в HTML переопределить свойство:

<a href="">ссылка</a>

Правило !important можно отменить (перекрыть) только !important. Для вышеприведенного примера это выглядело бы так:

a {
color: red !important;
}
...
p a {
color: blue !important;
}

или

<a href="">ссылка</a>

Где можно использовать !important

  • удобно применять когда нужно что-то быстро поправить в чужом и/или большом коде, когда нет времени разбираться во всех правилах наследования
  • для стилей содержательной части, которая доступна для редактирования редакторам сайта. Задаем жестко свойства, чтобы редакторы ненароком не испортили дизайн (напрмиер цветовую гамму)

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

В современных браузерах предусмотрена возможность в некоторой степени управлять оформлением просматриваемых веб-страниц — пользователь может применять собственные стили к просматриваемым страницам в Интернете например для указания более крупного шрифта.

Когда для элемента стили автора и стили пользователя не совпадают, правило !important помогает решить противоречие между таблицами стилями пользователя и автора (разработчика):

  • разработчик и пользователь не объявили правило !important — правила таблицы разработчика будут иметь приоритет над правилами таблицы пользователя
  • пользователь объявил important, а разработчик — нет — правила пользователя одержат вверх
  • только разработчик объявил правило !important — использоваться будет правило разработчика
  • и разработчик, и пользователь задали !important — правило пользователя будет иметь приоритет над правилом разработчика (в спецификации CSS1 было наоборот)

Недостатки применения !important

  • нарушает стандартные правила наследования таблиц стилей. Работа с такой стилевой таблицей (поиск ошибок, модернизация) будет более трудоемкой;
  • динамически (с помощью JavaScript) нет возможности переопределить свойство (это можно обойти, если менять не свойство, а класс).

Старайтесь избегать применения правила !important.

Заметки об Internet Explorer

IE6 не совсем адекватно воспринимает это правило:

a {
color: red !important;
color: blue;
}

Во всех браузерах ссылки будут красными, в IE6 синими. На этой особенности основан один из хаков для IE6. В IE7 ситуация была исправлена, но если он в quirks режиме, или не указать DOCTYPE, тогда IE7 ведет себя аналогично IE6.

Правило !important

Версия CSS CSS2
Значение по умолчанию Нет
Наследуется Нет
Применяется Ко всем
Аналог HTML Нет

Описание правила !important

Правило !important используется для повышения приоритета стиля элемента. Это необходимо при несовпадении стиля автора со стилем пользователя.

Если пользователь использует свою таблицу стилей, или используются одновременно стиль автора и пользователя, то браузер использует такой алгоритм:

  1. !important используется в авторском стиле — применяется стиль автора.
  2. !important используется в пользовательском стиле — применяется стиль пользователя.
  3. !important не используется ни в авторском, ни в пользовательском стилях — применяется стиль автора.
  4. !important используется и в авторском и в пользовательском стилях — применяется стиль пользователя.
Результат использования правила !important.
Стиль автора Стиль пользователя Результат
BODY {
color: silver;


font-size: 8pt
}

BODY {
color: #000;


font-size: 12pt
}

Текст для примера...

Применяется стиль автора: цвет текста - серый, размер - 8 пунктов.

BODY {
color: silver;


font-size: 8pt
}

BODY {
color: #000 !important;


font-size: 12pt
}

Текст для примера...

Применяется стиль пользователя, но размер шрифта останется авторским. В итоге получаем цвет текста - черный, размер: 8 пунктов.

BODY {
color: silver;


font-size: 8pt
}

BODY {
color: #000 !important;


font-size: 12pt !important
}

Текст для примера...

Будет использоваться стиль пользователя. Текст - черный, размер - 12 пунктов.

BODY {
color: silver !important;
font-size: 8pt !important
}
BODY {
color: #000 !important;


font-size: 12pt !important
}

Текст для примера...

При использовании !important и у автора и у пользователя - высший приоритет имеет пользователь. Результат - текст: черный, размер - 12 пунктов.

В браузере Internet Explorer подключение стиля пользователя делается через меню

В браузере Opera аналогичное действие происходит через команду .

Запись правила !important в CSS.

Свойство: значение !important

Значения.

Без значений.

Пример использования правила !important.

<!DOCTYPE html> 
<html>
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
   <title>Использование правила !important</title>
   <style type="text/css">
    P {
     background: url('images/pic1.png') no-repeat !important;
     height: 120px; /* Высота блока */
     padding-left: 70px; /* Отступ слева от текста */
    }
    P {
     background: url('images/pic2.png') no-repeat;
    }
   </style>
  </head>
  <body>
     <p>Тут используется текст для примера</p>
  </body>
</html>

Как видно из примера, к селектору параграфа (<p>) задается одно свойство с двумя разными значениями. Но из-за того, что к первому селектору добавлен !important - его стиль и будет применяться на странице сайта.

Браузеры.

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

Список свойств Далее

Отправить ответ

avatar
  Подписаться  
Уведомление о