Приоритет стилей CSS

427
посл. ред. 21.06.2016

CSS - это каскадные таблицы стилей. При определении стилей элемента страницы используются 2 принципа: наследование и каскадирование.

Наследование

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

<html>
<head>
  <title>Наследование</title>
  <style>
    div {
      color: red;
      border: 1px solid black;
    }
    b {
      color: blue;
    }
  </style>
</head>
<body>
  <div>
    <p>Не весь <span>текст <b>красный</b></span>.</p>
  </div>
</body>
</html>

Не весь текст красный.

В данном примере параграф <p> унаследовал только цвет шрифта от своего родителя <div>. Элемент <span> унаследовал цвет шрифта уже от своего родителя <p>. А вот для тега <b> задан свой цвет шрифта, и все его дочерние элементы будут наследовать новый цвет шрифта.

Чтобы принудительно заставить свойство унаследовать значение от родительского элемента, в CSS введено ключевое слово inherit. Например, для предыдущего примера добавлено свойство:

p {
  border: inherit;
}

Не весь текст красный.

Параграф <p> унаследовал рамку от своего родителя <div>.

Каскадирование

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

  • Для некоторых часто используемых элементов браузеры сами применяют стили. Если не задавать эти стили вручную, то в разных браузерах страница может отображаться с большими различиями. Стили браузеров имеют наименьший приоритет.
  • Некоторые браузеры позволяют пользователю самостоятельно настроить стили по умолчанию.
  • Применение свойства тегу по принципу наследования.
  • Непосредственное задание стиля HTML-элементу. Зависит от способа применения свойств (по возрастанию приоритета):
    • Подключение внешнего файла стилей к документу.
    • Импорт свойств из внешнего файла.
    • Описание в теге <style>.
    • Описание в глобальном атрибуте style.
  • Максимальным приоритетом обладает свойство, для которого это явно задано. Для этого используется ключевое слово !important. Например:

    body {
  background-color: silver !important;
}