ArtShok. Сайтостроение и немного SEO

Как правило, вы не найдете на большинстве сайтов отдельных стилей для оформления посещенных ссылок, так называемого :visited псевдокласса. По правде сказать, это и не всегда надо. Но если структура сайта достаточно грамоздка, или вы часто используете списки (например, перечень статей), то будет не лишним предусмотреть вывод отдельного стиля для уже посещенных ссылок.

Demo и Скачать

Способ 1. Цвет ссылки
Проще всего будет выделить посещенную ссылку другим цветом. Но не рекомендую устраивать “пожар в Африке”. Например, если ссылки в тексте выделены красным цветом, то посещенную ссылку можно сделать темно-красного или бардового цвета

a:link {color: #FF0000; text-decoration: none;}
a:visited {color: #990000; text-decoration: none;}

Способ 2. Перечеркивание
Очень часто подчеркивание используют для стилизации ссылки непосредственно под курсором, a:hover. Вы так же можете использовать подчеркивание и для посещенной ссылки. Но, чтобы не возникало путаницы, текст можно перечеркнуть.

a:visited {color: #25A30A; text-decoration: line-through;}

Способ 3. Цвет фона
Уже более интересный в плане оформления способ, но как правило используется для положения курсора поверх ссылки, a:hover. Так что будьте осторожны.

a:link {
color: #25A30A;
text-decoration: underline;
background-color: transperent;
}

a:visited {
color: #FFFFFF;
text-decoration: none;
background-color: #77B575;
}

Способ 4. Фоновая картинка
Уже более интересный в плане оформления способ, но как правило используется для положения курсора поверх ссылки, a:hover. Так что будьте осторожны.

a:link {
color: #25A30A;
text-decoration: underline;
}

a:visited  {
color: #888888;
text-decoration: none;
background: url(visited-icon.gif) no-repeat 0% 50%;
padding-left: 12px;
}

Немного усложним задачу, добавив смену фоновой картинки для уже посещенной ссылки при наведении курсора:

a:visited  {
color: #888888;
text-decoration: none;
background: url(visited-icon.gif) no-repeat 0% 50%;
padding-left: 12px;

a:visited:hover  {
color: #25A30A;
background: url(visited-icon-hover.gif) no-repeat 0% 50%;
}

Способ 5. Использование псевдоэлементов :before, :after
Будьте осторожны, в IE 6 данный способ не работает. Поэтому сами решайте использовать его или нет в качестве оформления ссылок. :before и :before автоматически добавляют содержимое соотвественно до и после указанного элемента, в нашем случае это ссылки.

a:visited:before {
color: #25A30A;
text-decoration: underline;
content: "(ok) ";
}

a:visited:after  {
color: #25A30A;
text-decoration: underline;
content: " (ok)";
}

Помимо текста можно использовать unicode символ, например:

a:visited:before {
color: #25A30A;
text-decoration: none;
content: "\221A\00A0";
}

Где \00A0 - неразрывный пробел, а \221A - знак квадратного корня, √ Размер, цвет и стиль текста “до” и “после” задается так же, как и обычно:

a:visited:before {
color: #25A30A;
text-decoration: none;
content: "\221A\00A0"
text-transform: uppercase;
font-size: 10px;
}

Смена текста элементов :before и :after в ссылке при наведении курсора задается следующим образом:

a:visited:after  {
color: #25A30A;
text-decoration: underline;
content: " (ok)";
}

a:visited:hover:after  {
color: #25A30A;
text-decoration: underline;
content: " (allready read!)";
}

Другой стиль текста для положения :hover задается по аналогии с предыдущим примером.

Demo и Скачать

Ну и коли мы сегодня говорим о красивом, то в качестве бонуса прилагаю ссылку на 10 Красивых и бесплатных шрифтов для веб-дизайнера. В частности Nevis очень хорошо подойдет для логотипов, Pappo’s Blues - тоже + его можно использовать и в дизайне сайта как декортаивный элемент.

Почему собственно рекомендую бесплатные шрифты… Нет, я не против вложений как таковых, будь то инвестиции в сео, любимый ресурс, хобби, саморазвитие или портфель ценных бумаг. Но считаю, что тратиться надо тогда, когда действительно знаешь, для чего тебе это нужно и что с этим в итоге можно сделать.

Кстати, тем, кто сейчас занимается раскруткой сайта за счет покупки ссылок, рекомендую статью “Покупаем ссылки правильно”. Это к вопросу о правильности капиталовложений

Рекомендуемые статьи:

• jQuery пример: красивая смена текста за 10 минут
• Иконизируем ссылки
• Меню на CSS+jQuery (гаражные двери)
• Как установить вид курсора?
• Градиентный текст с помощью CSS (без флэш и javascript)
• Реализация меню с помощью списка (form)
• Украшаем формы с помощью CSS и jQuery - часть 1

Обязательно к использованию: