Як видалити підкреслення для анкерів (посилань)?


312

Чи є все-таки (у CSS), щоб уникнути підкреслення тексту та посилань, що вводяться на сторінку ..?


8
<penantic> Ви ніколи не можете припустити, як браузер візуалізує ваш HTML. тег робить якор, який браузер вибирає за замовчуванням відображати як підкреслений. u - єдиний підкреслений тег. відповіді нижче - це відповіді на 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 Δ, мабуть, ні, і завдяки вам, який ви це вказували, я виявив помилку в загальному правилі тіла. Я оновив свою відповідь.
Еміль Вікстрем

Я знайшов, що якщо ви встановлюєте стиль text-decoration: none !important;для bodyелемента, він працює для якорів лише тоді, коли ви явно встановлюєте стиль text-decoration: inherit;для aелементів.
Оммега

7
Як правило, краще уникати !importantта використовувати специфіку та кардинальність для зміни стилів, інакше ви можете створити таблицю стилів, що !importantне має розуміння структури, яка робить це необхідним. Це кодовий запах ІМО.
Майк Ліонс

!importantце як мати нуклеуса. Але як тільки ви починаєте вниз і спокушаєтесь на використання !importantінших елементів, ви можете отримати це (нуке), і перевага піде на користь тупику, який чудово підходить для світу, оскільки MUD забезпечує спокій, але у світі css такий мир значить, ви не можете дати щось перевагу.
JasonGenX


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";
}

Iphone / Android не є хорошими орієнтирами, оскільки вони не представляють собою зворотній HTML-рендерінг Gmail або Outlook.
Стюарт

@XLogic: Дуже дякую
Моніка Пател


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;не міг допомогти у цій ситуації. І я витрачаю багато часу, поки не дізналася про це.

Отже: Підкреслення не слід плутати з межею внизу.



2

Щоб надати іншу точку зору на проблему (як випливає з назви / змісту оригінальної публікації):

Якщо ви хочете відслідковувати, що створює негідні підкреслення у вашому HTML, скористайтеся інструментом налагодження. Є з чого вибрати:

Для Firefox є FireBug;

Для Opera є Dragonfly (називається "Інструменти для розробників" в меню Інструменти-> Додаткові; за замовчуванням поставляється Opera);

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

Я не маю уявлення про Safari, Chrome та інші браузери меншин, але ви, мабуть, повинні мати хоча б одне із трьох вище на своїй машині.



1

Коли ви хочете використовувати тег прив’язки просто як посилання без доданого стилю (наприклад, підкреслення курсору чи синього кольору), додайте class="no-style"до тега прив’язки. Потім у вашому глобальному таблиці стилів створіть клас "no-style".

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

Це має дві переваги.

  1. Це не вплине на всі прив’язні теги, лише ті, до яких додано клас "без стилю".
  2. Це скасує будь-який інший стиль, який інакше може перешкоджати встановленню декору тексту.

0

Не забудьте або включити таблиці стилів, використовуючи тег посилання

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

Або додайте CSS до тегу стилю на своїй веб-сторінці.

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

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

Основи CSS можна знайти в школах w3


0
<u>

є застарілим тегом.

Використовувати ...

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

з файлом CSS, що містить ...

span.underline
{
    text-decoration: underline;
}  

або просто ...

<span style="text-decoration:underline">My Text</span>


0

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

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

Якщо ви хочете видалити підкреслення тексту, присутнього в інших елементах, ніж a , слід використовувати наступний синтаксис.

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

Існує багато інших значень для декорування тексту, які можуть допомогти вам створити посилання.


-1

Мене хвилює ця проблема в веб-друку і вирішена. Перевірений результат.

a {
    text-decoration: none !important;
}

Це працює!.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.