Группируем все

Сейчас вы знаете, что можете группировать селекторы и объявления. Сочетая в одном правиле оба типа группировки, можно определять очень сложные стили посредством всего лишь нескольких выражений. Что если вы решили назначить для всех заголовков документа несколько сложных стилей и вам хочется, чтобы одни и те же стили применялись ко всем заголовкам? Это делается так:

h1, h2, h3, h4, h5, h6 {color: gray; background: white; padding: 0.5em;
border: 1px solid black; font-family: Charcoal, sans-serif;}

Cелекторы сгруппированы, поэтому стили, находящиеся в правой части правила, будут применены ко всем перечисленным заголовкам, а группировка объявлений означает, что все перечисленные стили будут применены к селекторам, приведенным в левой части правила. Этот способ предпочтительнее альтернативного ему развернутого, который выглядел бы примерно так:

h1 {color: gray;}
h2 {color: gray;}
h3 {color: gray;}
h4 {color: gray;}
h5 {color: gray;}
h6 {color: gray;}
h1 {background: white;}
h2 {background: white;}
h3 {background: white;}

и растянулся бы на множество строк. Вы можете выбрать более долгий путь для написания своих стилей, но я бы не советовал. Редактирование стилей будет настолько же утомительным, как и необходимость повсеместной расстановки тегов font! Можно обеспечить селекторам даже еще больше выразительности и распределить стили по элементам согласно типам информации. Конечно придется немного потрудиться, но результат, определенно, стоит того.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Выбор дочерних элементов
Выбор конкретного атрибута
Выбор между селектором классов и селектором идентификаторов
Выбор на основании конкретного значения атрибута
Выбор первого дочернего элемента

Вернуться в раздел: CSS / 2. Селекторы