Css оформление ссылок: Ссылки — Учебник CSS — schoolsw3.com

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

Дополнительные материалы на SmashingMag:

• Создание ссылок «Подробнее» и «Продолжить чтение»
• Почему ваши ссылки никогда не должны содержать надпись «Нажмите здесь»
• Должны ли ссылки открываться в новых окнах?
• Краткий рассказ о ссылках «наверх»

При оформлении ссылок помните, что пользователи не читают; они сканируют. Вы слышали это раньше, и это правда. Итак, убедитесь, что ваши ссылки очевидны. Они также должны указывают, куда они приведут пользователя .

Начнем с селекторов и псевдоклассов CSS:

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

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

Обеспечение контрастности

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

• оформление текста: подчеркивание; Подчеркивание.
• вес шрифта: полужирный; Жирный.
• размер шрифта: 1,4 em; Увеличить.
• цвет: #ed490a; Цвет.
• цвет фона: #c0c0c0; Фон.
• нижняя граница: 2px сплошная #a959c3; Граница.

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

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

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

Не забывайте о посещенных ссылках

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

Придайте посещенным ссылкам более темный оттенок цвета , чтобы они выделялись, но не были так очевидны, как не посещенные ссылки.

Используйте атрибут заголовка

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

 Пример 

Используйте стили кнопок

Чтобы выделить действительно важные ссылки — скажем, призыв к действию или ссылка «Подробнее» внизу — используйте стиль кнопки. И вы можете повторно использовать стиль снова и снова, не редактируя графику.

Для получения дополнительной информации ознакомьтесь с разделами «Суперклассные кнопки с CSS3 и RGBA» и «Кнопки призыва к действию».

Состояние наведения

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

 a:hover { text-decoration:none;
тень текста: 0 0 2px #999;
} 

Указатель мыши обычно превращается из стрелки в руку, когда пользователь наводит курсор на ссылку. Но эта функциональность иногда теряется; например, в IE, когда ссылка содержит элемент span , или на кнопках «Отправить». Исправьте это с помощью , добавив тип курсора через CSS.

 a:hover span { курсор: указатель } 

Активное состояние

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

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

Применить заполнение

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

 а { padding: 5px; } 

Используйте значки для типов файлов

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

Чтобы найти полезные ресурсы, посетите Fam Fam Fam Silk Icons.

Используйте значки для распознавания

Точно так же, как вы используете значки для типов файлов, значки используются для определения того, куда ведут ссылки или что они делают. Этот пользователь может быстрее усвоить визуальную иконку, чем текст.

Сделайте текст привязки описательным

Используйте осмысленный текст, а не «Нажмите здесь». Проблема с последним заключается в том, что он заставляет пользователя читать ссылку, чтобы понять, почему он должен «Нажмите здесь». Якорный текст, такой как «Увидеть Бритни на пляже», говорит сам за себя. Это также более удобно для SEO.

Свяжите свой логотип

Всегда связывайте свой логотип с главной страницей. Большинство пользователей ожидают этого соглашения в Интернете. Тем не менее, не думайте, что пользователи знают об этом. Обычные серферы ожидают этого, но ряд пользователей все еще ищут ссылку «Домой».

 
Название сайта  

 h2 a {
фон: url(images/logo.gif) без повторов вверху слева;
дисплей: блок;
отступ текста: -9999px;
ширина: 200 пикселей;
высота: 60 ​​пикселей;
} 

Не открывайте новую Windows

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

Микроформаты

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