Главная » Руководство по HTML – HTML5 введение » Атрибут class HTML

Атрибут class HTML

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

Несколько элементов HTML могут иметь один и тот же класс.

Использование атрибута class

Атрибут class часто используется для указания имени класса в таблице стилей. Он также может использоваться JavaScript для доступа и управления элементами с определенным именем класса.

В следующем примере у нас есть три элемента <div> с атрибутом class со значением "city". Все три элемента <div> будут иметь одинаковый стиль в соответствии с определением стиля .city в разделе head:

Москва

Москва столица России.

Берлин

Берлин столица Германии.

Токио

Токио столица Японии.

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: rgba(137,171,204,1);
  color: white;
  border: 2px solid white;
  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 в разделе заголовка:

Мой Важный Заголовок

Это некоторый важный текст.

<!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. Имя класса чувствительно к регистру!

Синтаксис атрибута Class

Для того чтобы создать класс; напишите символ точки (.), за которым следует имя класса. Затем определите свойства CSS в фигурных скобках {}.

Используйте CSS для стилизации элементов с именем класса "city":

Москва

Москва столица России.

Берлин

Берлин столица Германии.

Токио

Токио столица Японии.

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: rgba(137,171,204,1);
  color: white;
  border: 2px solid white;
  margin: 20px;
  padding: 20px;
}
</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 принадлежат классу "city". Кроме того, Москва также относится к классу "main", который выравнивает текст по центру.

<h2 class="city main">Москва</h2>
<h2 class="city">Берлин</h2>
<h2 class="city">Токио</h2>

Один атрибут Class для разных элементов

Различные элементы HTML могут указывать на одно и то же имя класса.

В следующем примере и <h2>, и <p> указывают на класс "city" и будут иметь один и тот же стиль:

Берлин

Берлин столица Германии

Даже если два элемента имеют разные имена тегов, они оба могут указывать на один и тот же класс и иметь один и тот же стиль CSS.

<h2 class="city">Берлин</h2>
<p class="city">Берлин столица Германии.</p>

Использование атрибута Class в JavaScript

Имя класса также может использоваться JavaScript для выполнения определенных задач для определенных элементов.

JavaScript может получить доступ к элементам с определенным именем класса с помощью метода getElementsByClassName():

<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
   x[i].style.display = "none";
  }
}
</script>

Краткое содержание

HTML Атрибут class указывает одно или несколько имен классов для элемента;
Классы используются CSS и JavaScript для выбора и доступа к определенным элементам;
Атрибут class можно использовать в любом элементе HTML;
Имя класса чувствительно к регистру;
Различные элементы HTML могут указывать на одно и то же имя класса;
JavaScript может получить доступ к элементам с определенным именем класса с помощью метода getElementsByClassName().

☛ Атрибут id HTML

Блочные и встроенные элементы HTML ☚

Поделиться ссылкой