Css style link: : The External Resource Link element — HTML: HyperText Markup Language

Leave a Comment / Css / By /

Полное руководство по оформлению ссылок с помощью CSS — Smashing Magazine

  • Чтение за 6 мин. Дизайн, Веб-дизайн
  • Поделиться в Twitter, LinkedIn
Об авторе

Ли Манро — руководитель отдела дизайна OneSignal и создатель HTMLemail.io из Сан-Франциско. Больше о Lee ↬

Гиперссылки (или ссылки) соединяют веб-страницы. Именно они заставляют работать Интернет, позволяя нам переходить с одной страницы на другую одним нажатием кнопки. Как выразились сторонники веб-стандартов, «без гипертекстовых ссылок Интернет не был бы Интернетом, а был бы просто набором отдельных, не связанных между собой страниц».

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

Дополнительная литература на 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

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

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

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

 Мой друг

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

Дополнительная литература

  • Целевые ссылки с прокладками для лучшего управления мышью, 37 сигналов
  • Десять главных ошибок в веб-дизайне, Useit
  • Рекомендации по визуализации ссылок, Useit
  • Стилизация текстовых ссылок, Andy Rutledge
  • Отображение признаков гиперссылок с помощью CSS
  • Не теряйте фокуса
9 0000 Создавайте стильные ссылки с помощью CSS. Как простой текст, кнопки, текст с иконками… | by aliceyt

Basic CSS

В виде обычного текста, кнопок, текста со значками и изображением

Опубликовано в

·

6 мин. чтения

·

18 января 2020 г.

На заре Интернета синий и подчеркнутый текст, вкрапленный среди черного текста и изображений на веб-страницах, был стандартом для ссылок.

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

Чистый вид против беспорядка

В этой статье я расскажу вам о стиле ссылки по умолчанию, а затем покажу вам общие стили для ссылок и как их создать в CSS:

  1. Стиль по умолчанию
  2. Ссылки, которые выглядят как любой другой текст
  3. Кнопки
  4. Текст, сопровождаемый значком
  5. Изображения в виде ссылок

Ссылки соединяют один веб-ресурс с другим.

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

Все эти функции зависят от вашего HTML-кода. Подробности можно найти в моей статье «Анатомия HTML-ссылок» (которая удобно иллюстрирует, как выглядит ссылка в статье на Medium).

Создать ссылку так же просто, как написать строку в документе HTML.

 Click me

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

Непосещенная ссылка, над которой наведен курсор Активная ссылкаПосещенная ссылка

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

Олли Уильямс, автор CSS Tricks, приводит несколько примеров:

Популярные веб-сайты отказались от подчеркивания: The New York Times, New York Magazine, The Washington Post, Bloomberg, Amazon, Apple, GitHub, Twitter, Wikipedia. Когда в 2014 году они удалили подчеркивания со своей страницы результатов поиска, ведущий дизайнер Google Джон Уайли утверждал, что это сделало ее более чистой.

Скриншот Yahoo.com 1990-х годов

ЖИРНЫЙ ТЕКСТ Medium — это пример сайта, который использует этот особый стиль в заголовках статей на своей главной странице.

Это может быть создано с использованием text-decoration, color и font-weight свойств тега привязки:

  • Text-decoration присвоено значение нет удалить подчеркнутый стиль на теге привязки
  • Цвет: черный и толщина шрифта: полужирный окрашивает текст, выделенный жирным шрифтом, в черный .

Результат

Код

href получает значение # в качестве заполнителя для относительного или абсолютного пути к веб-ресурсу. например https://www.google.com

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

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

ТЕКСТ С ПРОМЕЖУТОМ Google.com использует этот стиль для своих ссылок в верхнем и нижнем колонтитулах, и это обычный веб-дизайн. Подчеркнутый текст отображается в состоянии наведения (когда курсор касается ссылки).

Для создания этого стиля используйте text-decoration, color, и margin:

  • ext-decoration и color для создания черного текста без подчеркивания и 900 04
  • поле для создания пробелы между ссылками.
  • a:hover селектор, чтобы добавить подчеркнутый стиль к обычному тексту в состоянии наведения.

Примечание. Текстовое оформление удаляется во всех состояниях, прежде чем мы добавим его обратно в состояние наведения с помощью кнопки 9.0038 a: наведите селектор .

Результат

Код

Примечание. Хотя заполнение дает нам тот же визуальный эффект, мы используем поля для создания пробелов между элементами HTML.

Создание ссылки в виде кнопки может быть простым или сложным, в зависимости от того, хотите ли вы добавить эффект нажатия кнопки.

Послесловие: читатель предупредил меня, что мы должны включить role="button" в html для интерактивных элементов, которые вызывают ответ при активации пользователем. Это заставит элемент отображаться как кнопка управления для программы чтения с экрана. Для получения дополнительной информации, пожалуйста, прочитайте Документация MDN по ARIA: роль кнопки .

ИЗМЕНЕНИЕ ЦВЕТА ФОНА ПРИ НАВЕДЕНИИ

Medium использует простой стиль для своей кнопки. Ярко-зеленый цвет темнеет при наведении на него указателя мыши.

Чтобы создать этот эффект,

  • удалите подчеркнутый текст, используя text-decoration: none ,
  • добавьте пробел внутри кнопки, используя padding ,
  • измените background-color,
  • добавить темнее background-color в состоянии наведения.

font-family и border-radius установлены только для того, чтобы ссылка выглядела как на Medium.

Результат

Код

МЕНЯЕТ ЦВЕТ ШРИФТА ПРИ НАВЕДЕНИИ

У Booking.com есть ссылка, которая меняет цвет шрифта ссылки при наведении курсора.

Чтобы создать эффект, вам нужно всего лишь изменить значение свойства color селектора a:hover . Остальные изменения аналогичны предыдущему примеру, но с некоторыми изменениями, чтобы он больше походил на ссылки на Booking. com.

Результат

Код

Apple использует ссылку со значком шеврона для ссылок навигации по продуктам.

Мы можем создать ссылку с иконкой, используя иконки из Font Awesome. Как и раньше, нам нужно удалить подчеркнутый текст в ссылке, а затем добавить обратно в селектор a:hover .

Чтобы создать этот эффект,

  • добавьте значок в html-файл (используя html-код, указанный в Font Awesome),
  • удалите подчеркнутый текст, используя text-decoration: none ,
  • добавить пробел между текстом и значком с полем ,
  • изменить цвет текста ,
  • добавить стиль подчеркивания в состоянии наведения.

Результат

Код

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

Для этого вместо текста, используемого в качестве привязки к источнику (контент между , вместо этого мы добавляем изображение.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *