Page 177 - Сила CSS3 Освой новейший стандарт

Выбор определенных элементов без идентификаторов и классов • 177

и откройте файл alternate_start.html в любом редакторе кода. Код CSS содержится
внутри элемента style тега head этой страницы. Это та же страница, с которой
мы работали в главе 2, поэтому вы можете в качестве точки отсчета взять свою
законченную страницу из главы 2.

Сейчас все облачка с текстом на нашей странице окрашены одним и тем же зеленовато-
голубым цветом (рис. 5.2). Числовое значение этого цвета — hsla(182,44%,76%,.5).
Поскольку мы используем синтаксис HSLA, скорректировать составляющие цвета и
выбрать оттенок, который будет лишь немного отличаться, очень просто. Помните,
что значения тона располагаются в диапазоне от 0 до 360, вдоль спектра от красно-
го до фиолетового цвета. Таким образом, если вы хотите сделать альтернативный
цвет чуть более зеленым, то можете просто немного уменьшить значение тона, на-
пример указать 160 вместо 182. Чтобы добавить синевы, увеличьте значение тона,
например до 200.

Рис. 5.2. У всех облачков с комментариями один и тот же фоновый цвет —
зеленовато-синий

Давайте в качестве альтернативного цвета выберем голубоватый оттенок. Для того
чтобы разница в цвете была более заметной, я буду использовать значение тона 210.
Добавьте к коду CSS внутри тега head страницы следующее новое правило:
li:nth-child(even) blockquote {
background-color: hsla(210,44%,76%,.5);
}

Сохраните страницу и откройте ее в современном браузере. Вы увидите, что фон
второго и четвертого комментария стал голубым, а фон первого и третьего остался
зеленовато-синим (рис. 5.3).

www.trk.kg