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

313

Есть ли в любом случае (в CSS), чтобы избежать подчеркивания для текста и ссылок, представленных на странице ..?

Стивен
источник
8
<penantic> Вы никогда не сможете предположить, как браузер будет отображать ваш HTML. тег отображает привязку, которую браузер выбирает для подчеркивания по умолчанию. Вы - единственный подчеркивающий тег. ответы ниже - ответы CSS </ pendantic>
мертвый аккаунт
44
Ирония в том, что кто-то достаточно педантичен, чтобы сделать этот комментарий, но не настолько педантичен, чтобы правильно (или даже последовательно!) Произносить слово, поражает меня.
Технеций
В дополнение к ответам, приведенным ниже, a:hoverследует учитывать обработку, большинство популярных браузеров, как правило, при наведении курсора показывают подчеркивание на якорях.
Fr0zenFyr

Ответы:

517

Используйте CSS. это удаляет подчеркивания aи uэлементы:

a, u {
    text-decoration: none;
}

Иногда вам нужно переопределить другие стили для элементов, и в этом случае вы можете использовать !importantмодификатор в вашем правиле:

a {
    text-decoration: none !important;
}
Эмиль Викстрем
источник
1
Если color: black !important;будет добавлено для body, будет ли это также устанавливать все элементы, включая якоря, посещенные якоря, зависшие якоря всегда черными?
Ωmega
Ωmega Δ, по-видимому, нет, и благодаря тому, что вы указали на это, я обнаружил ошибку в общем теле. Я обновил свой ответ.
Эмиль Викстрем
Я обнаружил, что если вы устанавливаете стиль text-decoration: none !important;для bodyэлемента, то он работает для якорей только тогда, когда вы явно устанавливаете стиль text-decoration: inherit;для aэлементов.
Ωmega
7
Как правило, лучше избегать !importantи использовать специфичность и мощность для переопределения стилей, в противном случае вы можете получить полную таблицу стилей !importantбез какого-либо понимания структуры, которая делает это необходимым. Это кодовый запах IMO.
Майк Лайонс
!importantэто как иметь ядерное оружие. Но как только вы начинаете и соблазняетесь использовать !importantдругие элементы, вы можете получить его (ядерное оружие), и преимущество исчезает в пользу тупика, что очень хорошо для мира, поскольку MUD обеспечивает мир, а в мире css такой мир означает, что вы не можете дать что-то преимущество.
JasonGenX
27

CSS это

text-decoration: none;

и

text-decoration: underline;
ДАНДАН
источник
16

Это удалит ваш цвет, а также подчеркнет, что тег привязки существует

 a {
     text-decoration: none ;
  }
a:hover
  {
    color:white;
    text-decoration:none;
    cursor:pointer;
   }
Ашвин Шахи
источник
11

Самый простой вариант:

<a style="text-decoration: none">No underline</a>

Конечно, смешивать CSS с HTML (т.е. встроенным CSS) не очень хорошая идея, особенно когда вы используете aтеги повсюду.
Вот почему лучше добавить это в таблицу стилей:

a {
    text-decoration: none;
}

Или даже этот код в файле JS:

var els = document.getElementsByTagName('a');

for (var el = 0; el < els.length; el++) {
    els[el].style["text-decoration"] = "none";
}
XLogic
источник
Iphone / Android не являются хорошими эталонами, так как они не представляют обратную HTML-визуализацию Gmail или Outlook.
Стюарт
@XLogic: Большое спасибо
Моника Патель
6

Используйте CSS, чтобы удалить text-decorationс.

a {
    text-decoration: none;
}
Алан Хаггай Алави
источник
6

Лучший вариант для вас, если вы просто хотите удалить подчеркивание только из ссылки -

    #content a{
                text-decoration-line:none;
                }

Это удалит подчеркивание.

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

                text-decoration: none;
                text-decoration-color: blue;
                text-decoration-skip: spaces;
                text-decoration-style: dotted;

Надеюсь это поможет!

PS- Это мой первый ответ!

Правин Каушик
источник
4

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

#content a:hover{
border-bottom: 1px solid #333;
}

Конечно, text-decoration:none;не могли помочь в этой ситуации. И я провожу много времени, пока не узнаю об этом.

Итак: подчеркивание не следует путать с границей.

Александр Хоменко
источник
4

Когда-нибудь это будет переопределено некоторым рендерингом пользовательского интерфейса CSS Лучше использовать:

a.className {
    text-decoration: none !important;
}
Санджиб Кармакар
источник
1
Это ужасная идея. stackoverflow.com/questions/8360190/…
Бенджамин Грюнбаум
2

Чтобы представить другую точку зрения на проблему (как следует из заголовка / содержания исходного сообщения):

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

Для Firefox есть FireBug;

Для Opera есть Dragonfly (она называется «Инструменты разработчика» в меню «Инструменты» -> «Дополнительно»; по умолчанию поставляется с Opera);

Для IE есть «Панель инструментов разработчика Internet Explorer», которая является отдельной загрузкой для IE7 и ниже и интегрирована в IE8 (хит F12).

Я не имею представления о браузерах Safari, Chrome и других меньшинствах, но вам все равно, вероятно, следует иметь хотя бы один из трех приведенных выше на вашем компьютере.

Vilx-
источник
1

Если вы хотите использовать тег привязки просто как ссылку без добавления стиля (например, подчеркивание при наведении или синий цвет), добавьте class="no-style"тег привязки. Затем в вашей глобальной таблице стилей создайте класс «без стиля».

.no-style { text-decoration: none !important; }

Это имеет два преимущества.

  1. Это не повлияет на все теги привязки, только те, к которым добавлен класс «без стиля».
  2. Он переопределит любой другой стиль, который в противном случае может помешать установке текста-декорации в значение none.
Фредерик Джон
источник
0

Не забудьте также включить таблицы стилей с помощью тега ссылки

http://www.w3schools.com/TAGS/tag_link.asp

Или заключите CSS в тег стиля на своей веб-странице.

<style>
  a { text-decoration:none; }
  p { text-decoration:underline; }
</style>

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

Основы CSS можно узнать в w3schools

Jasons
источник
0
<u>

является устаревшим тегом.

Использование ...

<span class="underline">My text</span>

с файлом CSS, содержащим ...

span.underline
{
    text-decoration: underline;
}  

или просто...

<span style="text-decoration:underline">My Text</span>
Oundless
источник
0

Используйте свойство css,

text-decoration:none;

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

Смита Кагвадэ
источник
0

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

<style>
a{
text-decoration:none;
}
</style>

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

<style>
element-name{
text-decoration:none;
}
</style>

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

Sheraz
источник
-1

Я был обеспокоен этой проблемой в веб-печати и решил. Проверенный результат.

a {
    text-decoration: none !important;
}

Оно работает!.

Incheol
источник