SEO для SaaS-продуктов: как конкурировать с гигантами поисковой выдачи - «Надо знать»
SEO для SaaS-продуктов: как конкурировать с гигантами поисковой выдачи - «Надо знать»
Twitter отметил сообщение Трампа как нарушающее правила соцсети - «Интернет»
Twitter отметил сообщение Трампа как нарушающее правила соцсети - «Интернет»
Автоматизированные правила в Google Ads: контролируем эффективность рекламы - «Заработок»
Автоматизированные правила в Google Ads: контролируем эффективность рекламы - «Заработок»
Остекление из нового российского материала не боится сильных ударов и агрессивных химикатов - «Новости сети»
Остекление из нового российского материала не боится сильных ударов и агрессивных химикатов - «Новости сети»
В июне россияне смогут увидеть затмение Венеры: астрономы обещают «шоу двух серпов» - «Новости сети»
В июне россияне смогут увидеть затмение Венеры: астрономы обещают «шоу двух серпов» - «Новости сети»
Tesla временно командировала 20 инженеров в аэрокосмическую компанию SpaceX - «Новости сети»
Tesla временно командировала 20 инженеров в аэрокосмическую компанию SpaceX - «Новости сети»
Модифицированная Cessna 208B стала крупнейшим в мире самолётом с «нулевым выбросом» - «Новости сети»
Модифицированная Cessna 208B стала крупнейшим в мире самолётом с «нулевым выбросом» - «Новости сети»
Россияне опасаются голосовать на выборах через интернет - «Интернет»
Россияне опасаются голосовать на выборах через интернет - «Интернет»
СК завершил расследование дела о фейках про коронавирус - «Интернет»
СК завершил расследование дела о фейках про коронавирус - «Интернет»
Мировой рынок носимых устройств стремительно растёт: Apple удерживает лидерство - «Новости сети»
Мировой рынок носимых устройств стремительно растёт: Apple удерживает лидерство - «Новости сети»

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