CSS-правило

То, из чего состоят таблицы стилей.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

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

Пример

Секция статьи "Пример"

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

        
          
          h2 {  color: #32a846;}
          h2 {
  color: #32a846;
}

        
        
          
        
      

Как пишется

Секция статьи "Как пишется"

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

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

Селектор

Секция статьи "Селектор"

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

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

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

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

        
        
          
        
      

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

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

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

Секция статьи "Пара свойство-значение"

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

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

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

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

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

Секция статьи "Как это понять"

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

Подсказки

Секция статьи "Подсказки"

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

На практике

Секция статьи "На практике"

Алёна Батицкая советует

Секция статьи "Алёна Батицкая советует"

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

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