Внимание! На этой странице вы найдете материал урока из архивного курса по CSS. Курс был написан в 2015 и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по CSS и на странице первого урока.
- Исправьте CSS код так, чтобы цвет выделенного текста был красный и текст был без подчеркивания (сейчас цвет текста синий). Вы можете удалять лишние строки, но нельзя дописывать новые селекторы и свойства
В предыдущих уроках в качестве селекторов мы использовали имена тегов. На самом деле селекторы тегов не так часто применяются, как селекторы классов и идентификаторов.
Классы и идентификаторы открывают большие возможности в CSS.
Селекторы классов
Приведу пример HTML-кода, с которым будем работать;
<p class = "bold">Значимость этих проблем настолько очевидна, что сложившаяся структура организации позволяет оценить значение существенных финансовых и административных условий.</p>
<p>Не следует, однако забывать, что <span class = "bold">реализация намеченных плановых заданий</span> требуют от нас анализа соответствующий условий активизации.</p>Класс bold мы присвоили двум элементам: первому абзацу и элементу <span> во втором абзаце. В CSS название селектора класса начинается с точки (.), поэтому наш селектор в CSS будет выглядеть так:
.bold {
font-weight: 900;
}Свойство font-weight задает жирность шрифта. О нем поговорим в следующих уроках по CSS.
Теперь попробуем применить стили только для элемента <span> с классом bold. Чтобы стили применялись для элемента <span> с классом bold (<span class = "bold">...</span>) напишем следующий код:
span.bold {
font-weight: 900;
color: #888888;
}Обратите внимание на то, что между span и .bold нет пробела!
Проверьте пример и посмотрите результат. Переходим к следующему примеру:
span.bold {
color: #888888;
}
p.bold {
color: #DD4455;
}В этом примере для элемента <span> c классом bold мы делаем цвет текста красным, а для элемента <p> (абзац) с классом bold мы делаем цвет текста серым.
Как видите, класс один, а элементы разные, мы просто их комбинируем. В этом сила CSS.
Теперь сделаем для всех элементов с классом bold цвет текста красный, а для всех элементов <span> с классом bold жирное начертание. Смотрим следующий пример:
.bold {
color: red;
}
span.bold {
font-weight: bold;
}В этом примере мы комбинировали общий селектор (селектор тега, элемента) и селектор класса.
Далее ещё глубже разберемся с комбинированием и посмотрим как работает переопределение в CSS. Пример:
.bold {
color: red;
}
span.bold {
color: blue;
}Сначала сделали для всех элементов с классом bold цвет текста «красный», а потом переопределили свойство color для элементов <span>, имеющих класс bold. Для них установили синий цвет текста.
Такие комбинации уменьшают количество строк и помогают сделать каскадную страницу стилей более лаконичной и понятной.
В следующем уроке продолжим погружение в селекторы и классы.
Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу CSS.
