Группирование - «CSS»
Пользователи тратят на приложения в смартфонах 4-5 часов в день - «Новости мира Интернет»
Пользователи тратят на приложения в смартфонах 4-5 часов в день - «Новости мира Интернет»
В картах 2ГИС появился глобальный поиск - «Новости мира Интернет»
В картах 2ГИС появился глобальный поиск - «Новости мира Интернет»
Компания Google усовершенствовала поиск с использованием кавычек - «Новости мира Интернет»
Компания Google усовершенствовала поиск с использованием кавычек - «Новости мира Интернет»
Timeweb Cloud и топ крупнейших поставщиков IaaS - «Новости мира Интернет»
Timeweb Cloud и топ крупнейших поставщиков IaaS - «Новости мира Интернет»
IT-мемы в Комьюнити: выпуск 16 - «Новости мира Интернет»
IT-мемы в Комьюнити: выпуск 16 - «Новости мира Интернет»
Разработчик серверных чипов Prodigy с невероятными характеристиками обвинил в своих бедах Cadence / ServerNews - «Новости сети»
Разработчик серверных чипов Prodigy с невероятными характеристиками обвинил в своих бедах Cadence / ServerNews - «Новости сети»
SSD оказались несопоставимо вреднее для экологии, чем HDD / ServerNews - «Новости сети»
SSD оказались несопоставимо вреднее для экологии, чем HDD / ServerNews - «Новости сети»
В России вышли прочные смарт-часы Amazfit T-Rex 2 с GPS по цене 16 990 рублей - «Новости сети»
В России вышли прочные смарт-часы Amazfit T-Rex 2 с GPS по цене 16 990 рублей - «Новости сети»
Астрономы зафиксировали один из мощнейших выбросов энергии — столкнулись две мёртвые звезды - «Новости сети»
Астрономы зафиксировали один из мощнейших выбросов энергии — столкнулись две мёртвые звезды - «Новости сети»
Презентация процессоров Ryzen 7000 и материнских плат с Socket AM5 состоится 15 сентября - «Новости сети»
Презентация процессоров Ryzen 7000 и материнских плат с Socket AM5 состоится 15 сентября - «Новости сети»

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


запостил(а)
Fraser
Вернуться назад
0

Смотрите также


А что там на главной? )))



Комментарии )))



Комментарии для сайта Cackle