Узнайте, что означает Каскад в каскадных таблицах стилей

Краткий курс CSS

Именно каскад делает таблицы стилей CSS такими полезными. Короче говоря, каскад определяет порядок приоритета для того, как должны применяться конфликтующие стили. Другими словами, если у вас есть два стиля:

p {color: red; }
p {color: blue; }

Каскад определяет цвет абзацев, хотя в таблице стилей указано, что они должны быть красного и синего цвета. В конечном итоге только один цвет может быть применен к абзацам, поэтому должен быть порядок. И этот порядок применяется в зависимости от того, какие селекторы ( p в приведенном выше примере) имеют наивысший приоритет и в каком порядке они появляются в документе.

Следующий список является упрощением того, как ваш браузер определяет приоритет стиля:

  1. Посмотрите в таблице стилей селектор, соответствующий элементу. Если нет определенных стилей, используйте правила по умолчанию в браузере.
  2. Посмотрите в таблице стилей селекторы, помеченные ! Важный , и примените их к соответствующим элементам.
  3. Все стили в таблице стилей будут переопределять стили браузера по умолчанию (за исключением случая с таблицами стилей пользователя).
  4. Чем конкретнее селектор стиля, тем выше будет приоритет. Например, div> p.class более специфичен, чем p.class , а точнее p .
  5. Наконец, если два правила применяются к одному и тому же элементу и имеют одинаковый приоритет выбора, будет применено то, которое было загружено последний . Другими словами, таблица стилей читается сверху вниз, а стили применяются друг над другом.

Исходя из этих правил, в приведенном выше примере абзацы будут написаны синим цветом, потому что p {color: blue; } занимает последнее место в таблице стилей.

Это очень упрощенное объяснение каскада. Если вы хотите узнать больше о том, как работает каскад, вам следует прочитать, что означает «Каскад» в «Каскадных таблицах стилей».

Оцените статью
Solutics.ru
Добавить комментарий