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

194 • Глава 5. Повышение эффективности за счет псевдоклассов

h2:target {
padding-left: 10px;
background-color: hsla(203,78%,36%,.2);
text-shadow: 1px 1px 2px #fff;
}

Теперь при переходе по ссылкам в оглавлении
Страница со всеми изменениями, на странице появляется заметная, но не слиш-
которые мы внесли до сих пор, ком навязчивая подсветка текущего заголовка,
называется target_3.html. Она со- помогающая пользователю ориентироваться
хранена в папке со всеми осталь- (рис. 5.16). Этот стиль оформления также приме-
ными файлами упражнений для няется, если открыть страницу через URL-адрес,
этой главы.
содержащий идентификатор фрагмента.

Рис. 5.16. В подсвеченном заголовке рядом с текстом выводится легкая тень,
а слева добавляется пустое пространство, немного отодвигающее
название раздела от края страницы

подСветка раздела Целиком
На нашей странице подсветка целого раздела статьи вместо только лишь названия смотре-
лась бы слишком броско, однако на других страницах такой ход может оказаться достаточно
эффективным. Для того чтобы выделить раздел целиком, нужно поместить его внутрь какого-
то элемента, например div или section (вполне естественный выбор!). Присвойте такому
обрамляющему блоку идентификатор и укажите этот идентификатор в псевдоклассе :target.
Альтернативный способ подразумевает использование селектора соседнего «брата»
в сочетании с псевдоклассом :target, например dt:target + dd. Но он работает только в том
случае, если вы знаете, сколько в точности элементов следует за целевым, а также типы
всех этих элементов. Указанный селектор присваивает стиль только одному элементу dd,
следующему за целевым элементом dt, но ничего не делает с последующими элементами
dd, которые могут существовать под тем же элементом dt.

коротко о пСевдоклаССе :tarGEt

Псевдокласс :target входит в модуль Selectors (Селекторы), который вы найдете по адресу
http://www.w3.org/TR/css3-selectors. Он выбирает элемент, являющийся целевым элементом
ссылочного URL, содержащего идентификатор фрагмента.

www.trk.kg