ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML CSS JAVASCRIPT SQL PHP PYTHON JAVA KOTLIN GO C C++ C# AI W3.CSS TypeScript Как сделать? СПРАВОЧНИКИ БОЛЬШЕ 🔍 ◑ УПРАЖНЕНИЯ
HTML5. Уроки для начинающих. W3Schools на русском

Ua En Es De Fr

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 Классы — Видеоурок W3Schools

В этом видео объясняется атрибут class и как его использовать в HTML.

Часть серии видеоуроков по изучению HTML для начинающих!

Вопросы для самоконтроля

  • Для чего нужен HTML-атрибут class?
  • Сколько HTML-элементов могут совместно использовать один и тот же класс?
  • Имеет ли значение регистр для написания названия класса?
  • С помощью какого символа указывается название класса в CSS?
  • Могут ли HTML-элементы принадлежать более чем одному классу?
  • Можно ли JavaScript использовать имена классов?
❮ Prev Next ❯