Учебник HTML 

Урок 8. Классы (class) и идентификаторы (id)

Классы – самый распространенный в CSS элемент придания стиля большому количеству элементов на сайте или отдельной странице. И если, например, знак абзаца «p» задает свойства для всех абзацев:

p {font-family:Verdana; font-size:12px; margin:15px; align:Justify;}

то «класс» может применяться одновременно к разным элементам сайта, но только тогда, когда вам это нужно.
Для примера создадим класс «article_title». В таблице стилей его написание будет выглядеть следующим образом:

.article_title {
font-size:20px;
font-weight:bold;
color: #A72E37;
}

Класс «article_title» применяется у меня ко всем заголовкам статей, как нетрудно догадаться из его названия, однако, я применяю его и к заголовкам отдельных страниц, статьями не являющимися.

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

p.article_text {
font-size:12px;
color: #666666;
}

В данном случае класс будет работать только применительно к абзацам.

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

.special_knob {
border:1px solid #0080FF;
background-color:#CC6666;
margin-top:5px;
font-family:Verdana;
font-size:12px;
font-weight:bold;
}

Я применяю этот класс на своем сайте для задания стиля отдельным кнопкам.

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

Помимо группирования элементов по классам, вам может понадобиться идентифицировать один уникальный элемент. Это можно реализовать с помощью атрибута "id".
Особенность "id" в том, что в документе не может быть более одного элемента с данным конкретным "id". Каждый "id" должен быть уникальным. В других случаях используйте атрибут "class".

В таблице стилей "id" пишется так:

#special {color: #FF3333; }

а в HTML-документе он будет применен следующим образом:

<---тег id="special">

Текст, который мы хотим выделить красным цветом

Снова какой-то текст.

Это простой пример применения "id". Однако он подходит и для идентификации нескольких элементов, объединенных в группу:

#topmenu a:hover{
background-color: #cccccc; /*Фоновый цвет ячейки при наведение курсора*/
color: #000000;  /*Цвет текста при наведении курсора*/
}

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

Для лучшего освоения материала, советую потренироваться и поэкспериментировать с классами и "id" на какой-нибудь учебной странице. Это очень полезно и увлекательно!

См. также

• Следующий урок: Элементы "span" и "div". Учимся группировать элементы сайта
• Предыдущий урок: Свойства и значения (ссылки)