Wie entferne ich die Unterstreichung für Anker (Links)?

313

Gibt es sowieso (in CSS), um die Unterstreichung für den auf der Seite eingeführten Text und die Links zu vermeiden?

Steven
quelle
8
<penantic> Sie können niemals davon ausgehen, wie ein Browser Ihren HTML-Code rendert. Ein Tag rendert einen Anker, den der Browser standardmäßig als Unterstreichung anzeigt. u ist das einzige Unterstreichungs-Tag. Die Antworten unten sind CSS-Antworten </ pendantic>
Dead Account
44
Die Ironie, dass jemand pedantisch genug ist, um diesen Kommentar abzugeben, aber nicht pedantisch genug, um das Wort richtig (oder sogar konsequent!) Zu buchstabieren, ist mir ein Rätsel.
Technetium
Zusätzlich zu den folgenden Antworten a:hoversollte auch die Handhabung berücksichtigt werden. Die meisten gängigen Browser zeigen beim Schweben eine Unterstreichung der Anker.
Fr0zenFyr

Antworten:

517

Verwenden Sie CSS. Dadurch werden Unterstreichungen von aund uElementen entfernt:

a, u {
    text-decoration: none;
}

Manchmal müssen Sie andere Stile für Elemente überschreiben. In diesem Fall können Sie den !importantModifikator für Ihre Regel verwenden:

a {
    text-decoration: none !important;
}
Emil Vikström
quelle
1
Wenn color: black !important;hinzugefügt werden würde body, werden dadurch auch alle Elemente, einschließlich Anker, besuchte Anker und schwebende Anker, immer schwarz?
Ωmega
Ωmega Δ, anscheinend nicht, und dank Ihres Hinweises habe ich insgesamt einen Fehler in der Körperregel gefunden. Ich habe meine Antwort aktualisiert.
Emil Vikström
Was ich fand , ist , dass , wenn Sie den Stil text-decoration: none !important;für bodyElement, dann funktioniert es für Anker nur , wenn Sie explizit Set - Stil text-decoration: inherit;für aElemente.
Ωmega
7
Im Allgemeinen ist es besser, !importantSpezifität und Kardinalität zu vermeiden und zu verwenden, um Stile zu überschreiben. Andernfalls erhalten Sie !importantmöglicherweise ein Stylesheet voller Stile, ohne die Struktur zu verstehen, die dies erforderlich macht. Es ist ein Code-Geruch IMO.
Mike Lyons
!importantist wie eine Nuklearwaffe. Aber sobald Sie anfangen und verführt sind, !importantandere Elemente zu verwenden, kann es sein (Nuke) und der Vorteil ist zugunsten einer Sackgasse weg, die für die Welt groß ist, da MUD Frieden gewährleistet, aber in der Welt von CSS, solchen Frieden bedeutet, dass Sie etwas nicht den Vorteil geben können.
JasonGenX
27

Das CSS ist

text-decoration: none;

und

text-decoration: underline;
DanDan
quelle
16

Dadurch werden Ihre Farbe sowie die Unterstreichung entfernt, mit der das Ankertag vorhanden ist

 a {
     text-decoration: none ;
  }
a:hover
  {
    color:white;
    text-decoration:none;
    cursor:pointer;
   }
Ashwin Shahi
quelle
11

Die einfachste Option ist folgende:

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

Natürlich ist das Mischen von CSS mit HTML (dh Inline-CSS) keine gute Idee, insbesondere wenn Sie aüberall Tags verwenden.
Deshalb ist es eine gute Idee, dies stattdessen einem Stylesheet hinzuzufügen:

a {
    text-decoration: none;
}

Oder sogar diesen Code in einer JS-Datei:

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

for (var el = 0; el < els.length; el++) {
    els[el].style["text-decoration"] = "none";
}
XLogic
quelle
Iphone / Android sind keine guten Benchmarks, da sie nicht das rückwärts gerichtete HTML-Rendering von Google Mail oder Outlook darstellen.
Stuart
@XLogic: Vielen Dank
Monika Patel
6

Verwenden Sie CSS, um text-decorations zu entfernen .

a {
    text-decoration: none;
}
Alan Haggai Alavi
quelle
6

