Сегодняшний урок поведает Вам о том, как сделать вывод красивых иконок рядом с каждой ссылкой на сайте. На Вашем сайте могут быть сотни ссылок. Некоторые будут вести на другие сайты, некоторые на скачивания вордовских файлов, некоторые на PDF файлы и т.п. Было бы очень полезно информировать Ваших посетителей о том, куда они попадут при нажатии на ссылку. Совсем недавно мы рассматривали пример, который выполнял подобное действие и показывал фавикон внешнего сайта. Данный пример выполнен только на CSS и может быть использован для ссылок в пределах сайта. Теперь давайте разбираться как все это работает: HTML: чтобы сделать ссылку на PDF файл нам необходим следующий код <a href="files/holidays.pdf">Ссылка</a> Использовав такой код мы просто получим обыкновенную ссылку. Теперь добавим немного магии CSS: a[href $='.pdf'] { padding-right: 18px; background: transparent url(icon_pdf.gif) no-repeat center right; } Использовав несколько строчек кода мы обучили браузер после каждой ссылки (которая ведет на .pdf файл) добавлять красивую иконку Акробат Ридера. В коде есть также путь к картинке, так что не забывайте его менять, если будете менять расположение картинки. Тоже самое можно проделать с остальными вариантами: Email = "mailto:", Word = ".doc", Excel = ".xls" и т.д. Например, тут еще можно добавить картинки к ссылкам на видео и музыку. Но бывают ситуации, когда не получится указать расширение файла. Например, при добавлении ссылок на всплывающие окна или на другие сайты. Давайте взглянем на код в таком случае: <a class="popup" href="help.html">Help Page</a> Как мы видим тут мы добавили к ссылке класс "popup". Теперь посмотрим на CSS: a[class ="popup"] { padding-right: 18px; background: transparent url(icon_popup.gif) no-repeat center right; } В самом начале мы пишем, что если у какой либо ссылки есть класс "popup" - значит ей необходимо прибавлять иконку попапа. То есть, таким образом можно приделать иконку к любой ссылке, просто определив ее класс. Иногда бывает еще сложнее и у ссылки может быть двухсловные классы. Тогда на помощь приходит код: a[class ~="popup"] { padding-right: 18px; background: transparent url(icon_popup.gif) no-repeat center right; } В таком случае будет выбрана любая ссылка, в которой есть класс с упоминанием слова "popup" (может быть часть слова, а может быть одно из нескольких). На сегодня все! Спасибо за внимание!