ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP КАК СДЕЛАТЬ W3.CSS JQUERY XML JAVA БОЛЬШЕ 🔍 ◑ КНИГИ СПРАВОЧНИКИ УПРАЖНЕНИЯ
HTML5. Уроки для начинающих

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">Мой параграф</p>

</body>
</html>

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

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