Перейти к содержанию

Каскад

Иногда к элементу могут применяться два или более конкурирующих CSS-правил. В этом модуле вы узнаете, как браузер выбирает, какое из них использовать, и как управлять этим выбором.

CSS подкаст

004: Каскад

CSS расшифровывается как Cascading Stylesheets (каскадные таблицы стилей). Каскад — это алгоритм разрешения конфликтов, когда к элементу HTML применяется несколько правил CSS. Именно благодаря ему текст кнопки, стилизованной с помощью следующего CSS, будет синим.

1
2
3
4
5
6
7
button {
    color: red;
}

button {
    color: blue;
}

Понимание каскадного алгоритма помогает понять, как браузер разрешает подобные конфликты. Каскадный алгоритм состоит из 4 отдельных этапов.

  1. Положение и порядок появления: порядок появления ваших CSS-правил
  2. Специфичность: алгоритм, определяющий, какой CSS-селектор имеет наиболее сильное соответствие
  3. Оригинал: порядок появления CSS и то, откуда он берется, будь то стиль браузера, CSS из расширения браузера или ваш авторский CSS.
  4. Важность: некоторые правила CSS имеют больший вес, чем другие, особенно правило типа !important.

Позиция и порядок отображения

Порядок появления ваших CSS-правил и их расположение учитываются каскадом при расчете разрешения конфликтов.

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

Стили могут поступать из различных источников на HTML-странице, таких как тег <link>, встроенный тег <style>, а также встроенный CSS, заданный в атрибуте style элемента.

Если в верхней части HTML-страницы имеется <link>, содержащий CSS, а в нижней — другой <link>, содержащий CSS: нижний <link> будет обладать наибольшей специфичностью. То же самое происходит и со встроенными элементами <style>. Они становятся тем более конкретными, чем ниже по странице они находятся.

Кнопка имеет синий фон, как определено в CSS, который включен элементом ``. CSS-правило, устанавливающее темный фон, находится во второй связанной таблице стилей и применяется из-за более позднего расположения.

Этот порядок распространяется и на встроенные элементы <style>. Если они объявлены перед <link>, то CSS связанной таблицы стилей будет иметь наибольшую специфику.

Элемент `