Предположим, что нам нужно сделать страничку, на которой будут выкладываться файлы разных типов (архивы, картинки, документы), и при этом мы хотим, чтобы каждый тип файла выделялся, но для того, чтобы его выделить пользователю, который добавляет файл, не придется утруждаться прописыванием стилей или классов. И не надо требовать от разработчиков модификации серверной части (чтобы та выводила ссылки с иконками).
Это все очень просто можно сделать при помощи CSS.
Каждый файл у нас — это ссылка.
Итак:
Теперь прописываем общий стиль в CSS:
То есть мы задали смещение для текста ссылки на 18 пикс влево, и установили картинку в фон. Эта картинка будет показываться по-умолчанию, то есть если пользователь добавит файл, не описанный нами.
Теперь приступим к описанию типов файлов:
И т.д. то есть мы прописываем для каждого типа файла свою иконку и свой стиль (в принципе, мы можем даже подсвечивать каждый тип файла своим цветом).
![](http://blog.ekwo.dp.ua/uploads/images/2/b52c0077a4.jpg)
Пример отображения архива, в html написано только:
Живой пример
PS: Это мой первый хабратопик, не судите строго.
Это все очень просто можно сделать при помощи 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.
И т.д. то есть мы прописываем для каждого типа файла свою иконку и свой стиль (в принципе, мы можем даже подсвечивать каждый тип файла своим цветом).
![](http://blog.ekwo.dp.ua/uploads/images/2/b52c0077a4.jpg)
Пример отображения архива, в html написано только:
<a href=psycho.zip>psycho.zip</a>
* This source code was highlighted with Source Code Highlighter.
Живой пример
PS: Это мой первый хабратопик, не судите строго.