Beste Option für Sie, wenn Sie nur die Unterstreichung nur vom Ankerlink entfernen möchten.

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

Dadurch wird die Unterstreichung entfernt.

Außerdem können Sie eine ähnliche Syntax verwenden, um auch andere Stile zu bearbeiten.

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

Hoffe das hilft!

PS: Dies ist meine erste Antwort überhaupt!

praveen kaushik
quelle
4

In meinem Fall gab es eine Regel über den Schwebeeffekt des Ankers wie folgt:

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

Natürlich text-decoration:none;konnte in dieser Situation nicht helfen. Und ich verbringe viel Zeit, bis ich es herausgefunden habe.

Also: Ein Unterstrich ist nicht mit einem Randboden zu verwechseln.

Aleksandr Khomenko
quelle
4

Manchmal wird es von einigen Rendering-UI-CSS überschrieben. Besser zu verwenden:

a.className {
    text-decoration: none !important;
}
Sanjib Karmakar
quelle
1
Das ist eine schreckliche Idee. stackoverflow.com/questions/8360190/…
Benjamin Gruenbaum
2

Um dem Problem eine andere Perspektive zu geben (wie aus dem Titel / Inhalt des ursprünglichen Beitrags abgeleitet):

Wenn Sie herausfinden möchten, was in Ihrem HTML-Code unerwünschte Unterstreichungen erzeugt, verwenden Sie ein Debugging-Tool. Es gibt viele zur Auswahl:

Für Firefox gibt es FireBug;

Für Opera gibt es Dragonfly (im Menü Extras-> Erweitert als "Entwicklertools" bezeichnet; wird standardmäßig mit Opera geliefert).

Für IE gibt es die "Internet Explorer Developer Toolbar", die ein separater Download für IE7 und darunter ist und in IE8 integriert ist (drücken Sie F12).

Ich habe keine Ahnung von Safari, Chrome und anderen Minderheitsbrowsern, aber Sie sollten wahrscheinlich trotzdem mindestens einen der drei oben genannten auf Ihrem Computer haben.

Vilx-
quelle
1

Wenn Sie ein Ankertag einfach als Link ohne das hinzugefügte Styling (z. B. die Unterstreichung beim Schweben oder die blaue Farbe) verwenden möchten, fügen Sie class="no-style"es dem Ankertag hinzu. Erstellen Sie dann in Ihrem globalen Stylesheet die Klasse "no-style".

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

Dies hat zwei Vorteile.

  1. Es sind nicht alle Ankertags betroffen, sondern nur diejenigen, denen die Klasse "no-style" hinzugefügt wurde.
  2. Es überschreibt alle anderen Stile, die andernfalls verhindern könnten, dass die Textdekoration auf "Keine" gesetzt wird.
Frederick John
quelle
0

Vergessen Sie nicht, Stylesheets über das Link-Tag einzuschließen

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

Oder fügen Sie CSS in ein Style-Tag auf Ihrer Webseite ein.

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

Ich würde nicht empfehlen, die Unterstreichung für etwas anderes als Links zu verwenden. Unterstreichung wird allgemein als anklickbar akzeptiert. Wenn es nicht anklickbar ist, unterstreichen Sie es nicht.

CSS-Grundlagen können an w3schools erworben werden

JasonS
quelle
0
<u>

ist ein veraltetes Tag.

Verwenden...

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

mit einer CSS-Datei mit ...

span.underline
{
    text-decoration: underline;
}  

oder nur...

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

Verwenden Sie die CSS-Eigenschaft.

text-decoration:none;

Unterstreichung aus dem Link entfernen.

Smita Kagwade
quelle
0

Die Unterstreichung kann durch eine CSS-Eigenschaft namens Textdekoration entfernt werden.

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

Wenn Sie die Unterstreichung für den Text entfernen möchten, der in anderen Elementen als a vorhanden ist , sollte die folgende Syntax verwendet werden.

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

Es gibt viele anderen text-decoration Werte , die Ihnen Links entwerfen können helfen.

Sheraz
quelle
-1

Ich habe Probleme mit diesem Problem beim Webdruck und habe es gelöst. Verifiziertes Ergebnis.

a {
    text-decoration: none !important;
}

Es klappt!.

Incheol
quelle