HTML атрибут class
HTML атрибут class
використовується для визначення класу для HTML елемента.
Кілька елементів HTML можуть спільно використовувати один і той же клас.
Використання атрибута class
Атрибут class
часто використовується для вказівки на назву класу в таблиці стилів. Він також може використовуватися JavaScript для доступу та керування елементами із зазначеним іменем класу.
У наступному прикладі ми маємо три елементи <div>
з атрибутом class
зі значенням "city". Усі три елементи <div>
будуть однаково стилізовані відповідно до визначення стилю .city
в розділі head:
Приклад
<!DOCTYPE html>
<html>
<head>
<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>
з атрибутом class
зі значенням "note". Обидва елементи <span>
будуть однаково стилізовані відповідно до визначення .note
у розділі head:
Приклад
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>Мій <span class='note'>важливий</span> заголовок</h1>
<p>Це якийсь <span class='note'>важливий</span> текст.</p>
</body>
</html>
Спробуйте самі »
Порада: Атрибут class
може бути використаний на будь-якому HTML елементі.
Примітка: Назва класу чутлива до регістру!
Порада: Ви можете дізнатись набагато більше про CSS у CSS Підручнику на нашому сайті W3Schools українською.
Синтаксис для класу
Створіть клас; напишіть символ крапки (.), а потім назву класу. Потім вкажіть CSS-властивості у фігурних дужках {}:
Приклад
Створіть клас з іменем 'city':
<!DOCTYPE html>
<html>
<head>
<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>
Спробуйте самі »
Кілька класів
Елементи HTML можуть належати більше ніж одному класу.
Щоб визначити кілька класів, відокремте назви класів пробілом, напр. <div class="city main">. Елемент буде стилізований відповідно до всіх вказаних класів.
У наступному прикладі перший елемент <h2>
належить як класу city
так і класу main
і отримає стилі CSS з обох класів:
Приклад
<h2 class="city main">Лондон</h2>
<h2 class="city">Париж</h2>
<h2
class="city">Токіо</h2>
Спробуйте самі »
Різні елементи можуть розділяти один і той же клас
Різні елементи HTML можуть вказувати на одну і ту ж назву класу.
У наступному прикладі як <h2>
так і <p>
вказує на "city" клас і буде поділяти однаковий стиль:
Використання атрибуту 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 Підручник на нашому сайті W3Schools українською.
Підсумок
- HTML атрибут
class
визначає одне або кілька імен класів для елемента - Класи використовуються CSS та JavaScript для вибору та доступу до певних елементів
- Атрибут
class
може використовуватися на будь-якому елементі HTML - Ім'я класу чутливе до регістру
- Різні елементи HTML можуть вказувати на одну і ту ж назву класу
- JavaScript може отримати доступ до елементів із певним іменем класу за допомогою методу
getElementsByClassName()
HTML Вправи
Для ознайомлення з повним списком усіх доступних HTML тегів відвідайте HTML Довідник тегів на нашому сайті W3Schools українською.
Запитання для самоконтролю
- Для чого потрібен HTML-атрибут
class
? - Скільки HTML-елементів можуть спільно використовувати один і той самий клас?
- Чи має значення регістр для написання назви класу?
- За допомогою якого символу вказується назва класу в CSS?
- Чи можуть HTML-елементи належати більше ніж одному класу?
- Чи може JavaScript використовувати імена класів?