!important | htmlbook.ru - «Учебник CSS»
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Наш опрос



Наши новости

       
20-03-2016, 13:25
!important - «Учебник CSS»
Рейтинг:
Категория: Справочник CSS

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

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


Значение по умолчанию Нет
Наследуется Нет
Применяется Ко всем элементам
Ссылка на спецификацию http://www.w3.org/TR/CSS21/cascade.html#important-rules

Версии CSS


CSS 1 CSS 2 CSS 2.1 CSS 3

Описание


Играет роль в том случае, когда пользователи подключают свою собственную
таблицу стилей. Если возникает противоречие, когда стиль автора страницы и
пользователя для одного и того же элемента не совпадает, то !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


Значения


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


Пример


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 и ниже.


Internet Explorer Chrome Opera Safari Firefox Android iOS 6.0 7.0 1.0 3.5 3.0 1.0 1.0 1.0 Краткая информация Значение по умолчанию Нет Наследуется Нет Применяется Ко всем элементам Ссылка на спецификацию http://www.w3.org/TR/CSS21/cascade.html

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Просмотров: 5 805
Комментариев: 2:   20-03-2016, 13:25
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:



Другие новости по теме:
Комментарии для сайта Cackle