Учебник по 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 Z-индекс 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 2D-преобразования CSS CSS 3D-преобразования CSS-переходы CSS-анимации Подсказки CSS Изображения в стиле CSS Отражение изображения CSS CSS объект-подгонка CSS-позиция объекта Маскировка CSS CSS-кнопки Разбивка на страницы CSS Несколько столбцов CSS Пользовательский интерфейс CSS CSS-переменные Размер блока CSS Медиа-запросы CSS Примеры CSS MQ CSS флексбокс

CSS Отзывчивый

Введение в задний привод Окно просмотра RWD Представление сетки RWD Медиа-запросы RWD Изображения RWD Видео с задним приводом Рамки RWD Шаблоны RWD

CSS -сетка

Введение в сетку Контейнер сетки Элемент сетки

CSS SASS

Учебник по SASS

Примеры CSS

CSS-шаблоны Примеры CSS css викторина CSS-упражнения Сертификат CSS

Ссылки на CSS

Справочник по CSS Селекторы CSS CSS-функции Справочник по CSS Безопасные веб-шрифты CSS CSS анимация Единицы CSS Конвертер CSS PX-EM Цвета CSS Значения цвета CSS Значения CSS по умолчанию Поддержка CSS-браузера

CSS Важное правило


Что важно?

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

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

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

Пример

#myid {
  background-color: blue;
}

.myclass {
  background-color: gray;
}

p {
  background-color: red !important;
}

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

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


Важно О !важно

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

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

Пример

#myid {
  background-color: blue !important;
}

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

p {
  background-color: red !important;
}

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



Может быть, одно или два добросовестных использования !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;
}