Селекторы

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

< STYLE TYPE="text/css">

<!--
A {text-decoration:none; }

-->
</--STYLE>

Классы

А что делать, если нужно некоторые ссылки отобразить по-другому? CSS реализует возможность присваивать стили не всем одинаковым элементам страницы, а избирательно – для этого используется параметр CLASS = "имя класса" или идентификатор ID=«имя элемента», присваивающиеся любому элементу страницы. Рассмотрим эти возможности подробнее.

Класс позволяет задать разные правила форматирования для одного элемента определённого типа или всех элементов документа. Имя класса указывается в селекторе правила после имени тега и отделяется от него точкой. Можно определить несколько правил форматирования для одного элемента и с помощью параметра CLASS соответствующего тега применять разные правила форматирования. Например, можно определить два класса для отображения заголовка первого уровня:

<STYLE TYPE="text/css">
<!--
H1.red {color: red; }
H1.blue (color:red; background-color: blue}
-->
</STYLE>

В тексте документа ссылка на соответствующий класс задаётся в параметре CLASS:

<H1 CLASS="red">Красный шрифт</H1>

<H1 CLASS="blue">Красный шрифт на синем фоне</H1>

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

<STYLE TYPE="text/css">
<!--
.red {color: red; }
.blue (color:red; background-color: blue}
-->
</STYLE>

Теперь два класса red и blue можно применять к любым элементам документа:

<P CLASS="red">Красный шрифт</P>
<P CLASS="blue">Красный шрифт на синем фоне</P>

Первый абзац отразится красным шрифтом, а второй - красным шрифтом на синем фоне.