Группировка объявлений

Селекторы можно группировать в одно правило, а следовательно, также можно группировать и объявления. Предположим, вы хотите, чтобы текст всех элементов h1 был представлен шрифтом Helvetica фиолетового цвета высотой в 18 пикселов на фоне цвета морской волны (и вы не прочь сбить с толку своих читателей). Вы могли бы написать свои стили так:

h1 {font: 18px Helvetica;}
h1 {color: purple;}
h1 {background: aqua;}

Но этот метод неэффективен. Представьте, что подобный список создается для элемента, у которого будет 10 или 15 стилей! В таком случае объявления можно сгруппировать:

h1 {font: 18px Helvetica; color: purple; background: aqua;}

При этом результат будет абсолютно аналогичным тому, который получается и в случае применения показанной выше таблицы стилей, состоящей из трех строк. Обратите внимание, что точка с запятой в конце каждого объявления очень важна при группировке. Броузеры игнорируют пробелы в таблицах стилей, и при их анализе агент пользователя полностью зависит от правильности синтаксиса. Стили можно смело форматировать следующим образом:

h1 {
font: 18px Helvetica;
color: purple;
background: aqua;
}

Однако если опустить вторую точку с запятой, агент пользователя интерпретирует эту таблицу стилей так:

h1 {
font: 18px Helvetica;
color: purple background: aqua;
}

Поскольку background: не является действительным значением для атрибута color, а также потому, что атрибуту color может быть присвоен только одно ключевое слово, агент пользователя полностью проигнорирует объявление color (включая часть background: aqua).


Возможно, цвет текста в элементах h1 и будет фиолетовым без фона цвета морской волны, но скорее всего, вы не получите и фиолетовых элементов h1. Всем им будет назначен применяемый по умолчанию цвет (обычно черный) вообще без фона. (Объявление font: 18px Helvetica останется в силе, поскольку оно совершенно правильно завершается точкой с запятой.)

Хотя с технической точки зрения завершать последнее объявление правила точкой с запятой вовсе не обязательно, лучше принять это за правило. Во-первых, это выработает у вас привычку завершать объявления точкой с запятой, отсутствие которой является одной из самых распространенных причин ошибок. Во-вторых, если вы решите добавить в правило еще одно объявление, вам не надо беспокоиться о том, что вы забыли вставить дополнительную точку с запятой.

И наконец, некоторые старые броузеры, такие как Internet Explorer 3.x, имеют склонность приходить в замешательство, если последнее объявление правила не завершается точкой с запятой. Всех этих неприятностей можно избежать заранее: всегда завершайте объявления точкой с запятой, в каком бы месте правила они ни находились. Как и группировка селекторов, группировка объявлений – удобный способ, помогающий обеспечить небольшой размер, выразительность и простоту обслуживания таблиц стилей..



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

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

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