на главную
Каскадные таблицы стилей CSS2

Селекторы класса

Обычные классы

Селекторы класса позволяют задавать различные стилевые описания для одного и того же HTML-элемента. Название класса указывается после названия элемента и отделяется точкой.

div.red { color: #FF0000; }
div.blue { color: #0000FF; }
div.fantasy { color: rosybrown; font-size: 24px; }

Универсальный селектор класса

При определении с помощью универсального селектора класс не связывается с конкретным элементом. Такой класс можно применять с любыми элементами, для которых объявленные стилевые свойства имеют смысл. Формально, в таком описании вместо имени элемента следует ставить символ  * , например,

*.spring { color: mediumspringgreen; },

однако на практике допустима следующая запись без  * :

.spring { color: mediumspringgreen; }

Применение классов стилей

Определенный в таблице стилей класс связывается с HTML-элементм при помощи атрибута class. Для объявленных выше классов в документе HTML (XHTML) это можно сделать, например, так:

<div class="red">...
<div class="fantasy">...
<div class="spring">...
<p class="spring">...
<td class="spring">...

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

Скажем, контент требует выделения особым стилем эпиграфов, терминов, неких особых ссылок. Тогда можно ввести, например, классы

.epigraph {text-align:right; font-style:italic;}
.term {background:pink;}
a.special {color:navy; font-weight:bold; text-decoration:underline;}