САЙТ НАХОДИТСЯ В РАЗРАБОТКЕ

HTML Учебник

HTML Главная HTML Введение HTML Редакторы HTML Основы HTML Элементы HTML Атрибуты HTML Заголовки HTML Параграфы HTML Стили HTML Форматирование HTML Цитаты HTML Комментарии HTML Цвета HTML CSS HTML Ссылки HTML Изображения HTML Таблицы HTML Списки HTML Блоки HTML Класс HTML Идентификатор HTML Фреймы HTML JavaScript HTML Пути к файлам HTML Head HTML Макеты HTML Адаптивность HTML Компьютерный код HTML Семантика HTML Объект HTML Символы HTML Emojis HTML Кодировка HTML URL кодирование HTML XHTML HTML Гид по стилю

HTML Формы

HTML Формы HTML Элементы формы HTML Тип ввода HTML Атрибуты ввода

HTML 5

HTML5 Введение HTML5 Поддержка HTML5 Новые элементы HTML5 Переход

HTML Графика

HTML Canvas HTML SVG

HTML Media

HTML Медиа HTML Видео HTML Аудио HTML Плагины HTML YouTube

HTML API

HTML Геолокация HTML Drag/Drop HTML Web хранилище HTML Web работник HTML SSE

HTML Примеры

HTML Примеры HTML Викторина HTML Упражнения HTML Резюме HTML Доступность

HTML Справочник

HTML Список тегов HTML Атрибуты HTML Глоб. атрибуты HTML События HTML Цвета HTML Canvas HTML Аудио/Видео HTML Набор символов HTML DOCTYPE HTML URL Кодирование HTML Коды языков HTML Коды стран HTTP Сообщений HTTP Метод PX в EM Конвертер Горячие клавиши
Баннер ТОП

HTML атрибут class


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

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

Таким образом, все элементы HTML с одинаковым атрибутом class получают одинаковый стиль.

Например, есть три элемента <div> которые имеют одно и то же имя класса:

Пример

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
  background-color: black;
  color: white;
  margin: 20px;
  padding: 20px;
}
</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>
Попробуйте сами »

Использование атрибута класса в 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 Упражнения

Проверьте себя с помощью упражнений

Упражнение:

Создайте селектор класса с именем "special".

Добавьте свойство цвета со значением "blue" внутри "special" класса.

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

  ;

</style>
</head>
<body>

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

</body>
</html>

Начать упражнение