Что означает каскад в каскадных таблицах стилей?

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

Типы таблиц стилей

Существует три типа таблиц стилей:

1. Авторские таблицы стилей
   1. Это таблицы стилей, созданные автором веб-страницы. Это то, о чем думает большинство людей, когда они думают о таблицах стилей CSS.
2. Таблицы стилей пользователя
   1. Пользовательские таблицы стилей устанавливаются пользователем веб-страницы. Это позволяет пользователю лучше контролировать отображение страниц.
3. Таблицы стилей агента пользователя
   1. Это стили, которые веб-браузер применяет к странице, чтобы помочь отобразить эту страницу. Например, в XHTML большинство визуальных пользовательских агентов отображают тег в виде текста, выделенного курсивом. Это определено в таблице стилей агента пользователя.

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

Каскадный ордер

Для разрешения конфликтов веб-браузеры используют следующий порядок сортировки, чтобы определить, какой стиль имеет приоритет и будет использоваться:

1. Сначала найдите все объявления, которые применяются к рассматриваемому элементу, и для назначенного типа носителя.
2. Затем посмотрите, из какой таблицы стилей это происходит. Как и выше, сначала идут таблицы стилей автора, затем пользователь, затем пользовательский агент. Важные пользовательские стили имеют более высокий приоритет, чем авторские важные.
3. Чем конкретнее селектор, тем больший приоритет он получит. Например, стиль в «div.co p» будет иметь более высокий приоритет, чем стиль только в теге «p».
4. Наконец, сортируйте правила в порядке их определения. Правила, которые определены позже в дереве документа, имеют более высокий приоритет, чем те, которые были определены ранее. А правила из импортированной таблицы стилей рассматриваются перед правилами непосредственно в таблице стилей.