HTML Атрибут class

❮ Назад Глобальные атрибуты HTML Далее ❯

Пример

Использование атрибута class в документ HTML:

<html>
<head>
<style>
h1.intro {
color: blue;
}

p.important {
color: green;
}
</style>
</head>
<body>

<h1 class="intro">Заголовок 1</h1>
<p>Параграф.</p>
<p class="important">Обратите внимание, что это важный пункт. :)</p>

</body>
</html>

Попробуйте сами »

Больше примеров "Попробуйте сами" ниже.

Определение и использование

Атрибут class указывает одно или несколько имен классов для элемента.

Атрибут class в основном используется для указания класса в таблице стилей. Однако он также может использоваться JavaScript (через DOM HTML) для внесения изменений в элементы HTML с указанным классом.

Поддержка браузеров

Атрибут
class	Да	Да	Да	Да	Да

Различий между HTML 4.01 и HTML5

В HTML5 атрибут class может использоваться в любом элементе HTML (он будет проверять любой элемент HTML. Однако, это не обязательно).

В HTML 4.01 атрибут class нельзя использовать в: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, и <title>.

Синтаксис

<element class="classname">

Значение атрибута

Значение	Описание
classname	Задает одно или несколько имен классов элементу. Чтобы указать несколько классов, разделите имена классов пробелом, например <span class="left important">. Это позволяет объединить несколько классов CSS для одного элемента HTML. Правила наименования: Должно начинаться с буквы A-Z или a-z Может сопровождаться: Литералы (A-Za-z), десятичные знаки (0-9), дефисы ("-"), и подчеркивание ("_")

Значение

Описание

classname

Задает одно или несколько имен классов элементу. Чтобы указать несколько классов, разделите имена классов пробелом, например <span class="left important">. Это позволяет объединить несколько классов CSS для одного элемента HTML.

Правила наименования:

Должно начинаться с буквы A-Z или a-z
Может сопровождаться: Литералы (A-Za-z), десятичные знаки (0-9), дефисы ("-"), и подчеркивание ("_")

Больше Примеров

Пример

Добавление нескольких классов к одному элементу HTML:

<!DOCTYPE html>
<html>
<head>
<style>
h1.intro {
    color: blue;
    text-align: center;
}

.important {
    background-color: yellow;
}
</style>
</head>
<body>

<h1 class="intro important">Заголовок 1</h1>
<p>Параграф.</p>

</body>
</html>

Попробуйте сами »