Чтобы избежать повторения кода, мы используем несколько классов в HTML и CSS. С помощью CSS мы также можем определять и стилизовать оба класса вместе и использовать несколько классов в одном элементе, назначая им разные идентификаторы классов. Этому подходу можно следовать, используя синтаксис с разделителями-пробелами для добавления нескольких классов к одному элементу HTML.
В этой статье мы узнаем, как добавить несколько классов к одному элементу.
Как использовать несколько классов в CSS?
Чтобы использовать два или более классов в одном элементе, каждый идентификатор класса будет разделен пробелом.
Вы должны следовать следующему синтаксису, чтобы использовать несколько классов в одном элементе:
< h1 класс = 'класс_1 класс_2 класс_3' > передача... час >
В один элемент HTML можно включить более одного класса, разделив их пробелом. Для вашего удобства вот пример.
Пример: использование нескольких классов в CSS
В приведенном ниже примере мы создадим:
- Заголовок с помощью тега
и присвоение имени класса « заголовок ».
- Далее мы создадим еще один заголовок и назначим его двум разным классам: « заголовок ' а также ' линия ». Эти идентификаторы классов разделены пробелом:
HTML
h1 >
< h1 учебный класс знак равно 'линия заголовка' >
Несколько классов в Один элемент
h1 >
Теперь давайте перейдем к файлу CSS и применим некоторые свойства CSS, перечисленные ниже:
- Установите цвет фона для заголовка с помощью функции rgb() как « (69, 51, 151) ».
- Установите стиль шрифта « курсив » для заголовка.
В классе HTML первый заголовок использует имя класса « заголовок ». Итак, стиль, указанный в указанном классе, будет реализован на первом заголовке:
.заголовок {
цвет фона: rgb ( 69 , 51 , 151 ) ;
стиль шрифта: курсив
}
Для ' линия », у нас есть:
- Установите цвет заголовка с помощью функции rgb() как « (255, 0, 0) ».
- Примените строку оформления текста как « подчеркнуть ».
Во втором заголовке будут использоваться стили обоих классов: « заголовок ' а также ' линия ' учебный класс:
.линия {цвет: RGB ( 255 , 0 , 0 ) ;
строка оформления текста: подчеркивание;
}
После реализации проверяем результат:
Из вывода видно, что во втором заголовке используются оба класса CSS.
Вывод
Чтобы использовать несколько классов для одного элемента, используйте разные идентификаторы классов, разделенные пробелами. Используя это, мы можем одновременно применять разные свойства CSS. Это позволяет нам повторно использовать класс, в котором существуют похожие элементы. В этой статье объясняется, как использовать несколько классов в одном элементе и стилизовать его вместе с примером.