Логотип schoolsw3.com
Учебники Справочники Упражнения КАК? Меню
Создать
Редактор Поддержка Форум

×
Учебники
Справочники
Упражнения
Пожертвовать Обновление Реклама Видео Магазин

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

HTML Формы

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

HTML Графика

HTML Холст HTML SVG

HTML Медиа

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

HTML APIы

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

HTML Примеры

HTML Примеры HTML Викторина HTML Упражнения HTML Сертификат HTML Заключение HTML Специальные возможности

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

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

HTML Классы



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>