Внимание! На этой странице вы найдете материал урока из архивного курса по CSS. Курс был написан в 2015 и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по CSS и на странице первого урока.
- Вам дан абзац. Напишите несколько классов (в HTML), чтобы цвет текста абзаца был зеленый и курсивом. Список классов посмотрите в CSS коде, ничего не нужно исправлять и дополнять
В предыдущем уроке для каждого элемента мы применяли не более одного класса. В этом уроке узнаем, что в CSS можно применять несколько классов к одному элементу. Для этого имена классов нужно разделять пробелом как в следующем примере:
<p class = "bold color_red">абзац</p>Почему удобно применять несколько классов к одному элементу? Рассмотрим следующий HTML-код:
<p class = "bold color_red">абзац 1</p>
<p class = "bold">абзац 2</p>
<p class = "color_red">абзац 3</p>И следующий CSS-код:
.bold {
font-weight: bold;
}
.color_red {
color: red;
}Во-первых, порядок перечисления имен классов не имеет значения. Во-вторых, мы можем писать любое количество классов для элемента.
Вернемся к примерам. К первому абзацу были применены оба класса: текст полужирного начертания и красного цвета.
Таким простым способом можно ещё более оптимизировать стили CSS. В следующем уроке научимся использовать уникальные идентификаторы в качестве селекторов и выясним их особенности.
Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу CSS.
