Группирование селекторов в CSS.

Разные селекторы можно комбинировать между собой, что в итоге позволяет сократить код и нацелить стиль на выбранные элементы, основываясь на их положении относительно друг друга.

Группирование применяет один и тот же стиль сразу к нескольким селекторам. Это делается для удобства представления и сокращения кода CSS. Рассмотрим пример где стили прописаны для каждого селектора:

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;
} 

h4 { 
  font-family: Arial, Helvetica, sans-serif; 
  font-size: 150%; 
  color: #004;
} 

P {
  font-family: Times, serif;
}

Из данного примера видно, что стиль для тегов заголовков содержит одинаковое значение font-family. Группирование как раз и позволяет установить одно свойство сразу для нескольких селекторов. Селекторы группируются в виде списка тегов, разделенных между собой запятыми. В группу могут входить не только селекторы тегов, но также идентификаторы и классы. Синтаксис:

Селектор 1, Селектор 2, ... Селектор N { Описание правил стиля }

Сгруппировав селекторы наш первый пример будет выглядеть так:

h1, h2, h3, h4 { 
  font-family: Arial, Helvetica, sans-serif; 
} 

h1 { 
  font-size: 160%; 
  color: #003;
}

h2 { 
  font-size: 135%; 
  color: #333;
}

h3 { 
  font-size: 120%; 
  color: #900;
}

h4 { 
  font-size: 150%; 
  color: #004;
}

 
Поделиться в facebook
Facebook
Поделиться в twitter
Twitter
Поделиться в vk
VK
Поделиться в google
Google+
Поделиться в email
Email

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Группа в VK

Помощь проекту

Обнаружили опечатку?

Сообщите нам об этом, выделите текст с ошибкой и нажмите Ctrl+Enter, будем очень признательны!

Свежие статьи

Похожие статьи

CSS flexbox

CSS flexbox

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. Flexbox состоит из

 
Препроцессор Sass

Препроцессор Sass

Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода и упрощения файлов каскадных таблиц стилей. Язык Sass имеет два синтаксиса: sass

 
Программируемый язык стилей LESS

Программируемый язык стилей LESS

LESS (Leaner Style Sheets, компактная таблица стилей) — это динамический язык стилей, который разработал Alexis Sellier. Он создан под влиянием языка стилей Sass, и, в

 
CSS-фреймворки

CSS-фреймворки

CSS-фреймворки созданы для упрощения работы верстальщика, исключения ошибок при создании проекта и избавления от скучного монотонного написания одного и того же кода. Верстальщики получают продуманные

 

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: