✔Группирование - «CSS»

17 марта 2016 3 526 Учебник CSS / Введение в CSS 0

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

Пример 17.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. Группирование как раз и позволяет
установить одно свойство сразу для нескольких селекторов, как показано в примере.;17.2.

Пример 17.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 { Описание правил стиля

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

Вопросы для проверки

1. Какой цвет фона будет у элемента с классом button при включении приведённого стиля?

.bgzapas, .button, h1 {
  font-size: 1.2em;
  padding: 10px;
  background-color: #fcfaed;

.bgzapas {
  background-color: #e7f2d7;

.button, h2 {
  width: 95px;
  font-size: 11px;
  color: #f3fced;
  background-color: #5ca22e;

.bgzapas, .button {
  background-color: #d9d7f2;