Правило !important

       
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Да Да Да Да Да Да Да Да Да Да Да Да Да Да
Версия CSS CSS2
Значение по умолчанию Нет
Наследуется Нет
Применяется Ко всем
Аналог HTML Нет

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

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

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

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

/* Размер - 8 пунктов */
font-size: 8pt
}
BODY {
/* Цвет текста - черный */
color: #000;

/* Размер - 12 пунктов */
font-size: 12pt
}

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

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

BODY {
/* Цвет текста - серый */
color: silver;

/* Размер - 8 пунктов */
font-size: 8pt
}
BODY {
/* Цвет текста - черный, Важность - повышенная */
color: #000 !important;

/* Размер - 12 пунктов */
font-size: 12pt
}

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

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

BODY {
/* Цвет текста - Серый */
color: silver;

/* Размер - 8 пунктов */
font-size: 8pt
}
BODY {
/* Цвет текста - черный, Важность - повышенная              */
color: #000 !important;

/* Размер - 12 пунктов, Важность - повышенная */
font-size: 12pt !important
}

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

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

BODY {
/* Цвет текста - Серый,  Важность - повышенная              */
color: silver !important;

/* Размер - 8 пунктов, важность - повышенная */

font-size: 8pt !important
}
BODY {
/* Цвет текста - черный, важность - повышенная              */
color: #000 !important;

/* Размер - 12 пунктов, важность - повышенная */
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 и ниже.

Список свойств