Каскад - це те, що робить таблиці стилів CSS настільки корисними. Словом, каскад визначає порядок пріоритету того, як слід застосовувати конфліктуючі стилі. Іншими словами, якщо у вас є два стилі:
p {колір: червоний; }p {колір: синій; }
Каскад визначає, який колір мають бути абзаци, хоча в таблиці стилів вказано, що вони повинні бути як червоними, так і синіми. У кінцевому підсумку до абзаців можна застосувати лише один колір, тому має бути замовлення. І це замовлення застосовується якими селекторами ( р у наведеному вище прикладі) мають найвищий пріоритет і який порядок вони відображаються у документі.
Наступний список - це спрощення того, як ваш браузер вирішує стиль:
- Подивіться на таблицю стилів для селектора, що відповідає елементу. Якщо немає визначених стилів, скористайтеся правилами за замовчуванням у браузері
- Подивіться на таблицю стилів для позначених селекторів
! важливоі застосувати їх до відповідних елементів. - Всі стилі в таблиці стилів будуть перевизначати стилі браузера за замовчуванням (за винятком випадків таблиць стилів користувача).
- Чим конкретніше вибрати стиль, тим вище приоритет він матиме. Наприклад,
div> p.classє більш конкретним, ніжр.класяка більш конкретна, ніжр. - Нарешті, якщо два правила застосовуються до того самого елемента і мають один і той самий селекторний пріоритет, той, який був завантажений останній буде застосовано. Іншими словами, таблиця стилів читається зверху вниз, а стилі застосовуються поверх один одного.
Виходячи з цих правил, у наведеному вище прикладі абзаци буде написано синім, оскільки p {колір: синій; } наведено останнім у таблиці стилів.
Це дуже спрощений пояснення каскаду. Якщо ви зацікавлені в тому, щоб дізнатися більше про те, як працює каскад, вам слід прочитати, що означає "Каскад" у каскадних таблицях стилів ?.
