skip to main content

CSS-правило

css

Кратко 🔗

Весь CSS состоит из однотипных блоков — CSS-правил. Каждое правило состоит из как минимум одного селектора и одной пары свойство-значение.

Пример 🔗

Написанное ниже правило найдёт все заголовки второго уровня в HTML и покрасит их в зелёный цвет:

h2 {
color: #32a846;
}

Как пишется 🔗

CSS-правило состоит из нескольких обязательных элементов:

  • селектор;
  • свойство;
  • значение.

Селектор 🔗

При помощи селектора мы говорим браузеру, к какому именно элементу будут применяться свойства.

Есть разные типы селекторов. Подробнее о них можно почитать в отдельных статьях:

Можно написать правило сразу для нескольких селекторов, перечислив их через запятую:

.first-selector,
.next-selector
{
color: #6e4aff;
}

Селекторы можно разным образом комбинировать между собой. Подробнее в статье про комбинированные селекторы.

Сразу после селектора пишутся фигурные скобки { }. Внутри них будут перечислены свойства и значения.

Пара свойство-значение 🔗

Свойства и их значения рассмотрим в паре, потому что они не существуют друг без друга.

Свойство указывает какой именно визуальный аспект выбранного тега будет изменяться.

А вот как именно он будет изменяться указывает значение этого свойств.

В конце строки обязательно нужно поставить точку с запятой. Иначе браузер склеит свойства и они не будут работать.

Как это понять 🔗

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

Подсказки 🔗

💡 Очень частая ошибка — забытая точка с запятой. Обращайте на это внимание!

В работе 🔗

🛠 Браузер прочитает CSS как бы вы его не оформили. Хоть в одну строку. Но для простоты чтения и редактирования принято соблюдать простые правила оформления:

  • Если перечисляете несколько селекторов, ставьте каждый из них на новую строку.
  • После селектора перед открывающей фигурной скобкой ставьте пробел.
  • Каждую пару свойство-значение пишите с новой строки.
  • Свойства внутри фигурных скобок отбивайте от начала строки табом или пробелами в зависимости от принятого стиля кода в вашей команде.
  • После каждого CSS-правила оставляйте пустую строку.

Автор: Алёна,