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

154 • Глава 4. Стилизация изображений и ссылок в зависимости от их типа

в этОм урОке

Мы будем добавлять к ссылкам значки, ориентируясь на тип ссылки, а также вы-
берем для фотографий стиль, отличный от стиля всех остальных изображений. Для
этого мы применим следующие селекторы CSS3:
селектор атрибута «конец значения» ($);

селектор атрибута «где-то внутри значения» (*).

базОвая страница
В качестве отправной точки мы возьмем законченную страницу из главы 3 (рис. 4.1).
Она содержит множество ссылок на файлы различных типов, но пока что все эти
ссылки оформлены абсолютно одинаково. Было бы здорово, если бы ссылки на
разные типы документов выглядели по-разному, для того чтобы пользователь
сразу видел, что за документ сейчас откроется на экране. Кроме того, на странице
несколько изображений: большинство из них — фотографии, но также присут-
ствует уменьшенное изображение карты. И снова, сейчас все эти изображения
оформлены одинаково, но мы могли бы определить для фотографий другой, более
подходящий стиль.

Рис. 4.1. Все ссылки похожи друг на друга и все изображения оформлены одинаково

www.trk.kg