Комментарии в CSS начинаются с символов /* и заканчиваются символами */. Они могут находиться в любом месте таблицы. Использование комментариев очень удобно. Впоследствии вам может понадобиться много времени, чтобы сообразить, за какую часть документа отвечает тот или иной CSS-код. В то же время наличие комментариев поможет быстро в этом разобраться.

Приведем пример CSS-кода с комментарием:

/* Цвет основного заголовка – синий */

h1 { color: blue }

Из записи в комментарии понятно, что делает данное CSS-правило.

Правила @ начинаются с ключевого слова @, непосредственно за которым следует идентификатор (например, @import, @page). Каждый из этих идентификаторов далее рассмотрим подробнее.

Все же надо отметить, что браузер с поддержкой CSS будет игнорировать все правила @import, которые находятся внутри блока CSS либо не предшествуют ни одному набору правил. Лучше всего это понять из примера. Рассмотрим неверную таблицу стилей:

@import «subs.css»;

h1 { color: blue }

@import "list.css";

Второе правило @import недопустимо. Браузер полностью проигнорирует второе правило @ целиком. Иными словами, в реальности он отобразит HTML-документ, используя такую таблицу стилей:

@import «subs.css»;

h1 { color: blue }

Приведем еще один пример недопустимого использования правила @:

@import «subs.css»;

@media print {

@import "print-main.css";

body { font-size: 10pt }

}

h1 {color: blue }

В этом примере второе правило @import недопустимо, так как оно находится в пределах другого блока @media.

В последующих разделах мы подробно разберем каждое правило @.

Селектором в CSS для простоты понимания будем считать название элемента, для которого задаются свойства. Теперь рассмотрим, как можно задать одни и те же свойства разным элементам документа.

Для задания разным элементам документа одних и тех же свойств в CSS существует группировка. Селекторы, то есть элементы, можно сгруппировать в список, разделив запятыми.

Приведу пример, в котором разным элементам задается одно и то же свойство:

h1 { color: red }

h2 { color: red }

h3 { color: red }

Вышеприведенный пример можно значительно упростить, используя правило группировки:

h1, h2, h3 { color: red }

Как отмечалось выше, при группировке селекторы разделяются запятыми.

Иногда необходимо задать свойства элементу, который располагается непосредственно внутри какого-то другого элемента, то есть является так называемым потомком. Селектор потомков состоит из двух и более селекторов, разделенных пробелом.

Допустим, внутри HTML-документа есть такой код:

Очень важный заголовок

Теперь предположим, что мы хотим изменить свойства элемента H1 и слова важный внутри строки. Если мы используем CSS-код, описанный ниже, то повлияем на все элементы EM на странице, а этого делать не нужно:

h1 { color: red }

em { color: blue }

Чтобы повлиять на свойства слова важный, которое в нашем примере находится внутри элемента EM, а тот, в свою очередь, внутри элемента H1, надо использовать следующий CSS-код:

h1 em { color: blue }