Шаг 14. Группирование

Статьи / Веб-разработка / CSS по шагам / Шаг 14. Группирование

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

Пример 14.1. Стиль для каждого селектора

H1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 160%;
  color: #003;
}
H2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 135%;
  color: #333;
}
H3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 120%;
  color: #900;
}
P {
  font-family: Times, serif;
}

Из данного примера видно, что стиль для тегов заголовков содержит одинаковый параметр font-family. Группирование как раз и позволяет установить один параметр сразу для нескольких селекторов, как показано в примере 14.2.

Пример 14.2. Сгруппированные селекторы

H1, H2, H3 {
  font-family: Arial, Helvetica, sans-serif;
}
H1 {
  font-size: 160%;
  color: #003;
}
H2 {
  font-size: 135%;
  color: #333;
}
H3 {
  font-size: 120%;
  color: #900;
}

В данном примере единый для всех селекторов параметр font-family применяется сразу к нескольким тегам, а индивидуальные атрибуты уже добавляются к каждому селектору отдельно.

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

Селектор 1, Селектор 2, ... Селектор N { Описание правил стиля }

При такой записи правила стиля применяются ко всем селекторам, перечисленным в одной группе.

Источник: htmlbook.ru