НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
HTML CSS JAVASCRIPT SQL PHP PYTHON JAVA KOTLIN GO C C++ C# AI W3.CSS TypeScript Як зробити? ДОВІДНИКИ БІЛЬШЕ 🔍 ◑ ВПРАВИ
HTML5. Уроки для початківців. W3Schools українською

En Es De

HTML Атрибут class

❮ Prev Next ❯

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" клас і буде поділяти однаковий стиль:

Приклад

<h2 class="city">Париж</h2>
<p class="city">Париж - це столиця Франції</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 Підручник на нашому сайті W3Schools українською.

Підсумок

  • HTML атрибут class визначає одне або кілька імен класів для елемента
  • Класи використовуються CSS та JavaScript для вибору та доступу до певних елементів
  • Атрибут class може використовуватися на будь-якому елементі HTML
  • Ім'я класу чутливе до регістру
  • Різні елементи HTML можуть вказувати на одну і ту ж назву класу
  • JavaScript може отримати доступ до елементів із певним іменем класу за допомогою методу getElementsByClassName()

HTML Вправи

Перевірте себе за допомогою вправ

Вправа:

Створіть селектор класу з іменем 'special'.

Додайте властивість кольору зі значенням 'blue' всередині класу 'special'.

<!DOCTYPE html>
<html>
<head>
<style>

  ;

</style>
</head>
<body>

<p class='special'>My paragraph</p>

</body>
</html>

Для отримання повного списку всіх доступних HTML тегів відвідайте HTML Довідник тегів на нашому сайті W3Schools українською.

Запитання для самоконтролю

  • Для чого потрібен HTML-атрибут class?
  • Скільки HTML-елементів можуть спільно використовувати один і той самий клас?
  • Чи має значення регістр для написання назви класу?
  • За допомогою якого символу вказується назва класу в CSS?
  • Чи можуть HTML-елементи належати більше ніж одному класу?
  • Чи може JavaScript використовувати імена класів?
❮ Prev Next ❯

✍ Коментарі