Хаки и Скрипты Next Generation CMS : CSS, Изображения, Текст и ссылки : Выводим иконки типов файлов возле каждой ссылки на чистом CSS

irbees2008 Опубликовано - 30 - апреля CSS

Адаптировал: irbees2008
Источник:
Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Пришел заказ , нужно сделать страничку, на которой будут выкладываться файлы разных типов архивы, картинки, документы, и при этом чтобы каждый тип файла выделялся.Это все очень просто сделаем при помощи CSS

Итак приступим:
1. Поскольку каждый файл у нас — это ссылка.

Код:

<a href='downloads/Мой файл.zip'>Мой файл.zip</a>

добавим общий стиль ссылок в CSS:

Код:

a{ padding-left: 18px;
  background-position: 0 0;
  background: transparent url(../images/icon.png) no-repeat;
}

Как видите мы задали смещение для текста ссылки на 18 px влево, и установили картинку в фон. Эта картинка будет показываться по-умолчанию, т.е. если пользователь добавит файл, не описанный в стилях.
2.ну теперь приступим к описанию типов файлов:

Код:

a[href $='.pdf'] {
  padding-left: 18px;
  background-position: 0 0;
  background: transparent url(../images/pdf.png) no-repeat;
}
a[href $='.zip'] {
  padding-left: 18px;
  background-position: 0 0;
  background: transparent url(../images/zip.png) no-repeat;
}

Как вы заметили ,мы прописываем для каждого типа файла свою иконку и свой стиль ,также мы можем даже подсвечивать каждый тип файла своим цветом,но это уже как хотите.
Практически также как и эти иконки у ссылок выводятся и фавиконки в выдаче поисковика.
НЕЗАБЫВАЕМ СКАЧАТЬ ИКОНКИ[COUNTER] Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. [/COUNTER]

Можешь почитать и вот эту статейку "палитра цветов 3"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.