84. Несколько классов

В предыдущем уроке мы для каждого элемента применяли не более одного класса. В CSS можно применять несколько классов к одному элементу, для этого имена классов нужно разделять пробелом, например, как в примере 1.

<p class = "bold color_red">абзац</p>

Почему удобно применять несколько классов к одному элементу? Рассмотрим HTML код 2 примера.

<p class = "bold color_red">абзац 1</p>
<p class = "bold">абзац 2</p>
<p class = "color_red">абзац 3</p>

И CSS код для примера 2.

.bold {
    font-weight: bold;
}
.color_red {
    color: red;
}

Во-первых, порядок перечисления имен классов не имеет значения. Во-вторых, мы можем писать любое количество классов для элемента.

Вернемся к примерам 2 и 3. Запустив данный код, вы увидите, что первый абзац красного цвета и у него полужирное начертание, второй абзац только с полужирным начертанием, а третий, просто красный. То есть в первом абзаце, где мы написали два класса: bold и color_red, мы комбинировали красный цвет и полужирное начертание.

Похожие уроки Codebra

1. Вам дан абзац. Напишите несколько классов (в HTML), чтобы цвет текста абзаца был зеленый и курсивом. Список классов посмотрите в CSS коде, ничего не нужно исправлять и дополнять

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.