Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie stelle ich die Farbe eines HTML-Tags ein? Zusammenfassung der Farbeinstellungen für Hyperlinks (CSS-Stil)

寻∝梦
Freigeben: 2018-09-04 13:40:16
Original
105805 Leute haben es durchsucht

Jeder sollte mit dem

Hyperlink-Tag vertraut sein. Im Folgenden werden vier Farbänderungen vorgestellt Lesen Sie diesen Artikel gemeinsam

Zuerst müssen wir die Farbeinstellung des HTML-A-Tags kennen:

Wir alle wissen, dass sich in HTML das A-Tag auf der Webseite befindet Wie sieht die Standardfarbe aus? Probieren Sie nun den Code aus:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body>
<a href="#">php中文网</a>
</body>
</html>
Nach dem Login kopieren

Dies ist der Code für ein einfaches HTML-Dokument. Sehen Sie sich den Anzeigeeffekt im Browser an:

Wie stelle ich die Farbe eines HTML-Tags ein? Zusammenfassung der Farbeinstellungen für Hyperlinks (CSS-Stil)

Die nicht angeklickte URL oben ist so blau, und nachdem sie angeklickt wurde, sieht ein solcher Link nicht gut aus. Wir müssen eine Farbe für das Tag festlegen. Wenn ich beispielsweise eine Farbe für nicht angeklickte URLs festlegen möchte, sagen wir: Rot. Vor dem Anklicken ist sie rot und nach dem Anklicken ist sie schwarz. Machen wir den Effekt:


<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
a:link{color:red;}
a:visited{color:black;}
</style>
</head>
<body>
<a href="#">php中文网</a>
</body>
Nach dem Login kopieren

Das ist ein einfacher CSS-Code, schauen wir uns den Effekt an:


Wie stelle ich die Farbe eines HTML-Tags ein? Zusammenfassung der Farbeinstellungen für Hyperlinks (CSS-Stil)

Das ist Der unbesuchte Stil ist rot;

Wie stelle ich die Farbe eines HTML-Tags ein? Zusammenfassung der Farbeinstellungen für Hyperlinks (CSS-Stil)

Dies ist der besuchte Stil und ist schwarz. Lassen Sie uns den Code erklären:

  • a:link: Es ist ein nicht zugänglicher Stil. Sie können ihm viele Dinge hinzufügen, z. B. Unterstreichungen entfernen, Farben ändern und andere Funktionen

  • a:visited: Es ist der Stil nach dem Klicken. Sie können ihm auch viele Elemente hinzufügen und unterstreichen, Farben ändern, vergrößern und andere Funktionen ausführen
  • a:hover: Dies ist der Maus-Hover-Stil. Wir werden es später kennenlernen. Sie können die Farbe so einstellen, dass sie sich ändert, wenn die Maus an der Position des Hyperlinks geparkt wird ;

  • a:aktiv: Dies wird als aktivierter Stil bezeichnet, wenn Sie mit der Maus darauf klicken. Dieser Stil wird sofort angezeigt auf vielen Websites;

  • Schauen wir uns nun ein Beispiel an, die Wirkung der Einfügung aller oben genannten vier:
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
a:link{color:red;}
a:visited{color:black;}
a:hover{color:pink;}
a:active{color:#ccc;}
</style>
</head>
<body>
<a href="#">php中文网</a>
</body>
Nach dem Login kopieren

Nehmen wir mal Schauen Sie sich jetzt den Browser an. Der gezeigte Effekt:

Dies ist der Effekt des Bewegens der Maus, fertig

Wie stelle ich die Farbe eines HTML-Tags ein? Zusammenfassung der Farbeinstellungen für Hyperlinks (CSS-Stil)

Dies ist der Click-Moment-Effekt. (Um mehr zu sehen, klicken Sie bitte auf

CSS-Video-TutorialWie stelle ich die Farbe eines HTML-Tags ein? Zusammenfassung der Farbeinstellungen für Hyperlinks (CSS-Stil))

Zusammenfassung des Hyperlinks zu einem Tag:

Es gibt also vier Arten von Tags Die CSS-Stile von Anker-Pseudoklassen wurden eingeführt. Eine davon ist der nicht angeklickte Stil, der Stil, der normalerweise angezeigt wird, ohne dass darauf geklickt wird. , und ein anderer ist der Mauszeigerstil, der sich ändert, wenn Sie die Maus darauf legen. Sie werden später wissen, wie dieser Effekt funktioniert Man sagt, dass es sich um die vier notwendigen Stile für ein Tag handelt, sodass die Einstellungen besser sein können. [Empfehlung des Herausgebers]

Wozu dient das HTML5-Datalist-Tag? Hier sind Anwendungsbeispiele des Datalist-Tags

Was ist das Include-Tag in HTML? html include implementiert die Konfigurationsanalyse

Das obige ist der detaillierte Inhalt vonWie stelle ich die Farbe eines HTML-Tags ein? Zusammenfassung der Farbeinstellungen für Hyperlinks (CSS-Stil). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
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