Как выделить ссылку

Как изменить ссылку — 8 способов изменить дизайн ссылок, чтобы выделить их

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

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

Большая проблема, которую я вижу на многих блогах — ссылки не выглядят как ссылки. Читатель узнает о них только при наведении на них курсора. Это неприемлемо.

Выделите свои ссылки! В этой статье я расскажу о 8 эффективных способах изменения стиля ссылок.

Добавьте цвет

Один из лучших способов выделить ссылку состоит в том, чтобы добавить цвет! Когда большая часть текста черного цвета, добавьте другие цвета, чтобы сделать ссылки заметнее.

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

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

Мэрайя c Femtrepreneur использует интересный красный цвет, чтобы выделить свои ссылки:

Чтобы изменить цвет ссылок на сайте, взгляните на таблицу стилей темы и найдите следующее:

Измените значение рядом с color . Это оно!

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

Нужна помощь в выборе цвета? Воспользуйтесь одним из популярных инструментов:

Сделайте жирнее

Еще один способ добавить контраста ссылкам состоит в том, чтобы сделать их полужирными. Выделение ссылки полужирным работает таким же образом.

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

Или используйте шрифт, который поддерживает различные значения насыщенности ( толщины ):

Например, шрифт Open Sans имеет толщину 300 , 400 , 600 , 700 и 800 . Если толщина текста 400 , то хорошим выбором для ссылок будет использование толщины 600 , 700 или 800 .

Добавьте подчеркивание

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

Чтобы осуществить подчеркивание ссылки CSS , используйте этот код:

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

В блоге KORY автор использует нижнюю границу для ссылок. Обратили внимание на большой разрыв между текстом и подчеркиванием? Это можно реализовать с помощью изменения внутреннего отступа ссылки:

Код для добавления границы ссылкам:

Небольшой совет : Не обязательно придерживаться сплошной границы. Можно попробовать один из приведенных ниже вариантов:

• CSS подчеркивание пунктиром ( dotted );
• Точечный ( dashed );
• Двойной ( double ).

Стиль курсивом

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

Вот как можно добиться этого:

Сделайте все буквы заглавными

Если вы посмотрите на посты в этом блоге , то заметите, что ссылки оформлены таким образом. Вот как можно оформить ссылки заглавными буквами:

Используйте другой шрифт

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

Выберите шрифт, который легко читается. Шрифт, используемый в теге body , скорее всего, меньше. Необычные шрифты при таком небольшом размере не будут легко читаться. Поэтому используйте шрифты семейства serif или sans-serif для достижения лучшей читабельности.

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

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

Добавьте фоновый цвет

Один из моих любимых способов выделить ссылку ( после подчеркивания точками CSS ) — добавить фоновый цвет. Посмотрите на следующий пример:

Вы ни в коем случае это не пропустите.

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

Комбинируйте!

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

ВЛ Виктория Лебедева автор-переводчик статьи «

5 способов выделить ссылки на сайте. Меняем дизайн ссылок

Когда вы включаете ссылку в блок текста без ссылки, важно убедиться, что ссылка выделяется и выглядит кликабельной.

Но когда вы разрабатываете интерфейс, где почти все является ссылкой, использование обработки, предназначенной для создания ссылок «pop» в тексте абзаца, может сильно доминировать.

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

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

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

5 способов выделить ссылки на сайте. Меняем дизайн ссылок

on 19, 2017

Базовая линия текста: что это такое, как выровнять шрифт по базовой линии

on 19, 2017

Акцент цвета в UI дизайне

on 19, 2017

Идеальная цветовая палитра сайта. Выбор основного оттенка интерфейса.

on 19, 2017

Цветовые модели в компьютерной графике

on 19, 2017

Как правильно выбирать шрифты для стилизации сайта. Критерии идеального шрифта.

on 19, 2017

Приемы стилизации абзацев на сайте

on 19, 2017

Какой выбрать шрифт для сайта: цвет, масштаб, стиль

on 19, 2017

Читабельность текста. Влияние выравнивания на удобочитаемость

on 19, 2017

О сайте

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

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

Установить стиль ссылок, которые ссылаются на другие сайты.

Решение

Универсальный способ, работающий во всех браузерах, состоит в создании нового класса и его добавлении к определенным ссылкам. Например, вводим класс blank и с помощью атрибута class применяем его к желаемым тегам (пример 1).

Пример 1. Использование классов

HTML5 CSS 2.1 IE Cr Op Sa Fx

       
Обычная ссылка





 
  

Результат примера показан на рис. 1.

Рис. 1. Вид ссылок, заданных с помощью стилей

В данном примере нижняя ссылка выделена с помощью жирного начертания, которое задается через стили для класса blank .

Более продвинутый способ состоит в использовании селектора атрибутов. Поскольку все ссылки на другие сайты пишутся с указанием протокола, например http, то достаточно задать стиль для тех ссылок, у которых значение атрибута href начинается на http:// . Это делается с помощью конструкции A[href^=»http://»] <. >, как показано в примере 2.

Пример 2. Селекторы атрибутов

HTML5 CSS 2.1 IE Cr Op Sa Fx

       
Обычная ссылка
 
Ссылка на сайт htmlbook.ru
  

Выделить ссылку на которой находишься

Как выделить ссылку на текущую страницу (на которой находишься)? Знаю, что в интернете миллион примеров, но ничего не подходит. Может дело именно в моей структуре. Пробовала множество способов и js и jquery .

 
 
Показать: Все продажи закупки менеджмент управление обучение маркетинг mind map переговоры ценообразование 
 

Отслеживать

Анна Матвеева

задан 30 мая 2021 в 17:36

Анна Матвеева Анна Матвеева

671 4 4 серебряных знака 14 14 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

$('.sort__navigation a.pr2').each(function() < //console.log(window.location.href, this.href); if (window.location.href == this.href) $(this).addClass('active'); >);

.active

 
 
Показать: Snippets Все продажи закупки менеджмент управление обучение маркетинг mind map переговоры ценообразование