Как добавить 2 класса html

Результат применения классов к тегам и показан на рис. 8.2.

Рис. 8.2. Вид тегов, оформленных с помощью классов

Классы удобно использовать, когда нужно применить стиль к разным элементам веб-страницы: ячейкам таблицы, ссылкам, абзацам и др. В примере 8.3 показано изменение цвета фона строк таблицы для создания «зебры».

Пример 8.3. Использование классов

HTML5 CSS 2.1 IE Cr Op Sa Fx

        АлмазАметистСапфир
Название
Цвет
Твердость по Моосу
 
 
Белый
10
 
 
Рубин
Красный
9
 
 
Голубой
7
 
 
Изумруд
Зеленый
8
 
 
Голубой
9
 
 
  

Рис. 8.3. Результат применения классов

Одновременное использование разных классов

К любому тегу одновременно можно добавить несколько классов, перечисляя их в атрибуте class через пробел. В этом случае к элементу применяется стиль, описанный в правилах для каждого класса. Поскольку при добавлении нескольких классов они могут содержать одинаковые стилевые свойства, но с разными значениями, то берётся значение у класса, который описан в коде ниже.

В примере 8.4 показано использование разных классов для создания облака тегов.

Пример 8.4. Сочетание разных классов

HTML5 CSS 2.1 IE Cr Op Sa Fx

        
Paint.NET Photoshop цвет фон палитра слои свет панели линия прямоугольник пиксел градиент 
  

Результат данного примера показан на рис. 8.4.

Рис. 8.4. Облако тегов

В стилях также допускается использовать запись вида .layer1.layer2 , где layer1 и layer2 представляют собой имена классов. Стиль применяется только для элементов, у которых одновременно заданы классы layer1 и layer2 .

Вопросы для проверки

1. Какое имя класса написано правильно?

1. 2layer1
2. 1layer
3. Яndex
4. pink-floyd
5. 28_days_later

2. Какой цвет будет у слова «потока» в коде?

При использовании следующего стиля?

1. Зелёный.
2. Синий.
3. Жёлтый.
4. Оранжевый.
5. Чёрный.

1. div[iddqd]
2. div.iddqd
3. iddqd.div
4. div#iddqd
5. div=iddqd

4. Какое имя класса следует добавить к тегу , чтобы текст был одновременно жирным и красного цвета, если имеется следующий стиль?

Как добавить в html-элемент несколько классов?

Чтобы добавить в html-элемент несколько классов, можно воспользоваться методом classList.add() у элемента. Этот метод может принимать любое количество параметров. Каждый из этих параметров должен быть строкой — это имя класса, которое нужно добавить:

// создаём новый элемент const el = document.createElement('div'); // добавляем классы el.classList.add('first', 'second'); // После всех изменений el.className; // first second 

Также можно добавлять классы отдельными вызовами метода:

// создаём новый элемент const el = document.createElement('div'); // добавляем первый класс el.classList.add('first'); // добавляем второй класс el.classList.add('second'); // После всех изменений el.className; // first second 

Имена классов должны соответствовать правилам именования, то есть, например, не должны содержать пробельные символы. Такой код выдаст ошибку:

const el = document.createElement('div'); el.classList.add('first second'); // ошибка! Имя класса задано неверно 

14 марта 2023

В особых случаях можно использовать className . Хоть он служит для этих же целей, но имеет некоторые особенности. Например, так мы добавим ряд классов описав их одной строкой.

document.body.className = 'page page--contact theme-light'; 

Каждый раз мы запиcываем новые значение в атрибут класса. Бывает удобно при создании элемента. Или, наоборот, можем быстро удалить все классы указав className = » .

document.body.className = '' // удаляем все классы