CSS-правило

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

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

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

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

• универсальный селектор;
• селекторы по тегу;
• селектор по классу;
• селектор по идентификатору;
• селектор по атрибуту.

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

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

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

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

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

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

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

На практике

Скопировать ссылку "На практике" Скопировано

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

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

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

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

+ Развернуть