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; /* нажатая ссылка */}

Результат:

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

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


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

Свойства:

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

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


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

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


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

 

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


Свойство «FONTSIZE»
Чтобы увеличить ссылку, достаточно воспользоваться уже известным вам  свойством «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 сек. */
}

Результат:

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

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


Свойство «BORDERBOTTOM»
Чтобы сделать у ссылки пунктирное подчеркивание при наведении, то вначале нужно убрать подчеркивание, а вместо подчеркивания прописать правило «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 {
  текст-оформление: подчеркивание;
}
  

Хорошие новости: подчеркивание снова круто!

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

Журнал WIRED

WIRED использует свойство CSS border-bottom для добавления сплошной синей границы под текстом ссылки. Он толстый и легко видимый, как если бы он действительно хотел, чтобы люди заметили и щелкнули по ссылкам. Этот пример кода CSS упрощен, чтобы проиллюстрировать их подход:

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

Вот скриншот из статьи Кевина Маркса «Как Интернет стал нечитаемым» в WIRED (хорошее чтение по теме):

Внешний журнал

Outside Online использует свойство CSS box-shadow для добавления сплошной желтой линии под текстом ссылки.Это имеет менее драматический эффект, чем тот, который используется WIRED, но, на мой взгляд, он действительно хорошо работает с их сайтом. Цвет соответствует их логотипу, и похоже, что кто-то подчеркнул ссылки желтым маркером (низкие технологии — это круто для любителей активного отдыха). Опять же, этот код CSS упрощен:

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

Вот снимок экрана из одной из моих самых любимых статей за пределами США, «Дьявол на Парадайз-роуд» (не по теме, но все же отличное чтение):

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

Есть еще крутые примеры?

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

офис 2019 satın al

Как отключить подчеркнутый текст в Dreamweaver | Small Business

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

Деактивация подчеркнутого текста на странице

Перейдите в «Файл», «Открыть», найдите файл, который вы хотите отредактировать, и нажмите «Открыть».»

Щелкните« Изменить »в строке меню, а затем щелкните« Свойства страницы ».

Выберите «Ссылки (CSS)» на панели «Категория» в левой части диалогового окна.

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

Нажмите «Применить», а затем «ОК».

Отключение подчеркнутого текста для отдельных ссылок

Выберите подчеркнутый текст ссылки.

Перейдите в «Просмотр» и нажмите «Код и дизайн».

Найдите код для текста ссылки, который выделен в исходном окне, и вставьте тег «style» после тега «a href».

Сконфигурируйте тег «style» так, чтобы он указывал на отсутствие оформления текста. Например, Home удалит подчеркивание с якорного текста «Home.»

Перейдите в« Файл »и нажмите« Сохранить ».

Ссылки

Автор биографии

Николь Гамильтон занимается написанием контента с 2005 года. Она использует свой журналистский стиль для создания информативных статей для таких веб-сайтов, как PencilsandPixelsArt.com. Гамильтон получил степень научного сотрудника в области мультимедийного дизайна в Общественном колледже Окалуза-Уолтон во Флориде.

Как удалить цвет ссылки по умолчанию тега html гиперссылки ‘a’?

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

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

CSS Styling Links, Чтобы удалить подчеркивание, вернитесь на вкладку HTML и добавьте text-decoration: none в тег стиля после точки с запятой только что добавленного значения цвета.Хорошо организованные и простые для понимания руководства по созданию веб-сайтов с множеством примеров использования HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java и XML.

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

HTML изменить цвет ссылки встроенный

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

Как изменить цвета ссылки в HTML, CSS ниже. Моя попытка встроенного css внутри контейнера div.<Стиль a: link = «color: # 33348e; украшение текста: нет Цвета ссылок HTML. По умолчанию ссылка будет выглядеть так (во всех браузерах): Непосещенная ссылка подчеркнута синим цветом; Посещенная ссылка подчеркнута фиолетовым цветом; Активная ссылка подчеркнута и красна; Вы можете изменить цвета состояния ссылки, используя CSS:

