Категория > Введение в CSS > Группирование - «CSS»

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


17-03-2016, 18:23. Автор: Fraser

При создании стиля для сайта, когда одновременно используется множество селекторов,
возможно появление повторяющихся стилевых правил. Чтобы не повторять дважды одни
и те же элементы, их можно сгруппировать для удобства представления и сокращения
кода. В примере 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;
}


  1. #fcfaed

  2. #e7f2d7

  3. #f3fced

  4. #5ca22e

  5. #d9d7f2



Ответы


5. #d9d7f2


Перейти обратно к новости