Css ссылки не подчеркивать: Ссылки без подчеркивания | htmlbook.ru

css — vue-router: как удалить подчеркивание из router-link

Это приводит к подчеркнутой ссылке:

<li><router-link to="/hello">Hello</router-link></li>

Насколько я понимаю, элемент router-link генерирует тег a.

Я пробовал эти вещи в CSS:

router-link{
    text-decoration: none;
}

router-link a{
    text-decoration: none;
}

router-link a{
    text-decoration: none !important;
}

..но к сожалению ни одна из этих работ.

13

rpivovar

28 Июн 2017 в 19:52

7 ответов

Лучший ответ

Теги компонента Vue не генерируют теги HTML.
Загляните в инспектор DOM, чтобы увидеть, какие HTML-теги действительно существуют.

Вам нужно использовать обычные имена классов.

6

SLaks
28 Июн 2017 в 16:54

Вы можете использовать тег prop ссылки на маршрутизатор, чтобы использовать класс li css следующим образом:

<li><router-link tag="li" to="/hello">Hello</router-link></li>

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

7

alexcodes
19 Ноя 2019 в 12:29

SCSS

div /deep/ .v-list a {
    text-decoration: none;
}

CSS

div >>> .v-list a{
    text-decoration: none;
}

1

Kowayne Wynter
6 Май 2020 в 06:48

Добавьте класс к тегу router-link:

<router-link to="/hello">Hello</router-link>

Затем передайте класс классу:

.routerLink{
     text-decoration: none;
 }

Это должно работать 🙂

2

Nobin Jacob
5 Мар 2020 в 17:18

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

<router-link

 to="/hello" }}">

4

Winters
22 Апр 2020 в 03:06

Он конвертируется в <a ...
Таким образом, чтобы удалить подчеркивание попробуйте это

a {  text-decoration: none;}

6

Suraj Rao
4 Июн 2019 в 11:45

Вы можете попробовать нацелить ссылку на элемент списка следующим образом:

li a {
    text-decoration: none;
}

13

Derek Pollard
26 Апр 2019 в 16:14

Как на сайте убрать подчеркивание ссылок на CSS?

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

Зачем подчеркивают ссылки?

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

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

Вот так выглядели первые интернет-сайты:

Гиперссылки сразу выделяются на фоне окружающего текста.

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

Выделение ссылок

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

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

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

Изменение стиля гиперссылки

Убрать подчеркивание ссылки на CSS очень просто. Для этого существует специальная инструкция text-decoration. Она заведует оформлением фрагмента текста с помощью горизонтальной линии и определяет ее конкретное расположение.

Список значений, которые может принимать это свойство:

• underline – нижнее подчеркивание;
• overline – верхнее подчеркивание, линия проходит над текстом;
• line-through – зачеркивание, линия проходит посередине строки;
• none – отсутствие оформления.

По умолчанию браузеры применяют к гиперссылкам инструкцию text-decoration: underline. Очевидно, что нас интересует значение none. Оно позволяет обнулить ранее примененные стили, а также сбросить оформление по умолчанию.

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

a {
  text-decoration: none;
}

Поддержка браузерами

Свойство text-decoration и его значение none отлично поддерживаются всеми существующими браузерами, включая их старые версии, так что убрать подчеркивание ссылки на CSS можно без особенных трудностей.

Оформление ссылок в CSS. Основы CSS для начинающих. Урок №11

Оформление ссылок в CSS. Основы CSS для начинающих. Урок №11

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

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

Цвет ссылки в CSS

Свойство «COLOR»
Чтобы заменить цвет ссылки воспользуйтесь свойством «color» для селектора «a».