Встроенные стили для: link, a: hover и т. Д. В информационном бюллетене электронной почты, Как изменить цвет гиперссылки в HTML без CSS? Помощь! Необходимо развернуть эту рассылку по электронной почте сейчас.CSS не поддерживается некоторыми почтовыми клиентами, поэтому мне нужно установить встроенные стили для текстовых ссылок. Кажется, не могу понять. CSS ниже. Моя попытка

Изменить цвет гиперссылки html

Цвет ссылки HTML, Ссылка HTML отображается другим цветом в зависимости от того, была ли она посещена, не посещена или нет. Вы можете изменить цвета состояния ссылки с помощью CSS: Чтобы изменить цвет подчеркивания, прежде всего, вам нужно удалить его с помощью значения «none» свойства text-decoration и установить значение «none», затем добавить свойство border-bottom с шириной (в данном случае используется как ширина подчеркивания гиперссылки) и свойства стиля границы (сплошная, пунктирная или пунктирная).Для цвета текста привязки используйте цвет

HTML Link Colors, Link color с использованием шестнадцатеричных цветовых кодов. Для начала мы воспользуемся шестнадцатеричным цветовым кодом, вероятно, наиболее распространенным методом добавления цвета к ссылкам. В вашем теге привязки HTML HTML Link Colors. По умолчанию ссылка будет выглядеть так (во всех браузерах): Непосещенная ссылка подчеркнута синим цветом; Посещенная ссылка подчеркнута фиолетовым цветом.

CSS Styling Links, Code — HTML со встроенным стилем. изменить цвет гиперссылки Изменить цвета гиперссылки с помощью CSS На этой странице показаны 2 простых способа изменить цвет гиперссылок с помощью кода CSS. fly с встроенным CSS, добавив атрибут стиля непосредственно в код гиперссылки, вставив свойство цвета в атрибут стиля, а затем присвоив свойству цвета значение цвета.

Удалить подчеркивание из ссылки css

CSS Styling Links, Чтобы удалить подчеркивание из ссылки в HTML используйте свойство CSS text-decoration.Используйте его с атрибутом стиля. Атрибут style указывает, что посетитель написал, чтобы спросить, как она может «убрать подчеркивание со ссылок» на своей веб-странице. Поскольку она не указала веб-редактор (или, возможно, программное обеспечение для блога), который использовала, я покажу, как это делается в общих чертах с помощью CSS, чтобы это было полезно независимо от программного обеспечения.

