Оформляем гиперссылку, советы по оформлению ссылок

Гиперссылка — базовый, основополагающий элемент не только любого сайта, но и Интернета в целом (без ссылок Интернет был бы чем-то иным). Гиперссылки окружают нас везде, наверное, поэтому веб-мастера начали относиться к оформлению ссылок халатно, а ведь гиперссылка — важнейшая, требующая к себе внимания вещь. В данной статье я решил подготовить для вас ряд советов и рекомендаций по оформлению ссылок (на основании оригинальной статьи про Designing Hyperlinks.

Но, вначале немного справочной информации:

Базовые «состояния» гиперссылки

Элемент <a> может принимать несколько «состояний», определяемых псевдо-классами CSS:

  • a:link — нормальное состояние ссылки;
  • a:visited — ссылка была посещена ранее;
  • a:hover — на ссылку наведен курсор;
  • a:active — активная ссылка (при нажатии на нее);
  • a:focus — пользователь использует клавишу TAB для навигации.

Один из классических примеров:

оформление гиперссылки

Распространенные свойства CSS для оформления ссылок

  • color – цвет гиперссылки;
  • text-decoration – применяемый к тексту оформительский прием (обычно нижнее подчеркивание);
  • background-color – цвет фона (может, например, меняться если на ссылку наведен курсор (a:hover);
  • font-weight – хороший способ подчеркнуть ссылку, сделав ее жирным шрифтом Bold.
  • border – рамка;

Общие рекомендации по оформлению ссылок

Иногда веб-мастера используют довольно экзотические стили, что редко упрощает жизнь пользователю. Ссылка должна обязательно отличаться от остального текста, причем отличие это должно быть очевидным. Не обязательно делать это ярким “кричащих” образом, иногда просто достаточно выделить ссылку другим цветом. В целом новому пользователю должно быть сразу понятно, что это именно ссылка.

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

Кстати, по этой же причине не используйте стили предназначенные для гиперссылок к другим элементам, это так же породит путаницу. Если вы сильно отходите от классических схем, делайте это с толком (см. примеры ниже).

В обязательном порядке следует определять все псевдо-классы, хотя ссылки вполне будут работать если стили псевдо-классов не определены, поэтому веб-мастера часто их игнорируют.  Не стоит забывать так же что, большое количество людей не используют мышь, поэтому даже о таком “ерундовом” состоянии как a:focus, забывать нельзя. В идеале желательно определить стиль для каждого из состояний. К тому же следует помнить, что по умолчанию разные браузеры имеют разное оформление для псевдо-клссов. Так, например, в Firefox :active и :focus выделяются с помощью серой рамки, в то время как в Google Chrome ссылки с :active идут без стиля, а :focus имеет рамку желтого цвета.

Ну и напоследок, несколько хороших примеров для подражания:

ссылки на сайте

G4Tv – цветовая схема, как вы видите, далека от классической (оранжевые ссылки и заголовки на черном фоне) но очень контрастна. При наведении мыши (a:hover) появляется оранжевый фон. На внутренних страницах сайта стили меняются (сине-голубые ссылки), но это мало мешает навигации по сайту.

оформление ссылок на сайте

Made My DayДемонстрирует массу «ссылочных» эффектов, гулять по сайту просто интересно!

Сarsonified – очень четкие состояния a:hover. Пример для подражания!

Надеюсь, эти несколько примеров вдохновили вас на серьезное оформление ссылок! Главное в этом деле – не забывать о деталях (мелочах). Можно не создавать отдельные оригинальные эффекты для состояния наведения на ссылку (hover), а просто хотя бы изменить цвет. Не обязательно делать ссылки  яркими и привлекающими внимание, достаточно просто “отделить их от текста”. Ну и, конечно, проверяйте работу ссылок во всех браузерах.

P.S. Постовой. Вот, например, как раз по теме – интернет магазин парфюмерии Vanilla имеет очень красивый дизайн и продуманное оформление ссылок.
Чтобы сайт радовал посетителей дизайном и стабильно работал закажите хостинг у надежной хостинговой компании с хорошими ценами.
Крайне полезной для вебмастеров окажется статья  где купить ссылки в биржах статей или ссылок  – автоматических или с размещением навсегда.

Понравился пост? Подпишись на обновления блога по Дизайн Мания RSSRSS, Дизайн Мания RSSEmail или твиттерtwitter!
А еще можно опубликовать ссылку на статью в своем блоге:
Опубликовать в twitter.com        

Комментариев - 11 для поста Оформляем гиперссылку, советы по оформлению ссылок
  1. ]]> Ex.clusive ]]> (November 30, 2010)

    Очень полезная статья. Казалось бы – такая простая вещь как ссылка, но сколько всего зависит от неё и её правильного оформления.

  2. ]]> anna ]]> (December 2, 2010)

    сложновато…надо мне ещё разок прочитать…)

  3. ]]> Tod ]]> (December 2, 2010)

    anna, а еще лучше попробовать на практике.

  4. ]]> onjee ]]> (December 3, 2010)

    Привет Сань. Я все же предпочитаю ссылку картинкой выделять – тобишь например подчеркивание в виде картинки делать(Без сомнения знаешь такую фишку). Потому как стандартное подчеркивание уже приелось, а точками например если через border делать – не во всех браузерах рентабельно отображается! ИМХО

  5. ]]> Tod ]]> (December 3, 2010)

    onjee, да, с картинкой полет фантазии в выделении ссылки практически не ограничен. Если нужно выделить небольшое число ссылок типа меню, то получится весьма неплохо либо даже в тексте можно использовать – в общем, спасибо за дополнение, про этот вариант как-то забыл)

  6. ]]> Allpa ]]> (December 3, 2010)

    Тодушка. а рассказал бы ты, как ссылки картинками выделять, а? Какие там параметры нужны? Скажем, наводишь на ссылку, а она мало того что подчёркивается (или, наоборот, подчёркивание убирается), так в правом/левом верхнем углу ещё и махонькая картинка всплывает..
    Я где-то читала о таком способе, но забыла напрочь, где. И найти не могу :(

  7. ]]> Tod ]]> (December 5, 2010)

    Allpa, сделаем:) Вообще для этого используется свойство background, куда вешается картинка.

  8. ]]> Allpa ]]> (December 5, 2010)

    Угу, но вот как прописать его параметры, чтобы бекграунд был чётко в определённом углу, я не зналь :(
    Жду с нетерпением мануала :)

  9. ]]> Sniper762 ]]> (February 10, 2011)

    Отлично! Что учат как правильно ссылки оформлять… А то уж надоело однообразие…

  10. ]]> Михаил ]]> (April 5, 2011)

    Полезная статья, автору спасибо!

  11. ]]> Рустем ]]> (November 15, 2011)

    Можно еще поставить тень при наведении, еще когда темный фон, а тень яркого цвета, то как будто текст подсвечивается

Оставить комментарий
для статьи Оформляем гиперссылку, советы по оформлению ссылок