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

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

Намного более надежный способ добавления индикаторов типа файла основывается
на использовании селекторов атрибутов — в этом случае всю работу автоматически
выполняет браузер. Все ссылки заканчиваются расширениями файла, однозначно
указывающими на тип файла, поэтому мы можем с помощью селектора атрибута
«конец значения» определить вид расширения и добавить соответствующий значок
в качестве фонового изображения элемента a.

Прежде всего, необходимо подготовить к добавлению фоновых изображений эле-
менты a из списков файлов для загрузки:
ul a {
display: block;
min-height: 15px;
padding-left: 20px;
background-repeat: no-repeat;
background-position: 0 3px;
}

В этом коде мы создаем для ссылок блочные элементы, минимальная высота которых
равняется высоте значков, чтобы значки не обрезались сверху и снизу. Кроме того,
мы добавляем поле слева — в это пустое пространство будет вставляться сам зна-
чок. Каждое фоновое изображение будет выводиться только один раз (no-repeat)
на три пиксела ниже верхнего уровня элемента ссылки (0 3px), чтобы значок был
выровнен точно по высоте текста.

в каких СитуаЦиях треБуютСя кавычки?

Кавычки вокруг значения селектора атрибута нужно добавлять только в том случае, если
это значение представляет собой строку. Если значение — это идентификатор, кавычки не
требуются, но и не повредят. Различие между идентификаторами и строками заключается
в основном в более ограниченном списке допустимых символов в названиях идентифи-
каторов; также определенные ограничения накладываются на символы, с которых может
начинаться имя идентификатора. Определение идентификатора вы найдете на странице
http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier, а определение строки — на
странице http://www.w3.org/TR/CSS21/syndata.html#strings.
Если вам не хочется утруждать себя запоминанием всех этих подробностей, вы можете
выбрать самый безопасный путь и всегда добавлять кавычки к значениям селекторов
атрибутов.

Теперь можно добавить в код селекторы атрибутов, позволяющие выбирать все
интересующие нас типы файлов:
a[href$=".pdf"] {
background-image: url(images/icon_pdf.png);
}

www.trk.kg