HTML-классы
Атрибут class в HTML
Атрибут класса HTML используется для указания одного или нескольких имен классов для элемента HTML. Имя класса может использоваться CSS и JavaScript для выполнения некоторых задач для элементов HTML. Вы можете использовать этот класс в CSS с определенным классом, напишите символ точки (.), а затем имя класса для выбора элементов.
Атрибут класса можно определить в теге <style> или в отдельном файле с помощью символа (.).
В документе HTML мы можем использовать одно и то же имя атрибута класса с разными элементами.
Определение класса HTML
Чтобы создать класс HTML, сначала определите стиль для класса HTML, используя тег <style> в разделе <head>, как показано в следующем примере:
<style>
.headings {
color: lightgreen;
font-family: cursive;
background-color: black;
}
</style>
</head>
У нас есть определенный стиль для имени класса «headings», и мы можем использовать это имя класса с любым элементом HTML, в котором мы хотим обеспечить такой стиль. Нам просто нужно следовать следующему синтаксису, чтобы использовать его.
<html>
<head>
<style>
.headings {
color: lightgreen;
font-family: cursive;
background-color: black;
}
</style>
</head>
<body>
<h1 class="headings">это первый заголовок</h1>
<p class="headings">это абзац с теми же стилями</p>
<a href="#" class="headings">это ссылка с тем же стилем</a>
</body>
</html>
Примечание. Вы можете использовать атрибут класса для любого элемента HTML. Имя класса чувствительно к регистру.
Атрибут class в JavaScript
Вы можете использовать элементы доступа JavaScript с указанным именем класса с помощью метода querySelector();
давайте для примера по клику на заголовок сменим надпись "нажми меня" на "ты нажал на меня".
<html>
<head>
<style>
.headings {
background-color: black;
color: #fff;
font-size: 40px;
}
</style>
</head>
<body>
<h1 class="headings">нажми меня</h1>
<script>
let head = document.querySelector(".headings");
head.addEventListener("click", function(e) {
e.preventDefault();
head.innerHTML = "ты нажал на меня";
})
</script>
</body>
</html>
Несколько классов
Вы можете использовать несколько имен классов (более одного) с элементами HTML. Эти имена классов должны быть разделены пробелом.
<html>
<head>
<style>
.headings {
background-color: black;
color: #fff;
font-size: 40px;
}
.center {
text-align: center;
}
</style>
</head>
<body>
<h1 class="headings center">два класса</h1>
</body>
</html>
Вы можете использовать одно и то же имя класса с разными тегами, такими как <h2> и <p> и т. д., чтобы использовать один и тот же стиль.
