Отправляет email-рассылки с помощью сервиса Sendsay

Самоучитель по HTML и CSS

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Март 2009   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
ImHoster.net

Статистика

8.556 подписчиков
-7 за неделю
←   Все выпуски   →

Самоучитель по HTML и CSS - 51


Дата: 2009-03-02

Архив Рассылки

Самоучитель HTML

Самоучитель CSS

Справочник по CSS

Рецепты HTML и CSS
Самоучитель по HTML и CSS

Добрый день.

Напоминаю, что на сайте htmlbook.ru обновился справочник по CSS до версии 3.2. Если у вас есть уже этот справочник, то обновить его можно бесплатно. Для учителей школ справочник также доступен без всякой платы. Чтобы его получить, просто напишите мне письмо, с указанием школы и города, где требуется книга.

Доступна версия в CHM, PDF, HTML-файлах.
Приобрести справочник можно по адресу htmlbook.ru/books/?id=4

17. Группирование

При создании стиля для сайта, когда одновременно используется множество селекторов, возможно появление повторяющихся стилевых правил. Чтобы не повторять дважды одни и те же элементы, их можно сгруппировать для удобства представления и сокращения кода. В примере 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
Copyright 2007—2009 Влад Мержевич. По всем вопросам пишите по адресу vlad@htmlbook.ru
В избранное