Каскадность в 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 пикселя, которые мы указали для селектора по тегу.

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

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

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

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

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

p {
  color: green;
}

.red {
  color: red;
}

#blue {
  color: blue;
}

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

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

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

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

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

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

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

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

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

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

#intro {
  color: green;
}

<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>

Вес селекторов

Во время разработки вы будете встречать разные ситуации, при которых одни селекторы будут иметь больший вес, чем другие. Причем их месторасположение в CSS файле не имеет особого значения:

<textarea class="form-input"></textarea>

.form-input {
  height: 50px;
}

textarea {
  height: 200px;
}

Какой высоты будет элемент <textarea>? Правильный ответ — 50px, так как селектор по классу имеет больший приоритет, чем селектор по тегу. Но как же задать высоту в 200px и не вводить новые классы? Достаточно подставить к тегу еще и название класса:

.form-input {
  height: 50px;
}

textarea.form-input {
  height: 200px;
}

Теперь для элемента <textarea> будет установлена высота в 200px. Это произошло благодаря тому, что приоритеты «складываются» в рамках одного селектора. Для большего понимания таких сложений можно представить, что общий вес селектора определяется тремя цифрами, где:

1. Первая цифра показывает количество идентификаторов в селекторе
2. Вторая цифра показывает количество классов в селекторе
3. Третья цифра показывает количество тегов в селекторе

Может звучать сложно, но концепция простая. Разберем прошлый пример:

<textarea class="form-input"></textarea>

.form-input {
  height: 50px;
}

textarea {
  height: 200px;
}

• Селектор .form-input состоит из одного класса, поэтому в качестве второй цифры поставим единицу и получим: 010
• Селектор textarea состоит из одного тега. Записываем единицу в третий разряд нашего числа: 001

Визуально понятно, что 010 > 001, поэтому свойства внутри такого правила имеют больший приоритет. Мы захотели это исправить и дополнили наш селектор:

.form-input {
  height: 50px;
}

textarea.form-input {
  height: 200px;
}

Теперь порядок сил во вселенной немного изменился:

• Селектор .form-input состоит из одного класса, поэтому в качестве второй цифры поставим единицу и получим: 010
• Селектор textarea.form-input состоит из одного класса и тега. Записываем единицу во второй и третий разряд нашего числа: 011

Получаем, что 010 < 011, а значит свойства внутри селектора textarea.form-input будут иметь больший приоритет.

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

Самостоятельная работа

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Небольшая вёрстка</title>

  <style>
    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;
    }
  </style>
</head>
<body>
  <div id="main" class="text-white alert alert-warning">Какой-то текст</div>
</body>
</html>

Проанализируйте получившийся результат

---

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Об обучении на Хекслете

• Статья «Как учиться и справляться с негативными мыслями»
• Статья «Ловушки обучения»
• Статья «Сложные простые задачи по программированию»
• Урок «Как эффективно учиться на Хекслете»
• Вебинар «Как самостоятельно учиться»