Ссылки с иконками для различных типов файлов
+6

Ссылки с иконками типов файловВ этом уроке я покажу, как сделать ссылки на вашем сайте более функциональными и привлекательными для посетителя. Вы научитесь делать так, что рядом с каждой ссылкой автоматически будет отображаться иконка, соответствующая типу файла, на который происходит переход.

Для выполнения этой задачи нам нужно будет вспомнить (если знали), или же познакомиться заново с селекторами атрибутов. А если быть еще точнее, то нам нужно будет выбирать элементы на основании конкретного значения атрибута.

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

a[href$='.pdf']  {
      padding: 0 0 0 20px;
      background: url(icon-pdf.png) no-repeat left;
      }

С помощью селектора атрибута a[href$='.pdf'] мы применяем данные правила только к ссылкам a, атрибут href которых, заканчивается на .pdf. Свойством padding смещаем текст ссылки на 20 пикселей вправо, тем самым освобождая место под иконку. А свойством background добавляем фоновое изображение к нашей ссылке.

По такому принципу добавляем правила для остальных типов файлов, ссылки на которые у вас присутствуют.

+6
Понравилась запись? Подпишитесь по RSS или E-mail!
Категории: CSS. Прямая ссылка на запись.

Комментарии к записи Ссылки с иконками для различных типов файлов: 1

  1. sl1m сказал(а):

    Spasibo! Nawel to 4to iskal!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *