98. Несколько классов
В предыдущем уроке мы для каждого элемента применяли не более одного класса. В CSS можно применять несколько классов к одному элементу, для этого имена классов нужно разделять пробелом, например, как в примере 1.
абзац
Почему удобно применять несколько классов к одному элементу? Рассмотрим HTML код 2 примера.
абзац 1
И CSS код для примера 2.
.bold font-weight: bold;
>
.color_red color: red;
>Во-первых, порядок перечисления имен классов не имеет значения. Во-вторых, мы можем писать любое количество классов для элемента.
Вернемся к примерам 2 и 3. Запустив данный код, вы увидите, что первый абзац красного цвета и у него полужирное начертание, второй абзац только с полужирным начертанием, а третий, просто красный. То есть в первом абзаце, где мы написали два класса: bold и color_red , мы комбинировали красный цвет и полужирное начертание.
Используем два класса
Общее оформление для всех преимуществ готово, теперь надо «раскидать» их по тарифам.
Вспомните, как мы отделили элементы-преимущества от обычных элементов. Мы добавили им класс, который говорит, что перед нами преимущество ( advantages-item ). Можем ли мы некоторым преимуществам добавить ещё один класс, который привяжет их к какому-то тарифу и отделит их от других преимуществ? Можем, и тогда у одного элемента будет сразу два класса.
На самом деле у HTML-элемента может быть сколько угодно классов, в этом случае они перечисляются в атрибуте class через пробел, например:
Использование нескольких классов — это типовой приём, который ещё называется миксованием классов. Обычно его используют так: в один класс выносят общее оформление, а в дополнительных классах описывают его модификации. В примере выше размеры карточек товаров можно описать в CSS-правиле .product , а особый фон для хита продаж — в правиле .hit . В общем, удобный приём, помогает сократить дублирование кода.
Осталось придумать наши классы для тарифов. Для эконом-тарифа дополнительный класс вводить не будем, для стандартного тарифа используем класс standard , а для вип-тарифа — vip . Всё, можно дорабатывать разметку.
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим
Разнообразные товары для дома с доставкой по всей планете
