Урок №20. HTML. Класи. Атрибут class

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



HTML/CSS. Для чого потрібен атрибут класу - class в HTML-коді на веб-сторінках? Використання атрибуту 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 тегів.



warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.