Глобальный атрибут HTML class
Не бойтесь врагов, бойтесь друзей. Предают друзья, а не враги.
25-февраля-2024, 12:45 7 0
Глобальный атрибут class в HTML задает стилевое оформление определённым тегам к которым он применён. Простым языком с помощью данного атрибута мы можем задать оформление тому или иному элементу html. Будь то параграф или контейнер , заголовок , текст, цвет и прочее. Допустимо использовать несколько классов - разделяются просто с помощью пробела. Это позволяет вам комбинировать несколько классов CSS для одного элемента HTML. При написании имён классов можно использовать только латинские буквы (A–Z, a–z), цифры (0–9), символ дефиса (-) и подчеркивания (_). Использование кириллицы недопустимо.
Использование атрибута 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 в основном используется для указания на класс в таблице стилей. Однако он также может использоваться jаvascript (через HTML DOM) для внесения изменений в элементы HTML с указанным классом.
Синтаксис
<element class="classname">Добавьте несколько классов к одному элементу 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>Использование jаvascript для добавления красного цвета фона к первому элементу с class="example" (индекс 0).
var x = document.getElementsByClassName("example");
x[0].style.backgroundColor = "red";Использование jаvascript для добавления класса «mystyle» к элементу с id="myDIV":
document.getElementById("myDIV").classList.add("mystyle");
