Группирование - «CSS»
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

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

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Видео уроки
Наш опрос



Наши новости

       
17-03-2016, 18:23
Группирование - «CSS»
Рейтинг:

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


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

Теги: CSS, , , Группирование

Просмотров: 8 272
Комментариев: 0:   17-03-2016, 18:23
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:



Другие новости по теме:
Комментарии для сайта Cackle