Сегодня: 24 апреля 2024 г., среда Время:

Online-учебник по CSS

Автор учебника: Евгений Андросов

Урок 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;
}

Теперь, когда нам надо, мы можем применить этот класс к любому объекту сайта, например к абзацу:

Или выделенному участку текста:

Я взял этот пример из главной таблицы стилей, отвечающей за стиль сайта www.freeadvice.ru. Класс «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". Однако он подходит и для идентификации нескольких элементов, объединенных в группу:

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

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

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

Предыдущий урок | К началу урока | К оглавлению | Следующий урок

Непонятно? Есть вопросы?
Задайте их прямо сейчас и получите ответ автора учебника!

Комментарий добавил(а): Антон
Дата: 11.06.2013

У меня не получается добавить классы. Я в отдельный блокнот скопировал и вставил это: .article_title { font-size:20px; font-weight:bold; color: #A72E37; } сохранил как article_title.css В другой блокнот вставил содержимое урока 5 по HTML, изменив код вот так: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Ваш первый сайт</title> </head> <body> Поздравляю! Это ваш первый сайт, который вы сделали своими руками! Хотите пойти дальше и cделать настоящий сайт? Тогда читайте статью дальше. <a href="http://www.freeadvice.ru/view_article.php?id=9">Вернуться назад</a> </body> </html> Подскажите, что не так?

Комментарий добавил(а): Антон
Дата: 11.06.2013

извините что несколько раз писал один комментарий. Просто компьютер завис

Задать вопрос

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