Логотип schoolsw3.com
Учебники Справочники Упражнения КАК? Меню
Создать
Редактор Поддержка Форум

×
Учебники
Справочники
Упражнения
Пожертвовать Обновление Реклама Видео Магазин

CSS Учебник

CSS Главная CSS Введение CSS Синтаксис CSS Селекторы CSS Подключение CSS Комментарии CSS Цвет CSS Фон CSS Границы CSS Поля CSS Отступы внутри CSS Высота и ширина CSS Бокс модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS Дисплей CSS Макс. ширина CSS Позиционирование CSS Перекрытие CSS Переполнение CSS Поплавок CSS Линейный блок CSS Выравнивание CSS Комбинаторы CSS Псевдоклассы CSS Псевдоэлементы CSS Прозрачность CSS Навигация сайта CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Атрибут селектора CSS Формы CSS Счетчики CSS Макет сайта CSS Единицы измерений CSS Особенности CSS !important CSS Математ. функции

CSS3 Учебник

CSS3 Закругленные углы CSS3 Изображен. граница CSS3 Слои фона изображ. CSS3 Цвета CSS Ключевые сл. цвета CSS3 Градиент CSS3 Тени CSS3 Эффект текста CSS3 Веб шрифты CSS3 2D Трансформация CSS3 3D Трансформация CSS3 Переход CSS3 Анимация CSS3 Всплыв. подсказки CSS3 Стиль изображения CSS3 Отраж. изображения CSS3 Объект-подгонка CSS3 Объект-позиция CSS3 Маскировка CSS3 Кнопки CSS3 Пагинация CSS3 Несколько столбцов CSS3 Интерфейс CSS3 Переменные CSS3 Размеры боксов CSS3 Медиа запросы CSS3 Медиа примеры CSS3 Флексбокс

CSS Адаптивный

АВД-Введение АВД-Область просмотра АВД-Вид сетка АВД-Медиа запросы АВД-Изображения АВД-Видео АВД-Фреймворк АВД-Шаблоны

CSS Сетка

Сетка Введение Сетка Контейнер Сетка Пункт

CSS Примеры

CSS Макеты CSS Примеры кода CSS Онлайн редактор CSS Фрагменты кода CSS Тест-викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Селекторы CSS Функции CSS Звук CSS Веб Шрифты CSS Анимации CSS Длины CSS PX-EM Конвертер CSS Цвета CSS Значение Цвета CSS по Умолчанию CSS Символы CSS Поддержка

CSS Свойство !important



Что такое !important?

Правило !important в CSS используется для придания большей важности свойству/значению, чем обычно.

На самом деле, если вы используете !important, оно переопределит ВСЕ предыдущие правила оформления для этого конкретного свойства этого элемента!

Давайте посмотрим на пример:

Пример
#myid {
  background-color: blue;
}

.myclass {
  background-color: gray;
}

p {
  background-color: red !important;
}

Попробуйте сами »

Объяснение примера !important

В приведенном выше примере, все три параграфа получат красный цвет фона, даже несмотря на то, что селектор идентификатора и селектор класса имеют более высокую специфичность. Правило !important переопределяет свойство background-color в обоих случаях.


Важное о !important

Единственный способ переопределить правило !important состоит в том, чтобы включить другой правило !important для объявления с такой же (или более высокой) специфичностью в исходном коде - и здесь начинается проблема! Это приводит к запутыванию CSS кода, и отладка будет затруднена, особенно если у вас большая таблица стилей!

Здесь мы создали простой пример. Когда вы смотрите на исходный CSS код, не очень понятно, какой цвет считается наиболее важным:

Пример
#myid {
  background-color: blue !important;
}

.myclass {
  background-color: gray !important;
}

p {
  background-color: red !important;
}

Попробуйте сами »

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



Использование !important

Один из способов использования !important - это если вам нужно переопределить стиль, который нельзя переопределить никаким другим способом. Это может быть, если вы работаете над системой управления контентом (CMS) и не можете редактировать CSS-код. Затем вы можете установить некоторые пользовательские стили, чтобы переопределить некоторые стили CMS.

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

Пример
.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}

Попробуйте сами »

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

Пример
.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}

#myDiv a {
  color: red;
  background-color: yellow;
}

Попробуйте сами »

Чтобы "заставить" все кнопки выглядеть одинаково, несмотря ни на что, мы можем добавить !important перейдите к свойствам кнопки, вот так:

Пример
.button {
  background-color: #8c8c8c !important;
  color: white !important;
  padding: 5px !important;
  border: 1px solid black !important;
}

#myDiv a {
  color: red;
  background-color: yellow;
}

Попробуйте сами »