Как убрать подчеркивание в ссылке в HTML ?, важно; в CSS, чтобы удалить подчеркивание ссылки. Ни то, ни другое не сработало. .квадратная голова .OtherPage {color: Я пытаюсь сделать так, чтобы ссылка отображалась белым без подчеркивания. Цвет текста отображается правильно как белый, но синее подчеркивание упорно сохраняется. Я пробовал оформление текста: нет; и текстовое оформление: нет! важно; в CSS, чтобы удалить подчеркивание ссылки. Ни то, ни другое не сработало.

Убрать лишнее подчеркивание со ссылки, Гиперссылка больше не будет подчеркнута. Используйте атрибут каскадной таблицы стилей оформления текста (CSS). В FrontPage 2003 щелкните вкладку «Код». Этот документ под названием «Удалить подчеркивание под ссылками в HTML / CSS» доступен по лицензии Creative Commons.Любая копия, повторное использование или модификация содержания должны быть в достаточной степени зачислены на счет CCM (ccm.net).

Цвет ссылки HTML

Цвета ссылки HTML, Цвета ссылки HTML. По умолчанию ссылка будет выглядеть так (во всех браузерах) :. Непосещенная ссылка подчеркнута синим цветом; Посещенная ссылка подчеркнута фиолетовым цветом. HTML-ссылка отображается разным цветом в зависимости от того, была ли она посещена, не посещена или активна. По умолчанию ссылка будет выглядеть так (во всех браузерах): непосещенная ссылка подчеркнута синим цветом.

CSS Styling Links, a: active — ссылка в момент нажатия.Пример. / * непосещенная ссылка * / a: link {color: red; } Кроме того, ссылки могут иметь разные стили в зависимости от того, в каком состоянии они находятся. Четыре состояния ссылок: a: link — обычная, непосещенная ссылка; a: посещено — ссылка, которую посетил пользователь

HTML Цвет ссылки, Цвет ссылки с использованием шестнадцатеричных цветовых кодов. Для начала мы воспользуемся шестнадцатеричным цветовым кодом, вероятно, наиболее распространенным методом добавления цвета к ссылкам. В вашем теге привязки HTML #link_bar a — это стиль для всех состояний ссылки. #Link_bar a: link — это стиль обычной ссылки.. #link_bar a: loaded — стиль посещенной ссылки. #link_bar a: hover — это стиль ссылки при наведении курсора мыши.

Удалить подчеркивание из ссылки html

Как удалить подчеркивание в гиперссылках, использующих FrontPage 2003, Как удалить подчеркивание в гиперссылке в CSS? Чтобы удалить подчеркивание из ссылки в HTML, используйте свойство CSS text-decoration. Используйте его с атрибутом стиля. Атрибут style определяет встроенный стиль для элемента. Используйте атрибут style со свойством CSS text-decoration, чтобы удалить подчеркивание из ссылки в HTML.

Как удалить подчеркивание из ссылки в HTML ?, Чтобы удалить подчеркивание из ссылки в HTML, используйте свойство CSS text-decoration. Используйте его с атрибутом стиля. Атрибут style указывает, как минимум, вам нужно знать, как вставлять CSS и HTML на веб-страницу. Свойство text-decoration. Свойство CSS, которое обрабатывает подчеркивание, называется text-decoration. По умолчанию для ссылок используется подчеркивание. Чтобы все ссылки не подчеркивались, добавьте в таблицу стилей следующее правило:

‍ Подчеркивание с использованием CSS text-decoration и HTML U Element ‍, Встроенная версия: yoursite . Однако помните, что обычно вы должны разделять Paic, я не собираюсь снова откатывать теги, но, чтобы вы знали, единственный способ удалить подчеркивание — это использовать CSS. Да, даже если вы добавляете его встроенным в HTML (в атрибуте style), это все еще CSS. Два других тега также полностью действительны (презентация и гиперссылка). В будущем, пожалуйста, не удаляйте (или добавить

Цвет посещенной ссылки HTML

Цвета ссылки HTML, HTML-ссылка отображается другим цветом в зависимости от того, была ли она посещена, не посещена или активна.Цвета ссылок HTML. По умолчанию отображается ссылка. Селектор: посещенный используется для выбора посещенных ссылок. Совет. Используйте селектор: link для стилизации ссылок на непосещенные страницы, селектор: hover для стилизации ссылок при наведении на них указателя мыши и селектор: active для стилизации ссылок при нажатии на них. Браузеры ограничивают стили, которые могут быть установлены для посещенных ссылок, из-за проблем с безопасностью. Допустимые стили:

CSS Styling Links, цветовые части заливки и обводки. Все остальные стили унаследованы от: link.Версия: CSS1. Поддержка браузера. Номера в Кроме того, ссылки могут иметь различный стиль в зависимости от того, в каком состоянии они находятся. Четыре состояния ссылок: a: link — обычная, непосещенная ссылка; a: посещенный — ссылка, которую посетил пользователь

CSS: посещенный селектор, vlink — посещенная ссылка — на страницу, на которую посетитель был ранее. (стандартный цвет фиолетовый — # 800080). alink — активная ссылка — цвет ссылки при наведении на нее мыши. a: link — обычная непосещенная ссылка, a: loaded — ссылка, которую посетил пользователь, a: hover — ссылка, когда пользователь наводит на нее курсор мыши, a: active — момент щелчка по ссылке.При настройке стиля для нескольких состояний ссылки следуйте этим правилам: a: hover ДОЛЖЕН стоять после: link и a: loaded, a: active ДОЛЖЕН идти после: hover. Пример использования различных состояний ссылки:

Удалить цвет ссылки css

CSS Styling Links, файл css. Если вам нужен другой цвет и стиль оформления, вы можете легко изменить значения по умолчанию, используя приведенный ниже фрагмент кода. a, a Вы можете использовать значения системного цвета (18.2), представленные в CSS 2.0, но не рекомендуемые в CSS 3. a: link, a: hover, a: active {color: WindowText; } Таким образом, ваши якорные ссылки будут того же цвета, что и обычный текст документа в этой системе.

Как удалить цвет ссылки по умолчанию для тега html гиперссылки ‘a’, Цвет ссылки CSS: как легко изменить цвет ссылки CSS? Научитесь удалять подчеркивание из ссылки в CSS, сделанном просто. Ознакомьтесь с цветом нашей ссылки CSS. Для ссылок можно использовать любое свойство CSS (например, цвет, шрифт. Свойство text-decoration в основном используется для удаления подчеркивания ссылки {background-color: yellow;

Освоение цвета ссылки CSS: Использование ссылок CSS с Реальные примеры, Для управления цветом текста с гиперссылками и удаления подчеркивания необходимо использовать встроенные стили CSS для тегов .Например: вы хотите изменить. Есть три способа изменить цвет ссылки: встроенный, внутренний и внешний. Встроенный метод¶ Добавьте атрибут стиля непосредственно в код гиперссылки и укажите свойство цвета с помощью атрибута стиля, затем присвойте ему значение цвета. Пример изменения цвета ссылки встроенным методом:

Еще статьи

Разочарованы голубыми ссылками в электронной почте? Покорите их навсегда

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

За прошедшие годы мы увидели несколько способов обработки синих ссылок в электронных письмах HTML, от простых до сложных.

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

Осторожно: есть и другие виновники неработающего электронного письма

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

Выявить общие проблемы и исправления →

Что такое синие ссылки?

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

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

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

Большинство версий Apple Mail для iOS превращают номера телефонов, URL-адресов и адреса электронной почты в синий цвет, но оставляют физические адреса и время в исходном цвете (красный в примере ниже).

В iOS 13 контент по-прежнему связан, но сохраняется исходный стилизованный цвет:

В нашем тестировании эти объекты являются основными кандидатами на роль связанного контента (синего или другого цвета):

  • Адреса
  • Даты
  • Адреса электронной почты
  • URL-адреса веб-сайтов
  • раз
  • Телефоны

Преимущества синих ссылок: удалять их или нет?

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

Это вызывает дискуссию: должны ли мы вообще отвергать такое поведение?

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

Итак, что должны делать дизайнеры электронной почты?

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

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

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

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

Итак, как дизайнеры электронной почты могут работать с синими ссылками?

Лучший способ переопределить стиль автосвязки

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

У этого метода есть много преимуществ. Вы можете:

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

Это беспроигрышный вариант как для вас, так и для ваших подписчиков.

Единственный нюанс? Разные почтовые клиенты делают разные вещи при автоматическом связывании текста, поэтому вам понадобится несколько правил CSS для переопределения стиля.

Есть ли в ваших электронных письмах синие ссылки?

Всегда знать, когда почтовые клиенты обновляют рендеринг электронной почты с помощью Litmus Email Previews. Просматривайте свои электронные письма во всех популярных почтовых клиентах и ​​устройствах и выявляйте ошибки перед отправкой.

Узнать больше →

Переопределение синих ссылок в Apple Mail

При создании ссылок вокруг текста Apple Mail добавляет к этим ссылкам дополнительные атрибуты помимо обычного href.

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

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