Каскадность в CSS

В прошлом уроке была разобрана вторая часть словосочетания Каскадные таблицы стилей, а именно таблицы стилей. Мы изучили, как записываются и применяются стили к различным HTML элементам. В этом уроке поговорим о значении слова каскадные.

Что такое каскадность? Представьте себе каскад водопадов. В них вода перетекает из одного водопада в другой и так до тех пор, пока это всё не уйдёт в общий бассейн.

В CSS слово каскадность имеет такое же значение. В качестве воды у нас CSS свойства. Они могут накладываться и перекрывать друг друга. Другими словами каскадность — возможность языка CSS накладывать свойства друг на друга, а также расширять свойства в селекторах.

Возможно такое описание достаточно сложное, но давайте посмотрим на примере. Создадим параграф с двумя классами: text-bold и text-dark. Первый класс будет отвечать за жирное начертание текста, а второй за установку тёмного цвета шрифта. Также добавим селектор по тегу и укажем размер шрифта 24 пикселя.

<p class="text-bold text-dark">Какой-то очень интересный текст об интересной вещи. Очень интересно.</p>

В CSS файле укажем следующие стили:

p {
  font-size: 24px;
}

.text-bold {
  font-weight: bold;
}

.text-dark {
  color: #333333;
}

Попробуйте воспроизвести этот пример и вы увидите, что текст выводится тёмного цвета и с жирным начертанием. Стили от классов text-bold и text-dark сложились и применились к нашему параграфу. Также текст имеет размер 24 пикселя, которые мы указали для селектора по тегу.

Итоговыми стилями для нашего параграфа будут:

{
  font-size: 24px;
  font-weight: bold;
  color: #333333;
}

Это и есть каскадность стилей CSS. Хоть мы и использовали разные селекторы и классы для описания, но в конечном итоге они суммировались.

Приоритет селекторов

Важной чертой CSS является то, что разные типы селекторов имеют разный приоритет. Если стили противоречат друг другу в разных селекторах, то вступает в дело принцип приоритета. Разберём на примере. Возьмём параграф с классом red и идентификатором blue. Установим соответствующие цвета для текста. Для всех же параграфов в тексте установим зелёный цвет.

p {
  color: green;
}

.red {
  color: red;
}

#blue {
  color: blue;
}

<p id="blue" class="red">Какого же цвета будет параграф?</p>

Перед тем, как читать дальше попробуйте выполнить этот пример в любом удобном вам месте.

Как вы смогли заметить, текст параграфа будет синим. Но почему так? Может быть дело в том, что синий цвет в CSS указан самым последним? В данном случае нет. Даже если мы переместим селектор по идентификатору в самый вверх, параграф всё равно останется синим.

Всё дело в том, что селектор по идентификатору имеет самый высокий приоритет. Встретив его — браузер будет считать эти стили самыми важными для страницы и в случае противоречий возьмёт значение в первую очередь из стилей для идентификатора.

Условно можно расставить селекторы в следующем порядке по возрастанию приоритета:

Селектор по тегу (p)
Селектор по классу (.red)
Селектор по идентификатору (#blue)

Где 1 — самый низкий приоритет, а 3 — самый высокий.

Разберём ещё один пример:

#intro {
  color: green;
}

p {
  color: blue;
  font-weight: bold;
}

.important {
  color: purple;
  font-style: italic;
}

<p class="important" id="intro">Индейские племена Манахаттоу и Канарси.</p>

Этот текст будет наклонным, жирным и зелёным. И вот почему:

Селектор по тегу p:
- Добавит синий цвет
- Добавит жирное начертание
Селектор по классу .important:
- Заменит ~~синий цвет~~ на пурпурный
- Сделает текст курсивным
Селектор по идентификатору #intro:
- Заменит ~~пурпурный цвет~~ на зелёный

После всех таких преобразований итоговые стили для параграфа сложатся следующим образом:

{
  color: green;
  font-weight: bold;
  font-style: italic;
}

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

Переопределение свойств

Возможно у вас возник вопрос, а что случится, если элемент будет иметь несколько классов, свойства которых противоречат друг другу? Здесь каскадность работает по принципу «Кто последний, тот и прав». Проще всего это так же посмотреть на примере.

.alert {
  color: gray;
}

.alert-error {
  color: red;
}

<p class="alert alert-error">Важное сообщение! Сообщение красного цвета</p>

Отталкиваясь от принципа каскадности, браузер вначале увидит селектор .alert и установит серый цвет текста. Далее ему встретится селектор .alert-error, который говорит установить красный цвет. И браузер просто перезапишет серый цвет на красный. Порядок классов в HTML в данном случае не играет никакой роли. Даже в таком случае

<p class="alert-error alert">Важное сообщение! Сообщение красного цвета</p>

цвет текста будет красным. Это наглядно показывает независимость CSS от HTML. Если же поменять местами селекторы в CSS, то поменяются и итоговые стили.

.alert-error {
  color: red;
}

.alert {
  color: gray;
}

<p class="alert alert-error">Важное сообщение! Сообщение серого цвета</p>

Дополнительное задание

Создайте файлы index.html и style.css на своём компьютере.

Внутри HTML расположите следующую запись:

<div id="main" class="text-white alert alert-warning">Какой-то текст</div>

и следующие CSS стили:

div {
  width: 500px;
  height: 500px;

  background: #333333;
}

#main {
  color: white;
  width: 750px;
}

.text-white {
  color: white;
}

.alert {
  height: 350px;
  color: gray;
}

div {
  background: blue;
}

.alert-warning {
  background: #000000;
  color: yellow;
}