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

Обозначение типа файла с помощью динамически добавляемых значков • 159

a[href$=".doc"] {
background-image: url(images/icon_doc.png);
}
a[href$=".mov"] {
background-image: url(images/icon_film.png);
}
a[href$=".jpg"] {
background-image: url(images/icon_photo.png);
}

Символы href$= в каждом из селекторов атрибу-
тов — это команда браузеру «найти все атрибуты Я взяла эти значки из бесплат-
href, завершающиеся определенным образом», ного набора famfamfam Silk ав-
а затем следует значение в кавычках, такое как тора Mark James (http://www.
.pdf, которое и представляет интересующее нас famfamfam.com/lab/icons/silk).
завершение атрибута. Когда браузер находит
совпадение, он выбирает подходящее фоновое изображение и добавляет к ссылке
соответствующий значок (рис. 4.3).

Страница со всеми внесенными
до сих пор изменениями назы-
вается selectors_1.html. Она на-
ходится в папке с остальными
файлами упражнений, которые
вы загрузили для этой главы.

Рис. 4.3. Теперь рядом с каждой ссылкой выводится значок,
соответствующий расширению файла

маСштаБирование значков
Вместо того чтобы применять к ссылкам свойство min-height для предотвращения обрезки
фоновых изображений, можно было бы применить background-size и масштабировать
значки по размеру текста. Например, подошло бы такое правило:
ul a[href] {
display: block;
padding-left: 20px;

www.trk.kg