FrontendBook | HTML Классы

HTML Классы

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

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

Атрибут class часто используется для указания на имя класса в таблице стилей. Он также может использоваться JavaScript для доступа и управления элементами с определенным именем класса. В следующем примере у нас есть три элемента <div> с атрибутом класса со значением «город». Все три элемента <div> будут иметь одинаковый стиль в соответствии с определением стиля .city в разделе заголовка:

В следующем примере у нас есть два элемента <span> с атрибутом class со значением «note». Оба элемента <span> будут иметь одинаковый стиль в соответствии с определением стиля .note в разделе заголовка:

Атрибут класса можно использовать в любом элементе HTML. Имя класса чувствительно к регистру!

Синтаксис использования class

Создать class напишите символ точки (.), за которым следует имя класса. Затем определите свойства CSS в фигурных скобках {}.

Синтаксис:

.название_класса {
свойство_1: значение;
свойство_2: значение;
...
}

Использование несколько классов

HTML-элементы могут принадлежать более чем одному классу. Чтобы определить несколько классов, разделите имена классов пробелом, например. <div class="city main">. Элемент будет оформлен в соответствии со всеми указанными классами. В следующем примере первый элемент <h2> принадлежит как классу города, так и основному классу, и получит стили CSS от обоих классов:

Разные элементы могут иметь один и тот же класс

Различные элементы HTML могут указывать на одно и то же имя класса. В следующем примере и <h2>, и <p> указывают на класс «город» и будут иметь один и тот же стиль: