Гиперссылки (или ссылки) подключить веб-страниц.Это то, что делает веб-работы, что позволяет нам путешествовать из одной страницы к другой одним нажатием кнопки.Как Web Standardistas выразился, “ без гипертекстовой ссылки на веб-wouldn’ т быть в Интернете, это будет просто набор отдельных, не связанных pages.” .Так что без связей, we’ D будут потеряны.Мы ищем их на странице, когда мы хотим рисковать далее.Конечно, мы останавливаемся, чтобы прочитать немного, но неизбежно, мы в конечном итоге нажав ссылку некоторых sort.

Styling Links

Когда вы ссылки стиль, помните, что пользователи don’ т читать, они сканирования.You’ Слышал, что раньше, и it’ правда.Итак, убедитесь, что ваши ссылки очевидны.Они также должны указать, где они будут принимать user.

Let’ начнем, глядя на селекторы CSS и псевдо-классы:

• a:link { }
  Непосещенные link.
• a:visited { }
  Посетили links.
• a:hover { }
  наведении указателя мыши на link.
• a:focus { }
  пользователь нажимает на link.
• a:active { }
  пользователь нажал link.

TLC использует не только жалоба текстовые ссылки, но и значки общаться соответствующий файл types.

Обеспечение Contrast

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

• text-decoration: underline;
  Underline.
• font-weight: bold;
  Bold.
• font-size: 1.4em;
  Enlarge.
• color: #ed490a;
  Color.
• background-color: #c0c0c0;
  Background.
• border-bottom: 2px solid #a959c3;
  Border.

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

Кроме того, don’ T подчеркнуть текст, который isn’ T linked потому, что пользователи ожидают, что подчеркнутый текст, чтобы быть ссылке.И имейте в виду пользователей с плохим sight.Красный won’ T выделяться тому, кто дальтоник, поэтому рассмотрим подчеркивание или жирный связей, в дополнение к изменению color.

Полезный метод, который яВсегда используйте это слегка размыть focus.Связи с хорошим контрастом должна еще стоять, когда вы смотрите на page.

Don’ забывайте про посетили Links

Посещенных ссылок часто забывают, но они очень полезны, особенно на крупных веб-сайтов.Зная, где they’ посетили прежде, является полезным для пользователей, потому ли, что они хотят избежать страницах they’ нас посетило или сделать точкой посещения их again.

Дайте посещенных ссылок темный оттенок color, так что они выделяются, но aren’ T столь очевидны, как непосещенных links.

Использовать название Attribute

Название атрибута, как правило, упускается из виду, но it’ SA удобный способ для добавления описаний к вашим ссылкам и может быть особенно полезно для тех, кто полагается на экране readers.

<a href="example.com" title="This is an example link">Example</a>

Использование кнопки Styles

Для того, чтобы действительно важные ссылки стоят out— скажем, вызов action или “ Более info” Ссылка на bottom— использовать стиль кнопки.И вы можете использовать стиль снова и снова без необходимости редактировать любые graphics.

Для получения дополнительной информации, посетите “ Super-Высокий кнопки с CSS3 и RGBA ” 67 и __ | Призыв к действию Buttons. ”

Hover State

Предложение обратной связи с пользователями, что they’ Re зависший над link является хорошей практикой.Лучший способ сделать это, чтобы изменить цвет фона, изменить цвет текста или удалить underline.

a:hover { text-decoration:none;
text-shadow: 0 0 2px #999;
}

Указатель мыши обычно превращается из стрелу в руки, когда пользователь наводит курсор на ссылку.Но эта функциональность иногда теряется, например, в IE, когда ссылка содержит span элемент, или на “ Submit” пуговицы.Исправить это от добавление курсор type через CSS.

a:hover span { cursor: pointer }

Активные State

Обеспечивают визуальную обратную связь с пользователем, чтобы указать, что они нажали на ссылку, чтобы они знали ждать.Один хороший эффект заключается в перемещении ссылку на одну илидва пикселя, который дает ссылку появление бытия pressed.

a:active { padding-top: 2px; }

Apply Padding

Вот хороший совет юзабилити. Добавить обивка на ваш links.Таким образом, пользователь doesn’ т должны навести курсор мыши на точное место текста.Вместо этого, они могут парить в непосредственной близости и по-прежнему быть в состоянии нажать кнопку.Это хорошо работает для навигации links.

a { padding: 5px; }

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров