Wie entferne ich die Standard-Linkfarbe des HTML-Hyperlink-Tags 'a'?

235

Die Standard-Linkfarbe ist blau. Wie entferne ich die Standard-Linkfarbe des HTML-Hyperlink-Tags <a>?

— Rafiu
quelle

Die Standardtextfarbe für <a>ist blau. Was ist dein Problem jetzt?

— VMAtm

Ich versuche herauszufinden, ob <a> keine Farbe erhält, ich möchte nicht, dass es in blauer Farbe angezeigt wird. Es ist in der Standard-

— Textfarbe, die Textfarbe

3

@ Terry_Brown - Ich fand diese Frage sehr nützlich, da ich die Antwort "Farbe: erben" unten finden wollte, was meiner Meinung nach auch die Frage

— betraf

473

Der ererbte Wert :

a { color: inherit; }

… Wird bewirken, dass das Element die Farbe seines übergeordneten Elements annimmt (was ich denke, dass Sie suchen).

— QUentin
quelle

59

Sie können so etwas tun:

a {
    color: #0060B6;
    text-decoration: none;
}

a:hover 
{
     color:#00A0C6; 
     text-decoration:none; 
     cursor:pointer;  
}

Wenn die Textdekoration nicht funktioniert, schließen Sie die Textdekoration ein: keine! wichtig;

— kleinohad
quelle

Wenn Sie außerdem die Farbänderung für einen bestimmten Link nach dem Drücken verhindern möchten, fügen Sie im a-Tag Folgendes hinzu: <A STYLE = "Textdekoration: keine; color = [wählen Sie Ihren Favoriten aus ...]" HREF = " link.html "> Testlink </ A>

— Wiztrail

4

<a style="text-decorations:none; color:inherit;>= Gewinnen

— Dan Bradbury

2

@DanBradbury 's' in Textdekorationen entfernen. <a style="text-decoration:none; color:inherit;>

— Mukarram Pasha

18

.cancela,.cancela:link,.cancela:visited,.cancela:hover,.cancela:focus,.cancela:active{
    color: inherit;
    text-decoration: none;
}

Ich hielt es für notwendig, die obige Klassendefinition zu veröffentlichen. Viele der Antworten auf SO verfehlen einige der Zustände

— Kaan Soral
quelle

17

Wenn Sie die vom Browser bereitgestellte Unterstreichung und Standardfarbe nicht sehen möchten, können Sie den folgenden Code oben in Ihrer Datei main.css behalten. Wenn Sie andere Farben und Dekorationsstile benötigen, können Sie die Standardeinstellungen mithilfe des folgenden Codeausschnitts einfach überschreiben.

 a, a:hover, a:focus, a:active {
      text-decoration: none;
      color: inherit;
 }

— GURU PRASAD
quelle

8

Dies ist auch möglich:

        a {
            all: unset;
        }

nicht gesetzt: Dieses Schlüsselwort gibt an, dass alle für das Element oder das übergeordnete Element des Elements geltenden Eigenschaften in ihren übergeordneten Wert geändert werden sollen, wenn sie vererbbar sind, oder in ihren Anfangswert, wenn nicht. Unicode-Bidi- und Richtungswerte sind nicht betroffen.

Quelle: Mozilla Beschreibung aller

— gerd sitzenner
quelle

Sie könnten , aber nur weil Sie können, heißt das nicht, dass Sie sollten. Ich würde sagen, angesichts der Natur dieser Regel sollten Sie wirklich ein wenig mehr darüber hinzufügen, was sie tatsächlich tut.

— Tom

1

Funktioniert anscheinend color: unsetauch. Ich habe Rahmenfarben aus dem Element entfernt, dann das Element umbrochen und meine benutzerdefinierte Farbe für diesen Wrapper festgelegt, damit die Farbe vererbt wird.

— Traxo

8

Du musst benutzen CSS. Hier ist ein Beispiel für das Ändern der Standard-Linkfarbe, wenn der Link nur dort sitzt, wenn er schwebt und wenn es sich um einen aktiven Link handelt.

a:link {
  color: red;
}

a:hover {
  color: blue;
}

a:active {
  color: green;
}

<a href='http://google.com'>Google</a>

Erweitern Sie das Snippet

— Saad Imran.
quelle

6

Fügen Sie dies einfach hinzu CSS,

a {
    color: inherit;
    text-decoration: none;
}

das war's, fertig.

— ArifMustafa
quelle

1

Ich weiß nicht, was ist das Problem mit Down-Wähler, glauben Sie mir, das funktioniert ...

— ArifMustafa

3

Sie können System Color (18.2) -Werte verwenden, die mit CSS 2.0 eingeführt wurden, in CSS 3 jedoch veraltet sind .

a:link, a:hover, a:active { color: WindowText; }

Auf diese Weise haben Ihre Ankerlinks dieselbe Farbe wie normaler Dokumenttext auf diesem System.

— stricken
quelle

0

a:link{color:inherit;}

Dies ist die einfache Zeile, die alle Aufgaben für Sie erledigen kann <3

— sounish nath
quelle

-2

Das wird funktionieren

    a:hover, a:focus, a:active {
        outline: none;
    }

Dadurch wird der Umriss für alle drei Pseudoklassen entfernt.

— Sumeet Rohra
quelle

Bitte erklären Sie etwas genauer, warum dies funktioniert.

— Mareoraft

Die Frage ist nicht über die Gliederung

— Quentin