HTML. Классы. Атрибут class
Курс по основам HTML. W3Schools на русском. Уроки для начинающих
HTML. Для чего нужен атрибут класса - class? Использование атрибута class
HTML атрибут class используется для определения одинаковых стилей для элементов с тем же именем класса. Таким образом, все HTML-элементы с одинаковыми атрибутами класса будут иметь один и тот же формат и стиль.
Например, мы имеем три элемента <div>, которые указывают одно имя класса:
Пример:
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: black;
color: white;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
Результат:
London
London is the capital of England.
Paris
Paris is the capital of France.
Tokyo
Tokyo is the capital of Japan.
Использование атрибута class на встроенных элементах
HTML атрибут class также можно использовать для встроенных элементов:
Пример:
<!DOCTYPE html>
<html>
<head>
<style>
span.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>
Попробуйте сами »
Совет: Атрибут class можно использовать на любом элементе HTML.
Примечание: Название класса чувствительно к регистру!
Совет: Вы можете узнать больше про CSS в Учебнике по CSS.
Выберите элементы с определённым классом
В CSS, чтобы выбрать элементы с определённым классом, напишите символ точки (.), за которым следует имя класса:
Пример:
Используйте CSS для стилизации всех элементов с названием класса "city":
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
Результат:
London
London is the capital of England.
Paris
Paris is the capital of France.
Tokyo
Tokyo is the capital of Japan.
Несколько классов
HTML элементы могут иметь больше одного имени класса, каждое имя класса может быть разделено пробелом.
Пример:
Элементы стиля с названием класса "city", также стилевые элементы с названием класса "main":
<h2
class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2
class="city">Tokyo</h2>
Попробуйте сами »
В приведённом выше примере первый элемент <h2> принадлежит как классу "city", так и классу "main".
Разные теги могут использовать один и тот же класс
Разные теги, такие как <h2> и <p>, могут иметь одинаковое имя класса и тем самым использовать один и тот же стиль:
Пример:
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>
Попробуйте сами »
Использование атрибута class в JavaScript
Название класса может также использоваться JavaScript для выполнения некоторых задач для элементов с заданным именем класса. JavaScript может получать доступ к элементам из указанным именем класса с помощью метода getElementsByClassName():
Пример:
Когда пользователь нажимает кнопку, прячутся все элементы с названием класса "city":
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length;
i++) {
x[i].style.display = "none";
}
}
</script>
Попробуйте сами »
Примечание: Узнать больше про JavaScript можно в разделе HTML JavaScript или в Учебнике по JavaScript.
Проверьте себя с помощью упражнений!
Примечание: Для получения полного списка всех доступных HTML тегов, посетите Справочник HTML тегов.