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

Jun 03, 2017 pm 01:53 PM
html 字体颜色 超链接

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!

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Tabellenrahmen in HTML Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

Verschachtelte Tabelle in HTML Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

HTML-Rand links HTML-Rand links Sep 04, 2024 pm 04:48 PM

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

HTML-Tabellenlayout HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

HTML-Eingabeplatzhalter HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

HTML-geordnete Liste HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

Text in HTML verschieben Text in HTML verschieben Sep 04, 2024 pm 04:45 PM

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

HTML-Onclick-Button HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.

See all articles