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

130

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

html

— Paic Ten
источник

4

Пайк, я не собираюсь снова откатывать теги, но, чтобы вы знали, единственный способ удалить подчеркивание - это использовать CSS . Да, даже если вы добавляете его в HTML (в styleатрибуте), это все равно CSS . Два других тега также полностью действительны ( presentationи hyperlink). В будущем не удаляйте (и не добавляйте) теги к вопросу, если для этого нет веской причины. Спасибо!

— 0b10011 01

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

— Paic Ten

3

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

— 0b10011 01

1

возможный дубликат Как убрать подчеркивание для якорей (ссылок)?

— RAS

2

Почему за этот вопрос так много голосов? Вы можете буквально ответить на него в одном поиске Google, и я уверен, что в StackOverflow есть много его дубликатов.

— Alternatex

192

Встроенная версия:

<a href="http://yoursite.com/" style="text-decoration:none">yoursite</a>

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

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

— patryk.beza
источник

1

убийца! Я ни разу не видел этих подчеркиваний за все годы, когда делал html .... ^^

— Alex

1

В ответе Джона по-прежнему используются встроенные стили. Разделение CSS означает больше, чем псевдоним CSS в вашем HTML. Например class="big-and-red", псевдоним, а не разделение. class="meaningful-domain-item"тогда css .meaningful-domain-item { //big and red }. Этого ответа достаточно, чтобы напомнить мне, какой тег использовать в моем CSS +1.

— Nathan Cooper

Этот вышеупомянутый код у меня не работал. Когда я вникаю в проблему, я понимаю, что она не работает, потому что я поместил стиль после href. Когда я поместил стиль перед href, он работал, как ожидалось. <a href=" yoursite.com "style="text-decoration:none"> yoursite </a>

— Ганеш М.С.

55

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

a {text-decoration: none; }

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

a.nounderline {text-decoration: none; }

Это будет применяться только к этим ссылкам и не затронет все остальные.

Этот код принадлежит к <head>вашему документу или к таблице стилей:

<head>
    <style type="text/css">
        a.nounderline {text-decoration: none; }
    </style>
</head>

А в теле:

<a href="#" class="nounderline">Link</a>

— Джон Конде
источник

15

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

a:hover {
   text-decoration:none;
}

— Римский
источник

6

Добавьте это во внешнюю таблицу стилей ( предпочтительно ):
```
a {text-decoration:none;}
```
Или добавьте это в <head>свой HTML-документ:
```
<style type="text/css">
 a {text-decoration:none;}
</style>
```

Или добавьте его в сам aэлемент ( не рекомендуется ):

<!-- Add [ style="text-decoration:none;"] -->
<a href="http://example.com" style="text-decoration:none;">Text</a>

— 0b10011
источник

4

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

Border и box-shadow - два других известных мне метода подчеркивания ссылок. Чтобы отключить их:

border: none;

и

box-shadow: none;

— Джо Голтон
источник

2

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

Лучше использовать решение, предоставленное Джоном Конде, но иногда использование внешнего CSS невозможно. Таким образом, вы можете добавить в свой HTML-тег следующее:

<a style="text-decoration:none;">My Link</a>

— nebulousGirl
источник

1

<style="text-decoration: none">

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

— sd1990
источник

1

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

<a style="text-decoration:none" href="http://yoursite.com/">yoursite</a>

— Ганеш М.С.
источник