Каскадирование и приоритетность

Почему каскадные таблицы стилей называются каскадными? Для ответа на этот вопрос нужно узнать что означает слово каскад. Обратимся к википедии. Значений этого слова множество, но нас интересует определение касательно компьютерной тематики. Каскад — ступенчатое расположение графических окон на дисплее.

Рассмотрим скриншот:
каскад окон

Вот перед нами представлено 3 окна. Обратите внимание на название окон: NONAME00.PAS и NONAME01.PAS серого цвета, а окно NONAME02.PAS имеет "цвет морской волны". Это значит что третье окно в данный момент является активным, потому что оно открыто последним и соответственно имеет более высокий приоритет перед остальными. Примерно тоже самое происходит и с каскадными таблицами стилей. К элементу применится то правило, которое имеет более высокий приоритет.

Как узнать у каких стилей какой приоритет? Приведём список приоритетности стилей:

  1. Таблица стилей браузера;
  2. Пользовательские настройки стилей в браузере; например, вот так они настраиваются в Chrome:
    Пользовательские настройки в браузере
  3. Внешняя таблица стилей, которая устанавливается через элемент link;
  4. Таблицы стилей, которые устанавливаются через функцию @import;
  5. Глобальная таблица стилей, которая устанавливается через элемент style;
  6. Стиль, добавленный напрямую в элемент при помощи атрибута style;
  7. Правило автора с индикатором !important;
  8. Правило пользователя с индикатором !important;

Пункт под номером 1 имеет самый низкий приоритет, пункт под номером 8 самый высокий приоритет. Таким образом получается что каждый последующий пункт отменяет предыдущий.

Рассмотрим пример:

А что если в одной таблице стилей конфликтуют сразу несколько определений? Побеждает последнее.

После написания такого правила цвет текста будет зелёным, потому что этот цвет указан последним.

Поделиться