Я работаю с партнёрскими программами* и поэтому на моих сайтах много ссылок. И вот что я заметил – однообразные ссылки малоэффективны. Визуально они сливаются в одну и просто выпадают из поля зрения пользователя. Поэтому сегодня я хотел бы поделиться с вами реальным примером, как с помощью CSS (каскадные таблицы стиля) создать на одной странице разнообразные ссылки, которые будут различными не только по цвету, но и по гарнитуре шрифта.
* Кстати кому интересно – в основном работаю с партнёрской программой www.smartbucks.ru.
Переходим от слов к делу. Сразу отмечу, что все нижеприведённое можно сделать и без CSS, но с ними значительно быстрее и проще. Итак, собственно основная конструкция:
<STYLE=”text/css”>
<!–
a:visited { color: #00ff00; font-size: xx-small; }
a:active { color: #00dd00; font-size: 9pt; }
a:link { color: #00ff00; font-size: xx-small; }
a:hover { color: #ff0000; }
–>
</STYLE>
Что это за код? По сути это то же самое, что стандартный атрибут тэга <BODY> alink=”" vlink=”" link=”", но выполнен он с помощью CSS. Он точно так же распространяется на все ссылки на странице, но в отличие от стандартного <BODY> он не делает все ссылки одинаковыми.
Теперь разберём эту конструкцию по составляющим:
<STYLE=”text/css”>
…
</STYLE>
Между этими тегами размещается код стилей. Данные теги необходимо вставить в заголовке страницы между <HEAD></HEAD>.
a:visited { color: #00ff00; font-size: xx-small; }
Этот код показывает, что данная ссылка будет иметь цвет #00ff00 и шрифт xx-small. Точно такую же функцию выполняет атрибут vlink.
a:active { color: #00dd00; font-size: 9pt; }
Эта строка показывает, что после нажатия на ссылку, её цвет будет изменён на #00dd00, а размер шрифта сменится на 9pt. Точно такую же функцию выполняет атрибут alink.
a:link { color: #00ff00; font-size: xx-small; }
А здесь указывается, как непосредственно будет выглядеть ссылка. Аналогичное назначение имеет link.
a:hover { color: #ff0000; }
Здесь показано, что будет происходить со ссылкой, после наведения на неё курсором мыши. В этом конкретном примере изменяется цвет ссылки с #00ff00 на #ff0000.
Основу я всю рассказал. Теперь давайте покажу вам, как осуществить механизм создания индивидуального стиля для каждой ссылки, потому как пока все ссылки на странице у нас будут одинаковыми, точно так же как при осуществлении тэга <BODY>.
И так пример:
<STYLE>
<!–
a:visited { color: #00ff00; font-size: xx-small; }
a:active { color: #00dd00; font-size: 9pt; }
a:link { color: #00ff00; font-size: xx-small; }
a:hover { color: #ff0000; }
a.new:visited { color: #cc00cc; font-size: 10pt; }
a.new:active { color: #cc00cc; font-size: 10pt; }
a.new:link { color: #cc00cc; font-size: 10pt; font-family: Verdana}
a.new:hover { color: #ff0000; text-decoration: none}
a.best:visited , a.best:active , a.best:link { color: #00ff00; font-size: 9px; }
a.best:hover { color: #ff0000; }
–>
</STYLE>
Таким образом, можно сделать какое угодно количество стилей ссылок. Теперь смотрите, как все это применить. Пишем следующий код:
<a href=”ссылка куда-то”>ССЫЛКА</a>
Ссылка будет иметь вид расположен в этом коде:
a:visited { color: #00ff00; font-size: xx-small; }
a:active { color: #00dd00; font-size: 9pt; }
a:link { color: #00ff00; font-size: xx-small; }
a:hover { color: #ff0000; }
А если мы напишем так:
<a href=”ссылка куда-то еще” class=”new”>ССЫЛКА</a>
Ссылка примет новый вид согласно описанию в стиле new:
a.new:visited { color: #cc00cc; font-size: 10pt; }
a.new:active { color: #cc00cc; font-size: 10pt; }
a.new:link { color: #cc00cc; font-size: 10pt; font-family: Verdana}
a.new:hover { color: #ff0000; text-decoration: none}
Если же мы напишем так:
<a href=”ссылка куда-то снова” class=”best”>ССЫЛКА</a>
Ссылка примет стиль, который описан вот так:
a.best:visited , a.best:active , a.best:link { color: #00ff00; font-size: 9px; }
a.best:hover { color: #ff0000; }
Эти советы пригодятся практически всем. Пользуйтесь на здоровье 
Вроде повторяю все твои действия, а вот не получается...
[...] Создание ссылок с помощью CSS → faqseo.net [...]
Хорошие советы, но ИМХО для начинающих..
Согласен. Но думаю, что найдутся люди, которые этого не знают.
Как раз я тот людь, который не знает
Всегда есть тот, кто чего то не знает
Мда. Это уж должны знать все веб-мастера.