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

Динамическая подсветка разделов страницы • 193

изменение Фонового Цвета при переходе к разделу
Вся эта работа по стилизации содержимого была всего лишь прелюдией к нашей
основной задаче в этой главе: мы хотим сделать так, чтобы раздел страницы, на ко-
торую пользователь переходит по щелчку в оглавлении, выделялся особым цветом.
В оглавлении указаны целевые элементы — это элементы h2 на нашей странице.
Следовательно, нужный нам селектор — h2:target. Создайте новое правило с этим
селектором и свяжите с ним такой же фоновый цвет, которым выделяются значки
с порядковыми номерами пунктов оглавления, но более прозрачный:

h2:target {
background-color: hsla(203,78%,36%,.2);
}

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

Рис. 5.15. Браузер не только прокручивает страницу так, чтобы целевой заголовок
оказался наверху окна, но и добавляет к нему новый фоновый цвет

Для того чтобы немного украсить представление, можно добавить пустое про-
странство слева и тень к тексту:

www.trk.kg