Что такое класс в HTML

Дата последнего обновления статьи: 2025-03-01

Класс (или class) HTML — это атрибут, который используется для задания одной или нескольких категорий (классов) элементам документа. Этот атрибут позволяет разработчикам применять стили CSS и JavaScript к группе элементов, что упрощает их стилизацию и манипуляцию.

Основные способы использования классов в HTML

Множественные классы

Один элемент может иметь несколько классов, разделенных пробелами. Это позволяет комбинировать стили и поведение. Например:

<div class="box highlight"></div>

Селекторы CSS

Классы могут быть использованы в CSS для применения стилей. Например:

.box {
  padding: 10px;
  border: 1px solid #000;
}

.highlight {
  background-color: yellow;
}

JavaScript

Классы также могут быть использованы в JavaScript для выбора элементов и управления ими. Например:

const elements = document.getElementsByClassName('highlight');

for (let i = 0; i < elements.length; i++) {
  elements[i].style.color = 'red';
}

Пример использования класса в HTML

<html>
  <head>
    <title>Пример класса</title>
    <style>
      .box {
        padding: 20px;
        border: 1px solid #ccc;
        margin: 10px;
      }

      .highlight {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="box">Это обычный блок.</div>
    <div class="box highlight">Это стилизованный блок.</div>
  </body>
</html>

Заключение

Классы являются мощным инструментом для организации и стилизации HTML-документов. Они позволяют легко применять стили и управлять поведением элементов на странице, что делает разработку более гибкой и эффективной.

Подробнее о классах можно узнать на MDN.

Предыдущая страница

Следующая страница