Подчеркивание ссылок css: Как убрать подчёркивание ссылок — Блог HTML Academy

Как изменить подчеркивание ссылок на веб-странице

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

Удаление подчеркивания в текстовых ссылках

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

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

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

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

Предупреждение об удалении подчеркиваний

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

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

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

Измените подчеркивание на точки или тире

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

a {текстовое оформление: нет; граница снизу: пунктирная 1px; }

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

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

a {текстовое оформление: нет; граница снизу: пунктирная 1px; }

Изменить цвет подчеркивания

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

a {текстовое оформление: нет; граница: 1px сплошной красный; }

Двойное подчеркивание

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

a {текстовое оформление: нет; Граница внизу: 3px двойной; }

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

a {border-bottom: 1px double; }

Не забывайте о ссылочных состояниях

Вы можете добавить стиль границы внизу для ваших ссылок в различных состояниях, таких как: hover,: active или: visit. Это может создать приятный опыт в стиле «ролловер» для посетителей, когда вы используете этот псевдокласс «зависания». Чтобы при наведении курсора на ссылку появилось второе пунктирное подчеркивание:

a {текстовое оформление: нет; } 
a: hover {border-bottom: 1px dotted; }

css — применить стиль подчеркивания гиперссылки только к телу

спросил 1 год, 11 месяцев назад

Изменено 1 год, 11 месяцев назад

Просмотрено 592 раза

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

 а {
   текстовое оформление: нет;
   нижняя граница: #EA215A 0,125 мкм сплошная;
}
 

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

• css
• стиль
• стиль текста

Не существует единого кода, который работает на всех веб-сайтах. Это зависит от HTML-кода — можете поделиться?

Предполагая HTML5, используйте селектор

Текст статьи, скорее всего, находится в теге

 статья a {
  текстовое оформление: нет; нижняя граница: #EA215A 0,125 мкм сплошная;
}