a {color:#006400;/* цвет ссылки */}

Псевдоклассы для ссылок

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

Синтаксис:

a:имя_псевдокласса { /* стиль */}

Свойства (имена псевдоклассов):

• link — непосещенная ссылка
• visited — ссылка, которую уже посетил пользователь
• hover — состояние ссылки, на которую навели курсор мышки
• active — активная ссылка, на которую нажали

Теперь пример.
Предлагаю для примера показать стандартные ссылки, которые были добавлены через HTML без оформления CSS.

[посмотреть пример]

Теперь изменим оформление ссылок через CSS.

Добавьте вот эту ссылку в HTML код:

<a href="http://stepkinblog.ru/">STEPKINBLOG.RU</a>

Теперь вот этот код в CSS:

a {color:#006400;/* цвет ссылки */}
a:hover {color:#FF0000;/* ссылка при наведении на нее мышкой */}
a:active {color:#cccccc; /* нажатая ссылка */}

Результат:

[посмотреть пример]

Ссылка без подчеркивания

Свойство «TEXT—DECORATION»
Чтобы убрать подчеркивание у ссылки, воспользуйтесь свойством «text-decoration» со значением «none».

Свойства:

• line-through — перечеркнутый текст;
• overline — подчеркивание над текстом;
• underline  — подчеркнутый текст;
• none – без подчеркивания.

Сейчас я сделаю так, что при наведении на ссылку, подчеркивание исчезнет.

a:hover
{
text-decoration: none; /* Убираем подчеркивание у ссылки при наведении */
}

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

a
{
text-decoration: none; /* Убираем подчеркивание у ссылки */
}
a:hover
{
text-decoration: overline; /* Подчеркивание над ссылкой при наведении */
}

Размер ссылки

Свойство «FONT—SIZE»
Чтобы увеличить ссылку, достаточно воспользоваться уже известным вам  свойством «font-size»:

a:hover
{
text-decoration: none; /* Убираем подчеркивание у ссылки */
color: #cc0000; /* цвет ссылки при наведении */
font-size: 28px; /* размер ссылки при наведении */
}

Можно еще добавить к ссылке плавное увеличение (анимация):

transition:all 1s ease; /* плавное увеличение размера в 1 сек. */

Пример:

a:hover
{
text-decoration: none; /* Убираем подчеркивание у ссылки */
color: #cc0000; /* цвет ссылки при наведении */
font-size: 28px; /* размер ссылки при наведении */
transition:all 1s ease; /* плавное увеличение размера в 1 сек. */
}

Результат:

[ посмотреть пример ]

Пунктирное подчеркивание у ссылки

Свойство «BORDER—BOTTOM»
Чтобы сделать у ссылки пунктирное подчеркивание при наведении, то вначале нужно убрать подчеркивание, а вместо подчеркивания прописать правило «border-bottom»:

a
{
text-decoration: none; /* Убираем подчеркивание у ссылки */
}
a:hover
{
text-decoration: none; /* Убираем подчеркивание у ссылки */
border-bottom:dashed;/* пунктирное подчеркивание у ссылки */
}

Результат:

[ посмотреть пример ]

Вот и все!
Жду вас на следующих уроках!

Предыдущая запись
Списки в CSS. Основы CSS для начинающих. Урок №10
Следующая запись
Рамка в CSS. Основы CSS для начинающих. Урок №12

Узнаем как на сайте убрать подчеркивание ссылок на CSS?

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

Зачем подчеркивают ссылки?

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

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

Вот так выглядели первые интернет-сайты:

Гиперссылки сразу выделяются на фоне окружающего текста.

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

Выделение ссылок

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

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

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

Изменение стиля гиперссылки

Убрать подчеркивание ссылки на CSS очень просто. Для этого существует специальная инструкция text-decoration. Она заведует оформлением фрагмента текста с помощью горизонтальной линии и определяет ее конкретное расположение.

Список значений, которые может принимать это свойство:

• underline – нижнее подчеркивание;
• overline – верхнее подчеркивание, линия проходит над текстом;
• line-through – зачеркивание, линия проходит посередине строки;
• none – отсутствие оформления.

По умолчанию браузеры применяют к гиперссылкам инструкцию text-decoration: underline. Очевидно, что нас интересует значение none. Оно позволяет обнулить ранее примененные стили, а также сбросить оформление по умолчанию.

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

a {    text-decoration: none;  }

Поддержка браузерами

Свойство text-decoration и его значение none отлично поддерживаются всеми существующими браузерами, включая их старые версии, так что убрать подчеркивание ссылки на CSS можно без особенных трудностей.

подчеркнутых ссылок | Введение в специальные возможности

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

Мы уже говорили о важности правильно объявленных ссылок. Основная визуальная разметка ссылки — подчеркивание. Подчеркивание ссылки выделяет ее среди остального текста.Это хорошо. Но есть проблема с подчеркиванием. У каждой буквы есть базовая линия. Думайте об этом как о линии, на которой находится письмо. Некоторые буквы — например, g, p, q, y, j — сидят на этой линии и «позволяют ногам болтаться». Подчеркивая слово, вы помещаете линию над этими частями букв, и их становится трудно читать.

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

Наш базовый стиль:

  a: парение {цвет: красный; }  

Вы помните, как выглядит ссылка без стиля? Вот как это выглядит. Синий и с подчеркиванием. В нашем примере мы используем слово «Типографика».

Решение 1

  a.border {
    высота строки: 1.2em;
    текстовое оформление: нет;
    нижняя граница: сплошной синий 1px;
}
a.border: hover {
    цвет нижней границы: красный;
}  

Благодаря этому решению у нас нет линии, проходящей через нижние элементы.Но это сложно поддерживать. Также подчеркивание может показаться немного «выключенным».

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

Решение 2

  a.text-shadow {
    текстовое оформление: нет; / * нам не нужен этот нативный стиль ссылки * /
    нижняя граница: сплошной синий цвет 3 пикселя; / * из-за этой границы * /
    дисплей: встроенный блок;
    высота строки: 0,85; / * контролирует положение границы * /
    text-shadow: / * закрашивает границу, применяя 'свечение' * /
    2px 2px белый,
    2px -2px белый,
    -2px 2px белый,
    -2px -2px белый;
}
a.text-shadow: hover {
    цвет границы: красный;
}  

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

Это кажется хорошей идеей. В основном он делает то, что мы хотим. Подчеркивание прерывается, как только встречается «свисающая часть букв». Однако риск такой же, как и в случае с решением 1, т.е. вы не можете размещать ссылку на каждом фоне. Когда ваш CSS содержит текстовую тень для желтого вместо белого, вы не можете использовать тот же CSS для ссылки на белом или темном фоне. Текстовая тень должна соответствовать цвету фона.

Решение 3

  а.чернила {
    -webkit-text-decoration-skip: чернила;
    текст-украшение-пропуск: чернила;
}  

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

К сожалению, это интеллектуальное решение не является стандартом, поэтому не всегда хорошо поддерживается браузерами. Тем не менее, он делает именно то, что мы хотим. Все так называемые спусковые устройства пропускаются и не удаляются. Опять же, это плохо поддерживается. Только Safari и Chrome / Opera поймут это объявление CSS.Фактически, Safari изначально делает это как ссылку для пропуска текста. Ух ты!

У первой ссылки нет стиля. Ко второму применено решение «пропустить текст-украшение-пропустить». Safari отображает подчеркнутые ссылки, например, если у них есть text-decoration-skip.

Небольшой совет

А по словам человека с дислексией:

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

Поддержка браузера

Chrome с 61, Safari с 10.1 (требуется префикс -webkit — хотя ссылки будут обрабатываться так, как если бы к ним применено -webkit-text-decoration-skip [приблизительно с середины 2017 года]), iOS Safari с 9.3, Chrome для Android с 61 года. Будем надеяться, что этот очень полезный метод получит больше поддержки со стороны разработчиков браузеров.

Сделайте все возможное

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

   Типографика   

  @supports not ((text-decoration-skip: ink) или (-webkit-text-decoration-skip: ink)) {
    а.ink-alt {
        текстовое оформление: нет;
        нижняя граница: сплошной синий цвет 3 пикселя;
        обивка-дно: .2vh;
    }
    a.ink-alt: hover {
        цвет границы: красный;
    }
}
a.ink-alt {
    -webkit-text-decoration-skip: чернила;
    текст-украшение-пропуск: чернила;
}
a: hover {
    красный цвет;
}  

Как подчеркивание в тексте может улучшить UX

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

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

Исторический контекст

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

Изображение Marcin Wichary

Было использовано в рекламе.

Реклама Wrigley’s Spearmint (1915 г.).

Мы даже находим это в нашем ближайшем окружении.

Некоторые дорожные знаки с важной информацией содержат подчеркнутый текст. Изображение Тайлера Б.

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

Подчеркивание ссылок

Когда Тим Бернерс-Ли впервые представил концепцию Всемирной паутины в 1991 году, он заявил: «[Всемирная паутина] состоит из документов и ссылок.С тех пор ссылки стали фундаментальным элементом онлайн-опыта, клеем, скрепляющим Интернет.

Набор инструментов первых веб-дизайнеров был слишком ограничен — только простые шрифты и ограниченное количество цветов (цветные мониторы отображали только 16 цветов, а многие были только черно-белыми). Но акцент на ссылках с другим стилем был необходим, чтобы ранние последователи могли понять, какие элементы на странице важны. Самым простым решением было подчеркнуть.С тех пор подчеркивание текста стало стандартным украшением гиперссылок HTML. И хотя дизайнеры пробовали разные стили для ссылок в течение последних 30 лет, многие веб-дизайнеры по-прежнему отдают предпочтение подчеркиванию.

Гиперссылка, подчеркнутая синим цветом, является одним из наиболее широко понимаемых правил Интернета. Изображение Cern

Подчеркнутые ссылки имеют несколько основных преимуществ.

• Знакомство. Подчеркивание — это одно из наиболее широко используемых в Интернете условностей. Подчеркивание обеспечивает очевидную возможность кликабельности — подавляющее большинство пользователей понимают, что подчеркнутый текст является ссылкой.
• Возможность сканирования. Подчеркнутый текст — отличный визуальный сигнал, который гарантирует видимость ссылки при сканировании текста. Когда мы сканируем страницы по вертикали, любая горизонтальная линия будет проходить прямо через линию нашего обзора. Подчеркивание направляет пользователей к важной информации во время беглого просмотра.
• Доступность. Когда для различения интерактивных элементов используется только цвет, у некоторых групп пользователей (например, дальтоников) могут возникнуть проблемы с идентификацией ссылок. Согласно WCAG 2.0, цвет не должен быть единственным визуальным индикатором потенциального действия. Если вы хотите, чтобы ваш веб-сайт был доступен, вам придется добавить еще одну визуальную подсказку к ссылкам, и подчеркивание — логичный выбор.

Несмотря на все свои преимущества, подчеркивание может в некоторой степени затруднить взаимодействие с пользователем.

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

Создание идеального подчеркивания

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

Не подчеркивайте текст, не являющийся ссылкой

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

Будьте краткими

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

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

Текст привязки — это интерактивный текст в ссылке. Он должен быть описательным — пользователи должны уметь предугадывать, что они получат, щелкнув ссылку. По этой причине избегайте якорного текста, такого как «щелкните здесь», потому что он почти ничего не говорит о содержании ссылки и заставляет пользователей искать дополнительную информацию о том, на что именно они будут нажимать. Ссылки «Щелкните здесь» также делают веб-сайт менее доступным для людей, использующих программы чтения с экрана.Большинство программ чтения с экрана говорят «ссылка» перед каждой ссылкой. Например, ссылка «автомобили» будет прочитана JAWS как «ссылочные автомобили». Таким образом, вы можете ожидать, что JAWS прочитает ссылку «нажмите здесь» как «ссылку нажмите здесь», что совершенно неинформативно.

Согласно «Руководству для начинающих по поисковой системе» Google, размещение слов, предвосхищающих целевую страницу, в начале текста ссылки имеет решающее значение.

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

Последовательный дизайн ссылок

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

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

Все ссылки в статье подчеркнуты (см. Пример «Давид де Руэда»). Между тем CNN Sport использует цвет, чтобы визуально различать ссылки. Все ссылки в статье визуально разделены другим цветом (см. «ЧИТАЙТЕ: Внутри Кодокана — духовного дома дзюдо»).

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

Отказ устройства опускания — это, пожалуй, вторая по значимости проблема, вызванная подчеркиванием (после беспорядка). Это происходит, когда символы, содержащие нижние элементы (например, строчные p, g, j, y и q), не учитываются, а подчеркивание касается букв.Это может привести к беспорядку и уродливому виду и сделать текст менее разборчивым.

Нижние элементы y, g и p врезаются в подчеркивание, что ухудшает читаемость.

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

Вот пример подчеркнутого текста в Adobe XD. Подчеркивание используется только там, где оно не касается глифа и не приближается к нему.

Как предотвратить сбой устройства для спуска? Ссылки в Интернете имеют свойство text-decoration — по умолчанию подчеркивание CSS.К сожалению, это свойство не учитывает нижние элементы.

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

Свойство text-decoration-skip пока поддерживается не всеми браузерами. Альтернативы (такие как box-shadow) стоит изучить, если ваш текст трудно читать без него.

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

Color

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

Избегайте раскрашивания неинтерактивного текста

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

Ссылки должны быть синими?

Не обязательно.По словам Якоба Нильсена, «оттенки синего обеспечивают самый сильный сигнал для ссылок, но другие цвета работают почти так же». Однако, если вы можете выбрать цвет для ссылок, лучше всего всегда будет синий. Это по-прежнему цвет с самой сильной предполагаемой возможностью кликабельности — опытный веб-пользователь ассоциирует «синий и подчеркнутый» со ссылками. И у цвета есть одно существенное преимущество перед другими — он наиболее доступен для людей с дефицитом цвета (его могут видеть люди, страдающие протанопией и дейтеранопией).

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

Используйте разные цвета для посещенных и непосещенных ссылок

Визуальное различение посещенных и непосещенных ссылок упростит путь пользователя, поскольку пользователи смогут отслеживать то, что они видели. Два цвета должны быть вариантами или оттенками одного цвета, чтобы они были четко связаны.Цвет непосещенных ссылок должен быть более насыщенным, а цвет посещенных — немного более тусклым.

Не подчеркивать списки ссылок

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

Нет необходимости подчеркивать каждый элемент в этом списке. Изображение Wisegeek.

Рекомендации для мобильных устройств

Сегодня почти 50 процентов пользователей выходят в Интернет с мобильных устройств. Оптимизация работы в Интернете для мобильных пользователей — главный приоритет веб-дизайнеров.

Избегайте ссылок в мобильных приложениях

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

Приложение TD Bank для iOS.

Сделайте ссылки достаточно большими

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

Заключение

Ссылки делают Интернет тем, чем он является. В своей классической книге по удобству использования, Не заставляйте меня думать , Стив Круг пишет: «Поскольку большая часть того, что люди делают в Интернете, — это поиск следующей вещи, на которую нужно щелкнуть, важно сделать очевидным, что кликабельно. а что нет ». Надежный визуальный дизайн важен для того, чтобы сделать путешествие пользователя приятным. Хотя у подчеркивания есть свои недостатки, оно остается одним из наиболее явных способов указать на наличие ссылки.Подчеркивание текста упрощает поиск и понимание ссылок для посетителей.

Стилизация различных состояний ссылки с помощью CSS

Из этого туториала Вы узнаете, как стилизовать различные состояния ссылки с помощью CSS.

Стилизация ссылок с помощью CSS

Ссылки или гиперссылки являются неотъемлемой частью веб-сайта. Это позволяет посетителям перемещаться по сайту.Поэтому правильное оформление ссылок — важный аспект создания удобного веб-сайта.

См. Руководство по ссылкам HTML, чтобы узнать больше о ссылках и о том, как их создавать.

Ссылка имеет четыре различных состояния — ссылка , посещена , активна и зависает . Эти четыре состояния ссылки можно стилизовать по-разному, используя следующие селекторы псевдокласса привязки.

• a: link — определение стилей для обычных или непосещаемых ссылок.
• a: visit — определение стилей для ссылок, которые пользователь уже посетил.
• a: hover — определить стили для ссылки, когда пользователь наводит на нее указатель мыши.
• a: active — определение стилей для ссылок при нажатии.

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

  a: link {/ * непосещенная ссылка * /
    цвет: # ff0000;
    текстовое оформление: нет;
    нижняя граница: сплошная 1px;
}
a: посещенная {/ * посещенная ссылка * /
    цвет: # ff00ff;
}
a: hover {/ * наведите указатель мыши на ссылку * /
    цвет: # 00ff00;
    нижняя граница: нет;
}
a: active {/ * активная ссылка * /
    цвет: # 00ffff;
}  

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

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

Изменение стилей стандартных ссылок

Во всех основных веб-браузерах, таких как Chrome, Firefox, Safari и т. Д.ссылки на веб-страницах имеют подчеркивание и используют цвета ссылок браузера по умолчанию, если вы не устанавливаете стили исключительно для них.

По умолчанию в большинстве браузеров текстовые ссылки будут выглядеть следующим образом:

• Непосещенная ссылка в виде подчеркнутого синего текста.
• Посещенная ссылка в виде подчеркнутого фиолетового текста.
• Активная ссылка в виде подчеркнутого красного текста.

Однако при наведении курсора внешний вид ссылки не меняется.Он остается синим, пурпурным или красным в зависимости от того, в каком состоянии (т. Е. Не посещен, посещен или активен) они находятся.

Теперь давайте посмотрим, как настроить ссылки, переопределив их стиль по умолчанию.

Настройка пользовательского цвета ссылок

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

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

  a: link {
    цвет: # 1ebba3;
}
а: посетил {
    цвет: # ff00f4;
}
a: hover {
    цвет: # a766ff;
}
a: active {
    цвет: # ff9800;
}  

Удаление подчеркивания по умолчанию из ссылок

Если вам не нравится подчеркивание по умолчанию в ссылках, вы можете просто использовать свойство CSS text-decoration , чтобы избавиться от него.В качестве альтернативы вы можете применить к ссылкам другой стиль, например цвет фона, нижнюю границу, полужирный шрифт и т. Д., Чтобы он немного лучше выделялся из обычного текста.

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

  a: ссылка, a: посетил {
    текстовое оформление: нет;
}
a: hover, a: active {
    текст-оформление: подчеркивание;
}  

Придание текстовым ссылкам вида кнопок

Вы также можете сделать ваши обычные текстовые ссылки похожими на кнопку с помощью CSS.Для этого нам нужно использовать еще несколько свойств CSS, таких как background-color , border , display , padding и т. Д. Вы узнаете об этих свойствах подробно в следующих главах.

Давайте посмотрим на следующий пример и посмотрим, как он работает на самом деле:

  a: ссылка, a: посетил {
    цвет белый;
    цвет фона: # 1ebba3;
    дисплей: встроенный блок;
    отступ: 10 пикселей 20 пикселей;
    граница: 2px solid # 099983;
    текстовое оформление: нет;
    выравнивание текста: центр;
    шрифт: 14px Arial, без засечек;
}
a: hover, a: active {
    цвет фона: # 9c6ae1;
    цвет границы: # 7443b6;
}  

Подчеркните ваши ссылки! — Террилл Томпсон

Есть ли у вас контроль или влияние на дизайн одной или нескольких веб-страниц? Если да, то я призываю вас добавить это новогоднее постановление в свой список: Подчеркните свои ссылки!

С момента появления Интернета браузеры подчеркивали ссылки, чтобы пользователи могли отличать текст ссылки от окружающего текста.Фактически, все основные браузеры по-прежнему делают это по умолчанию. Вы когда-нибудь задумывались, почему? Ответ: Потому что это по-прежнему эффективный способ коммуникации «это ссылка».

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

Что плохого в использовании цвета как единственного средства идентификации ссылок?

Во-первых, это нарушение WCAG 2.0 на уровне A:

1.4.1 Использование цвета: Цвет не используется в качестве единственного визуального средства передачи информации, указания действия, побуждения к ответу или выделения визуального элемента. (Уровень А)

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

Что еще хуже, среди дизайнеров наблюдается тенденция к использованию очень тонких цветовых различий.В следующем примере показан ответ на вопрос в UX Stack Exchange. Пользователь задал вопрос «Должны ли гиперссылки быть синими?», И главный ответ включает следующую просьбу: «Еще важнее, чем выбор цвета, подчеркивать ваши ссылки, по крайней мере, для ссылок, которые не находятся сверху или сбоку. барное меню. » По иронии судьбы, фраза «подчеркните ссылки» сама по себе является ссылкой без подчеркивания. Текст ссылки темно-синий, который для моих глаз очень трудно отличить от окружающего текста, если я не держу компьютер под прямым углом.

К счастью, Stack Overflow (компания, стоящая за сетью Stack Exchange Network) знает об их доступности и работает над ними. Ждем позитивных изменений на их сайтах в 2018 году!

Решение

В CSS сделайте следующее:

 
a {
  текст-оформление: подчеркивание;
}
  

Не делайте этого:

 
a {
  текстовое оформление: нет;
}
  

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

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

 
a {
  текстовое оформление: нет;
}
main a {
  текст-оформление: подчеркивание;
}
  

 
a {
  текстовое оформление: нет;
  нижняя граница: 3px solid # b4e7f8;
}
  

 
a {
  текстовое оформление: нет;
  box-shadow: вставка 0 -3px 0 -1px # ffd204;
}