Опубликовано: 25.06.2010 Последняя правка: 10.12.2015
HTMLXHTML
IEChromeFireFoxOperaSafari

Атрибут class

Атрибут class используется для работы с Каскадными таблицами стилей и служит для указания классов CSS, к которым будет принадлежать данный HTML-элемент. Причем на одной веб-странице может быть сколько угодно тегов с одинаковым классом.

Атрибут class появился в HTML довольно давно (с появлением CSS) и так же давно поддерживается большинством HTML-тегов. Однако, начиная с версии HTML 5, его разрешено указывать вообще для всех элементов. Поэтому те теги, на страницах которых вы увидите напротив class логотип HTML 5 (Логотип HTML 5), начали поддерживать его именно с этой версии HTML. Впрочем, таких тегов очень мало.

Значения

Значением атрибута class является одно или несколько (через пробел) произвольных слов, каждое из которых обозначает один из классов, к которым принадлежит элемент. Эти слова называются именами классов и могут состоять только из символов латинского алфавита (a-z, A-Z), цифр (0-9), символов дефиса (-) и подчеркивания (_). Причем имя класса не может начинаться с цифры или дефиса, за которым следует цифра.

Значение по умолчанию: нет.

Синтаксис

<div class="значение">...</div>
<body class="значение1 значение2">...</body>
<strong class="значение1 значение2 значение3">...</strong>

Обязательный атрибут: нет.

Пример HTML: применение атрибута class

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - атрибут class</title>
  <style type="text/css">
   .zeleniy {
    color: green; /* зеленый цвет текста */
   }
   .bold {
    font-weight:bold; /* жирный шрифт */
   }
   .podcherk {
    text-decoration: underline; /* подчеркивание */
   }
  </style>
 </head>
 <body>
  <h1 class="zeleniy podcherk">Пример использования классов</h1>
  <p class="bold">В этом примере были использованы классы, чтобы
    с помощью CSS изменить внешний вид заголовка и текста параграфа.</p>
 </body>
</html>

Результат примера

Результат: Применение атрибута class.

Применение атрибута class

Поддержка версиями HTML

Версия:HTML 4.01HTML 5XHTML 1.0XHTML 1.1
Поддержка:ДаДаДаДа

Поддержка браузерами

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ДаДаДаДаДа