③Изображения для ссылок и использование фонового изображения

Продолжим изучение темы CSS - ссылки. Если пропустили прошлые статьи, то вот ссылки на них:

• ①Псевдоклассы состояний гипертекстовых ссылок
• ②Выборка отдельных ссылок и подчеркивание ссылок

Изображения для ссылок

Добавить изображение для ссылки можно с помощью CSS-свойства background-image. Так как элемент <а> является строчным a {display: inline;}, то предварительно его нужно преобразовать в блочный элемент a {display: block;}.

Чтобы вставить изображение или иконку перед ссылкой, необходимо добавить отступ с помощью свойства padding-left. Этот прием может пригодиться в случае, когда на странице есть ссылки для загрузки каких-либо документов различных форматов, и вы можете добавить значок-изображение типа файла для большей наглядности.

Если нужно, чтобы значок автоматически добавился ко всем ссылкам, содержащим документы одного формата, можно воспользоваться следующей конструкцией:

CSS

a[href$=".pdf"] {background-image: url(images/pdf.png);}

Символ href$ в селекторе атрибута дает браузеру команду найти все атрибуты href, заканчивающиеся определенным образом (в данном случае .pdf) и добавить к ссылке соответствующий значок.

Использование фонового изображения

Можно преобразовать внешний вид ссылки, добавив в качестве нижней границы фоновое изображение:

CSS

a {
  text-decoration: none;
  background: url(images/underline.png) repeat-x left bottom;
  padding-bottom: 3px;
}

Продолжение в следующей статье!