ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

HTML5 Учебник

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 Голова веб-страницы HTML Макеты HTML Адаптивность HTML Компьютерный код HTML Символьные объекты HTML Символы HTML Кодировка HTML URL кодирование HTML XHTML

HTML Формы

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

HTML5

HTML5 Введение HTML5 Поддержка HTML5 Новые элементы HTML5 Семантические элементы HTML5 Переход с HTML4 HTML5 Гид по стилю

HTML Графика

HTML Canvas HTML SVG

HTML Медиа

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 Цвета HTML Canvas HTML Аудио/Видео HTML Действующие Doctype HTML Наборы символов HTML URL кодировка HTML Кодировка языка HTTP Сообщения HTTP Методы PX в EM Конвертер Горячие клавиши

HTML5. Уроки для начинающих

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>

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