@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>Очень <em>важный</em> заголовок</h1>

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

h1 { color: red }

em { color: blue }

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

h1 em { color: blue }

Обратите внимание, что в отличие от группировки при обращении к потомкам запятые не ставятся. Количество элементов, которые можно записать потомками, не ограничено. Например:

body div p span { color: green }

Если в документе встретится элемент SPAN, находящийся внутри элемента P, который, в свою очередь, находится внутри элемента DIV, то текст в элементе SPAN будет зеленым. В столь длинных описаниях элемент BODY можно опускать, так как все элементы находятся внутри него.

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

Пример, представленный выше, можно переписать так:

body * span { color: green }

Нужно помнить, что текст будет зеленым, даже если элемент SPAN будет просто находиться внутри элемента DIV. Иными словами, звездочкой считается любой набор селекторов и их потомков.

Сестринскими называют элементы, которые идут друг за другом. Предположим, есть абзац, который имеет параметр class, заданный как first. Тогда, если за ним следует еще какой-то абзац, размер вертикального пространства между ними можно уменьшить, используя такой код:

p.first + p { margin-top: -5mm }

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