QR-код адреса статьи


Блог им. ekwo / Привязываем иконку к каждому типу файлов на CSS

Предположим, что нам нужно сделать страничку, на которой будут выкладываться файлы разных типов (архивы, картинки, документы), и при этом мы хотим, чтобы каждый тип файла выделялся, но для того, чтобы его выделить пользователю, который добавляет файл, не придется утруждаться прописыванием стилей или классов. И не надо требовать от разработчиков модификации серверной части (чтобы та выводила ссылки с иконками).

Это все очень просто можно сделать при помощи CSS.

Каждый файл у нас — это ссылка.
Итак:

<a href='downloads/myArch.zip'>myArch.zip</a>* This source code was highlighted with Source Code Highlighter.



Теперь прописываем общий стиль в CSS:
a{  padding-left: 18px;  background-position: 0 0;  background: transparent url(icon.png) no-repeat;}

* This source code was highlighted with Source Code Highlighter.

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

Теперь приступим к описанию типов файлов:
a[href $='.pdf'] {  padding-left: 18px;  background-position: 0 0;  background: transparent url(pdf.png) no-repeat;}a[href $='.zip'] {  padding-left: 18px;  background-position: 0 0;  background: transparent url(zip.png) no-repeat;}


* This source code was highlighted with Source Code Highlighter.

И т.д. то есть мы прописываем для каждого типа файла свою иконку и свой стиль (в принципе, мы можем даже подсвечивать каждый тип файла своим цветом).

Блог им. ekwo / Привязываем иконку к каждому типу файлов на CSS

Пример отображения архива, в html написано только:
<a href=psycho.zip>psycho.zip</a>


* This source code was highlighted with Source Code Highlighter.

Живой пример

PS: Это мой первый хабратопик, не судите строго.

(C) Хабрахабр


Из всех способов сетевой коммуникации мы предпочитаем работу по электронной почте. Это позволяет отслеживать все этапы деловой переписки.
Пишите нам по адресу mail@tcse-cms.com

Мы в социальных сетях

Твиттер: twitter.com/tcsecms
Фейсбук: facebook.com/pages/TCSE-cms
Вконтакте: vk.com/public34349369


Вернуться назад