Мультилассы
Описание
К любому элементу одновременно можно добавить несколько классов, перечисляя их в атрибуте class через пробел. В этом случае к элементу применяется стиль, описанный в правилах для каждого класса. Поскольку при добавлении нескольких классов они могут содержать одинаковые стилевые свойства, но с разными значениями, то берётся значение у класса, который описан в коде ниже.
Синтаксис
.class1.class2 { Описание правил стиля }Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
.level1 {
font-size: 1em;
}
.level2 {
font-size: 1.2em;
}
.level3 {
font-size: 1.4em;
}
.level4 {
font-size: 1.6em;
}
.level5 {
font-size: 1.8em;
}
.level6 {
font-size: 2em;
}
a.tag {
color: #ff3030; /* Цвет ссылок */
}
</style>
<div>
<a href='/term/2' class='tag level6'>Paint.NET</a>
<a href='/term/69' class='tag level6'>Photoshop</a>
<a href='/term/3' class='tag level5'>цвет</a>
<a href='/term/95' class='tag level5'>фон</a>
<a href='/term/11' class='tag level4'>палитра</a>
<a href='/term/43' class='tag level3'>слои</a>
<a href='/term/97' class='tag level2'>свет</a>
<a href='/term/44' class='tag level2'>панели</a>
<a href='/term/16' class='tag level1'>линия</a>
<a href='/term/33' class='tag level1'>прямоугольник</a>
<a href='/term/14' class='tag level1'>пиксел</a>
<a href='/term/27' class='tag level1'>градиент</a>
</div>
</body>
</html>Читайте также
Стиль активного элемента
Определяет стиль активного элемента. Это такое состояние элемента, которое происходит между щелчком и отпусканием клавиши мыши. В основном применяется...
Свойство text-overflow
Определяет параметры видимости текста в блоке, если текст целиком не помещается в заданную область. Возможны два варианта: текст обрезается; текст обр...
Свойство justify-content
Определяет, как браузер распределяет пространство вокруг флекс - элементов вдоль главной оси контейнера....
Стиль первого символа в тексте
Псевдоэлемент ::first-letter определяет стиль первого символа в тексте элемента, к которому добавляется. К этому псевдоэлементу могут применяться толь...