Heim > Web-Frontend > HTML-Tutorial > HTML legt die Schriftfarbe des Hyperlinks und die Schriftfarbe nach dem Klicken fest

HTML legt die Schriftfarbe des Hyperlinks und die Schriftfarbe nach dem Klicken fest

巴扎黑
Freigeben: 2017-06-03 13:53:57
Original
8169 Leute haben es durchsucht

CSS bereitet spezielle Werkzeuge für einige Spezialeffekte vor, die wir „Pseudoklassen“ nennen. Es gibt mehrere davon, die wir häufig verwenden. Im Folgenden werden die vier Pseudoklassen, die häufig zum Definieren von Linkstilen verwendet werden, im Detail vorgestellt. Link-Stile definieren
CSS bietet spezielle Werkzeuge für einige Spezialeffekte, die wir „Pseudoklassen“ nennen. Es gibt mehrere davon, die wir häufig verwenden. Nachfolgend stellen wir die vier Pseudoklassen vor, die häufig zum Definieren von Linkstilen verwendet werden:
:link
:visited
:hover
:active
Da wir den Link-Stil definieren möchten, ist das Anker-Tag im Hyperlink eine wesentliche Methode zum Schreiben des Anker-Tags und des Pseudo-Klassen-Links ist wie folgt geschrieben:
a:link, definiert den Stil eines normalen Links;
a:visited, definiert den Stil eines besuchten Links;
a:hover, definiert den Stil, wenn die Maus darüber schwebt über den Link;
a:active, definiert den Stil, wenn die Maus auf den Link klickt.
Beispiel:
Der Code lautet wie folgt:

a:link { 
color:#FF0000; 
text-decoration:underline; 
} 
a:visited { 
color:#00FF00; 
text-decoration:none; 
} 
a:hover { 
color:#000000; 
text-decoration:none; 
} 
a:active { 
color:#FFFFFF; 
text-decoration:none; 
}
Nach dem Login kopieren

Die im obigen Beispiel definierte Linkfarbe ist rot, der besuchte Link ist grün, wenn die Maus über den Link fährt, wird er angezeigt ist schwarz und die Farbe, wenn darauf geklickt wird, ist weiß.
Wenn der normale Link und der besuchte Link denselben Stil haben und die Mauszeiger- und Klickstile gleich sind, können sie auch kombiniert und definiert werden:

Der Code lautet wie folgt:

a:link, 
a:visited { 
color:#FF0000; 
text-decoration:underline; 
} 
a:hover, 
a:active { 
color:#000000; 
text-decoration:none; 
}
Nach dem Login kopieren

Die Reihenfolge der Linkdefinitionen
Es gibt keine Regeln ohne Regeln. Obwohl die Linkdefinition geschrieben ist, gibt es auch Regeln. Wenn die Schreibreihenfolge dieser vier Elemente etwas falsch ist, hat dies Auswirkungen Der Link kann verloren gehen, also achten Sie beim erstmaligen Definieren von Linkstilen darauf, die Definitionsreihenfolge Link--besucht--hover-aktiv zu bestätigen, was wir oft als LoVe HAte-Prinzip bezeichnen (das Großbuchstabe). Buchstaben sind ihre Anfangsbuchstaben).
Lokalen Linkstil definieren
Das Schreiben einer Definition wie a:link{} in CSS ändert den Linkstil der gesamten Seite, aber einige lokale Links müssen spezialisiert werden. Dieses Problem ist nicht schwer zu lösen als Link Fügen Sie einfach die angegebene ID oder Klasse vor der Stildefinition hinzu.
Beispiel:

Der Code lautet wie folgt:

#sidebar a:link, 
#sidebar a:visited { 
color:#FF0000; 
text-decoration:none; 
} 
#sidebar a:hover, 
#sidebar a:active { 
color:#000000; 
text-decoration:underline; 
}
Nach dem Login kopieren

Aufrufmethode:

Die Definitionsmethode der Klasse ist die gleiche wie id, ändern Sie einfach #sidebar in . Eine andere Methode besteht darin, den Linkstil direkt zu definieren, was direkter ist, aber schwieriger aufzurufen ist und Sie jedem spezifischen Link definierten Code hinzufügen müssen.
Beispiel:
Der Code lautet wie folgt:

 a.redlink a:link, 
a.redlink a:visited { 
color:#FF0000; 
text-decoration:none; 
} 
a.redlink a:hover, 
a.redlink a:active { 
color:#000000; 
text-decoration:underline; 
background:#FFFFFF; 
}
Nach dem Login kopieren
Aufrufmethode:

Link to Script House 1


Die Definition eines Links hat hauptsächlich drei Attribute: Farbe (Farbe), Textdekoration (Text- Dekoration) und Hintergrund

Das obige ist der detaillierte Inhalt vonHTML legt die Schriftfarbe des Hyperlinks und die Schriftfarbe nach dem Klicken fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage