Атрибут HTML class
Атрибут class задаёт класс для элемента HTML. Несколько элементов могут иметь один и тот же класс.
Атрибут class
Атрибут class обычно указывает на имя класса в таблице стилей, поэтому элемент получает этот стиль. Он также может использоваться в JavaScript для поиска и изменения элементов с заданным классом. Несколько элементов с одним классом оформляются одинаково.
Совет: Атрибут class можно использовать на любом элементе. Примечание: Имя класса чувствительно к регистру.
Три div с классом
Три div, использующие класс city, все оформлены одинаково.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>Лондон</h2>
<p>Лондон — столица Англии.</p>
</div>
<div class="city">
<h2>Париж</h2>
<p>Париж — столица Франции.</p>
</div>
<div class="city">
<h2>Токио</h2>
<p>Токио — столица Японии.</p>
</div>
</body>
</html>
Два span с классом
Два span, использующие класс note.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>Мой <span class="note">важный</span> заголовок</h1>
<p>Это <span class="note">важный</span> текст.</p>
</body>
</html>
Синтаксис для класса
Чтобы создать класс, напишите точку (.), за которой следует имя класса, затем поместите свойства CSS в фигурные скобки.
Пример
Определение и использование класса с именем city.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="city">Лондон</h2>
<p>Лондон — столица Англии.</p>
<h2 class="city">Париж</h2>
<p>Париж — столица Франции.</p>
<h2 class="city">Токио</h2>
<p>Токио — столица Японии.</p>
</body>
</html>
Несколько классов
Элемент может принадлежать более чем одному классу. Разделяйте имена классов пробелом (например, класс city и класс main вместе), и элемент получит стили из всех них.
Пример
Элемент с двумя классами, получающий стили из обоих.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
.main {
text-align: center;
}
</style>
</head>
<body>
<h2 class="city main">Лондон</h2>
<h2 class="city">Париж</h2>
<h2 class="city">Токио</h2>
</body>
</html>
Разные элементы могут иметь одинаковый класс
Разные элементы могут использовать одно и то же имя класса и разделять его стиль.
Пример
<h2> и <p>, использующие класс city.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="city">Париж</h2>
<p class="city">Париж — столица Франции</p>
</body>
</html>
Использование атрибута class в JavaScript
JavaScript может использовать имя класса для работы с определёнными элементами. Метод getElementsByClassName() находит все элементы с заданным классом.
Не переживайте, если код вам незнаком; вы узнаете больше в главе HTML JavaScript.
Пример
Кнопка, скрывающая все элементы с классом city.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>Нажмите кнопку, чтобы скрыть все элементы с именем класса "city":</p>
<button onclick="myFunction()">Скрыть элементы</button>
<div class="city">
<h2>Лондон</h2>
<p>Лондон — столица Англии.</p>
</div>
<div class="city">
<h2>Париж</h2>
<p>Париж — столица Франции.</p>
</div>
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
</body>
</html>
Итоги главы
Подведём итог: атрибут class задаёт одно или несколько имён классов для элемента. Классы используются CSS и JavaScript для выбора элементов, могут применяться к любому элементу, а имя класса чувствительно к регистру. Разные элементы могут иметь общий класс, и JavaScript может получить к ним доступ с помощью getElementsByClassName().