Wie entferne ich Unterstreichungen von einem Link in HTML?

129

Auf meiner Seite habe ich einige Links eingefügt, unter denen ich keine Zeile möchte. Wie kann ich diese mithilfe von HTML entfernen?

html Paic Ten
quelle
4
Paic, ich werde mich nicht darum kümmern, die Tags erneut zurückzusetzen, aber nur damit Sie wissen, ist die einzige Möglichkeit, die Unterstreichung zu entfernen, CSS . Ja, obwohl Sie es inline mit dem HTML-Code (im styleAttribut) hinzufügen , handelt es sich immer noch um CSS . Die beiden anderen Tags sind ebenfalls vollständig gültig ( presentationund hyperlink). Entfernen Sie in Zukunft keine Tags zu einer Frage (oder fügen Sie sie hinzu), es sei denn, es gibt einen gültigen Grund dafür. Vielen Dank!
0b10011
@bfrohs Ich respektiere Ihre Worte, aber ich baue meine Website nur mit HTML und habe daher keine weiteren Tags hinzugefügt, da ich sonst möglicherweise Antworten für eine andere Sprache erhalten hätte. Eigentlich bin ich ein bisschen Anfänger, das ist der Grund.
Paic Ten
3
Sie können keine standardkonforme Website ohne CSS erstellen (es sei denn, Sie verwenden für alle Präsentationen die Standardeinstellungen des Browsers). HTML = Struktur; CSS = Präsentation. Die anderen Tags hatten nichts mit einer anderen Sprache zu tun - sie wurden nur bereitgestellt, um den Menschen zu helfen, die Frage und Antwort zu finden.
0b10011
1
Mögliches Duplikat von Wie entferne ich die Unterstreichung für Anker (Links)?
RAS
2
Warum hat diese Frage so viele Stimmen? Sie können es buchstäblich in einer einzigen Google-Suche beantworten, und ich bin sicher, dass es in StackOverflow viele Duplikate davon gibt.
Alternatex

Antworten:

191

Inline- Version:

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

Denken Sie jedoch daran, dass Sie im Allgemeinen den Inhalt Ihrer Website ( HTML ) von der Präsentation ( CSS ) trennen sollten . Daher sollten Sie Inline-Stile generell vermeiden .

Siehe Johns Antwort , um eine gleichwertige Antwort mit CSS zu sehen .

patryk.beza
quelle
1
Mörder! Ich habe diese Unterstriche in all den Jahren, in denen ich HTML gemacht habe, nie gesehen .... ^^
Alex Cio
1
Johns Antwort verwendet immer noch im Wesentlichen Inline-Stile. Das Trennen Ihres CSS bedeutet mehr als das Aliasing von CSS in Ihrem HTML. ZB class="big-and-red"ist Aliasing keine Trennung. class="meaningful-domain-item"dann ist css .meaningful-domain-item { //big and red }. Diese Antwort reicht aus, um mich daran zu erinnern, welches Tag in meinem CSS +1 verwendet werden soll.
Nathan Cooper
Dieser oben erwähnte Code hat bei mir nicht funktioniert. Wenn ich mich mit dem Problem befasse, stelle ich fest, dass es nicht funktioniert hat, weil ich den Stil nach dem href platziert habe. Als ich den Stil vor das href stellte, funktionierte er wie erwartet. <a href=" yoursite.com "style="text-decoration:none"> Ihre Site </a>
Ganesh MS
55

Dadurch werden alle Unterstreichungen von allen Links entfernt:

a {text-decoration: none; }

Wenn Sie bestimmte Links haben, auf die Sie dies anwenden möchten, geben Sie ihnen einen Klassennamen wie nounderlinefolgt:

a.nounderline {text-decoration: none; }

Dies gilt nur für diese Links und lässt alle anderen unberührt.

Dieser Code gehört in <head>Ihr Dokument oder in ein Stylesheet:

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

Und im Körper:

<a href="#" class="nounderline">Link</a>
John Conde
quelle
15

Ich schlage vor: hover zu verwenden, um eine Unterstreichung zu vermeiden, wenn sich der Mauszeiger über einem Anker befindet

a:hover {
   text-decoration:none;
}
römisch
quelle
6

  1. Fügen Sie dies Ihrem externen Stylesheet hinzu ( bevorzugt ):

    a {text-decoration:none;}

  2. Oder fügen Sie dies <head>Ihrem HTML-Dokument hinzu:

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

  3. Oder fügen Sie es dem aElement selbst hinzu ( nicht empfohlen ):

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

Die anderen Antworten erwähnen alle Textdekoration. Manchmal verwenden Sie ein Wordpress-Thema oder das CSS einer anderen Person, bei dem Links durch andere Methoden unterstrichen werden, sodass die Textdekoration: Keine die Unterstreichung deaktiviert.

Rand und Kastenschatten sind zwei weitere mir bekannte Methoden, um Links zu unterstreichen. So schalten Sie diese aus:

border: none;

und

box-shadow: none;
Joe Golton
quelle
2

Das Folgende ist keine bewährte Methode, kann sich jedoch manchmal als nützlich erweisen

Es ist besser, die von John Conde bereitgestellte Lösung zu verwenden, aber manchmal ist die Verwendung von externem CSS unmöglich. So können Sie Ihrem HTML-Tag Folgendes hinzufügen:

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

Der obige Code reicht aus. Fügen Sie ihn einfach in den Link ein, aus dem Sie die Unterstreichung entfernen möchten.

sd1990
quelle
1

Der oben genannte Code hat bei mir nicht funktioniert. Wenn ich mich mit dem Problem befasse, stelle ich fest, dass es nicht funktioniert hat, weil ich den Stil nach dem href platziert habe. Als ich den Stil vor das href stellte, funktionierte er wie erwartet.

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