ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

HTML Ссылки

HTML по Алфавиту HTML по Категориям HTML Атрибуты Тегов HTML Атрибуты Глобал HTML Атрибуты Событий HTML Цвета HTML Холсты HTML Аудио / Видео HTML Наборы символов HTML DOCTYPEs HTML Кодирование URL HTML Языковые коды HTML Коды стран HTTP Ответы сервера HTTP Методы PX в EM конвертер Горячие клавиши



HTML class Атрибут


Пример

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

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

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

<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Note that this is an important paragraph. :)</p>

</body>
</html>

Подробнее примеры ниже.


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

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

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


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

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

Различия между HTML 4,01 и HTML5

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

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


Синтаксис

<element class="classname">

Значения атрибутов

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

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

  • Должен начинаться с буквы A-Z or 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">Header 1</h1>
<p>A paragraph.</p>

</body>
</html>

Похожие страницы

HTML Учебник: HTML Атрибуты

CSS Учебник: CSS Синтаксис

CSS Ссылки: CSS .class Селектор

HTML DOM Reference: HTML DOM getElementsByClassName() Method

HTML DOM Reference: HTML DOM className Свойство

HTML DOM Reference: HTML DOM classList Свойство

HTML DOM Reference: HTML DOM Style Объекта