Атрибут class
Атрибут class используется для работы с Каскадными таблицами стилей и служит для указания классов CSS, к которым будет принадлежать данный HTML-элемент. Причем на одной веб-странице может быть сколько угодно тегов с одинаковым классом.
Атрибут class появился в HTML довольно давно (с появлением CSS) и так же давно поддерживается большинством HTML-тегов. Однако, начиная с версии HTML 5, его разрешено указывать вообще для всех элементов. Поэтому те теги, на страницах которых вы увидите напротив class логотип 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" "https://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.
Поддержка версиями HTML
| Версия: | HTML 4.01 | HTML 5 | XHTML 1.0 | XHTML 1.1 |
| Поддержка: | Да | Да | Да | Да |
Поддержка браузерами
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari |
| Версия: | 6.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
| Поддержка: | Да | Да | Да | Да | Да |