Предположим, что нам нужно сделать страничку, на которой будут выкладываться файлы разных типов (архивы, картинки, документы), и при этом мы хотим, чтобы каждый тип файла выделялся, но для того, чтобы его выделить пользователю, который добавляет файл, не придется утруждаться прописыванием стилей или классов. И не надо требовать от разработчиков модификации серверной части (чтобы та выводила ссылки с иконками).
Это все очень просто можно сделать при помощи CSS, даже не потребуются скрипты.
Каждый файл у нас — это ссылка.
Итак:
myArch.zip
Теперь прописываем общий стиль в CSS:
a{
padding-left: 18px;
background-position: 0 0;
background: transparent url(icon.png) no-repeat;
}
То есть мы задали смещение для текста ссылки на 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;
}
И т.д. то есть мы прописываем для каждого типа файла свою иконку и свой стиль (в принципе, мы можем даже подсвечивать каждый тип файла своим цветом).
Пример отображения архива, в html написано только:
psycho.zip
Практически также как и эти иконки у ссылок выводятся и фавиконки в выдаче поисковика. Фавикон — это очень важная часть сайта, без которой его будет сложнее запомнить и как-то выделить. Посмотрите статью про онлайн генераторы Favicon, очень полезно.