Блог им. 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) Хабрахабр


Уважаемые посетители,
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.


28 ноября 2008  0 2 718   Версия для печати


Похожие публикации

Блог им. 3ds / Колонки одинаковой высоты + border-bottom!

Begin На хабре наверно уже миллион статей про колонки одинаковой высоты. Вы спросите зачем нам нужна еще одна статья в 1001й раз? Вот в чем затык Проблема в том, что колонки одинаковой высоты с... читать далее

Блог им. RayZ / Задача: Кнопки в Internet Explorer и волшебные пространства

Столкнулся с проблемой укрощения кнопок под Internet Explorer. Для наглядности имеем следующий код: <html>   <style type="text/css">     .hacked {       width:auto;... читать далее

Немного о CSS свойством «background-image»

CSS свойство « background-image » служит для заливки чего-либо (блока, ячейки таблицы, страницы целиком) фоновым рисунком. Что можно сделать, используя это свойство?... читать далее

Защищаем движок Dle от спам ссылок

Крайне полезная статья с сайта seomax.info И так, давайте сразу приготовим все, что нам нужно, так сказать "ящик инструментов", в этот ящик мы положим: 1. Notepad++, это отличный, бесплатный блокнот... читать далее

Скругленные границы через CSS

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

как создавать очень красивые и удобные текстовые кнопки

Эта инструкция научит Вас, как создавать очень красивые и удобные текстовые кнопки (с эффектом нажатия), используя CSS.... читать далее

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent

Архив сайта

Реклама на сайте Источник: http://dictionaries.rin.ru.