САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

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 Мета теги HTML Методы верстки HTML Адаптивный дизайн HTML Компьютерный код HTML Симантика HTML Руководство HTML Сущности HTML Символы HTML Эмодзи HTML Кодировка HTML URL Кодировка HTML vs. XHTML

HTML Формы

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

HTML Графика

HTML Canvas HTML SVG

HTML Медиа

HTML Медиа формат HTML Video HTML Audio HTML Плагины HTML YouTube

HTML API

HTML Геолакация HTML Перетаскивание HTML Веб хранилище HTML Веб работник HTML SSE

HTML Примеры

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

HTML Справочники

HTML Список Тегов HTML Атрибуты HTML Глобальные Атрибуты HTML Поддержка Браузера HTML События HTML Цвета HTML Холст HTML Аудио/Видео HTML Типы Документов HTML Кодировка Символов HTML URL Кодировка HTML Коды Языка HTTP Сообщения HTTP Методы PX в EM Конвертер Клавишные Комбинации

HTML Классы - атрибут Class



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

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

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

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

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

Пример

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: black;
  color: 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>

Результат:

Лондон

Лондон - столица Англии.

Париж

Париж - столица Франции.

Токио

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

Попробуйте сами »


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

Атрибут class также может быть использован для встроенных элементов:

Пример

<!DOCTYPE html>
<html>
<head>
<style>
.note {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>

<h1>Мой <span class="note">Important</span> Заголовок</h1>
<p>Это уже кое-что <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">Лондон</h2>
<p>Лондон - столица Англии.</p>

<h2 class="city">Париж</h2>
<p>Париж - столица Франции.</p>

<h2 class="city">Токио</h2>
<p>Токио - столица Японии.</p>

Результат:

Лондон

Лондон - столица Англии.

Париж

Париж - столица Франции.

Токио

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

Попробуйте сами »

Несколько классов

HTML элементы могут иметь более одного имени класса.

Чтобы указать несколько классов, разделите имена классов пробелом, например <div class="city main">. Это позволяет объединить несколько классов CSS для одного HTML элемента.

В следующем примере первый элемент <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 Учебник.


Краткое содержание главы

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

HTML Упражнения

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

Упражнение:

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

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

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

  ;

</style>
</head>
<body>

<p class="special">Мой параграф</p>

</body>
</html>

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