Мультилассы

Описание

К любому элементу одновременно можно добавить несколько классов, перечисляя их в атрибуте 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>

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

Мультилассы

Описание

Синтаксис

Пример

Читайте также

Стиль для элемента, получающего фокус

Свойство mix-blend-mode

Свойство border-top-color

Применяется к дочернему элементу указанного типа

Свойство outline-style