Каскадные таблицы стилей или CSS настроены так, что у вас может быть много свойств, влияющих на один и тот же элемент. Некоторые из этих свойств могут конфликтовать друг с другом. Например, вы можете установить цвет шрифта красного цвета в теге абзаца, а затем установить цвет шрифта синего цвета. Как браузер знает, какой цвет делать абзацы? Это определяется каскадом.
Типы таблиц стилей
Существует три разных типа таблиц стилей:
- Авторские стили
- Это таблицы стилей, созданные автором веб-страницы. Это то, о чем большинство людей думает, когда они думают о стилях CSS.
- Таблицы стилей пользователя
- Пользовательские таблицы стилей задаются пользователем веб-страницы. Они позволяют пользователю больше контролировать, как отображаются страницы.
- Таблицы стилей User Agent
- Это стили, которые веб-браузер применяет к странице, чтобы отобразить эту страницу. Например, в XHTML большинство визуальных пользовательских агентов отображают тег как курсивный текст. Это определено в таблице стилей пользовательского агента.
Свойствам, определенным в каждой из приведенных выше таблиц стилей, присваивается вес. По умолчанию таблица стилей автора имеет наибольший вес, затем таблицу стилей пользователя и, наконец, таблицу стилей пользовательского агента. Единственное исключение - это важное правило в таблице стилей пользователя. Это имеет больший вес, чем лист стилей автора.
Каскадный заказ
Чтобы разрешить конфликты, веб-браузеры используют следующий порядок сортировки, чтобы определить, какой стиль имеет приоритет и будут использоваться:
- Сначала найдите все объявления, которые относятся к рассматриваемому элементу, и для назначенного типа носителя.
- Затем посмотрите, из какой таблицы стилей он исходит. Как и выше, сначала начинаются листы стилей автора, затем пользователь, а затем пользовательский агент. С! Важными стилями пользователя, имеющими более высокий приоритет, чем автор! Важные стили.
- Чем более конкретный селектор, тем больше приоритетов он получит. Например, стиль на «div.co p» будет иметь более высокий приоритет, чем один из тегов «p».
- Наконец, отсортируйте правила по порядку, который они определили. Правила, которые определены ниже в дереве документов, имеют более высокий приоритет, чем те, которые были определены ранее. И правила из импортированной таблицы стилей рассматриваются перед правилами непосредственно в таблице стилей.
