suchen

Heim  >  Artikel  >  Web-Frontend  >  Wie lege ich den Hyperlink-Stil mit CSS fest? So legen Sie den Hyperlink-Stil mit CSS fest (Codebeispiel)

Wie lege ich den Hyperlink-Stil mit CSS fest? So legen Sie den Hyperlink-Stil mit CSS fest (Codebeispiel)

青灯夜游
青灯夜游Original
2018-10-27 14:16:4121034Durchsuche

Bei der Entwicklung von Front-End-Websites sind Hyperlinks ein wichtiger Bestandteil, und gut aussehende Hyperlink-Stile können den Front-End-Seiten Punkte hinzufügen. Wie legt man also den Hyperlink-Stil fest? In diesem Artikel erhalten Sie eine kurze Einführung in das Festlegen von Hyperlink-Stilen mit CSS. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Werfen wir zunächst einen Blick auf den anfänglichen Hyperlink-Stil im Browser:

Wie lege ich den Hyperlink-Stil mit CSS fest? So legen Sie den Hyperlink-Stil mit CSS fest (Codebeispiel)

Finden Sie, dass die Schriftfarbe nicht gut aussieht? Blau. Wenn es auf der Seite so angezeigt wird, wirkt es sehr abrupt und macht die Seite weniger schön. Wie kann man also die Schriftfarbe von Hyperlinks ändern und die Unterstreichung von Hyperlinks entfernen? Als Nächstes stellen wir vor, wie Sie den Hyperlink-Stil mithilfe von CSS festlegen.

CSS legt den Textstil in Hyperlinks fest

Anhand eines einfachen Codebeispiels lernen wir, wie CSS den Textstil in Hyperlinks festlegt. 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>超链接样式</title>
		<style>
			.demo {
				width: 300px;
				height: 300px;
				margin: 100px auto;
			}
			.demo .a{
				text-decoration:none;  /*清除下划线  */
				font-family: "楷体";/*设置字体种类*/
				color: red;/*设置字体颜色*/
				font-size: 30px;/*设置字体大小*/
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<a href="#">php中文网</a><br /><br />
			<a href="#" class="a">php中文网</a>
		</div>
	</body>
</html>

Rendering:

Wie lege ich den Hyperlink-Stil mit CSS fest? So legen Sie den Hyperlink-Stil mit CSS fest (Codebeispiel)

Beschreibung:

text-decoration:none;: Unterstreichung des Hyperlinks löschen

font-*: Legen Sie den Schriftstil fest, z. B. Schriftart, Größe, Stil (kursiv, Text kursiv usw.), Dicke usw.

CSS-Pseudoklasse zum Festlegen des dynamischen Hyperlink-Stils

:link: Wählen Sie nicht besuchte Links aus und legen Sie deren Stile fest von normalen (nicht besuchten) Links.

:hover: Wählen Sie das Element aus, auf dem der Mauszeiger schwebt, und legen Sie seinen Stil fest, d. h. definieren Sie den Stil, wenn die Maus über dem Link schwebt.

:aktiv: Wählen Sie einen aktiven Link aus und legen Sie seinen Stil fest; das heißt, Sie definieren den Stil, wenn die Maus auf den Link klickt.

:visited: Wählen Sie den besuchten Link aus und legen Sie seinen Stil fest, d. h. definieren Sie den Stil des besuchten Links.

Anhand eines einfachen Codebeispiels lernen wir, wie man dynamische Hyperlink-Stile mithilfe von CSS-Pseudoklassen festlegt.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>超链接样式</title>
		<style>
			.demo a {

				font-size: 30px;
				/*设置字体大小*/
			}
			
			a:link {
				color: #000000;
				text-decoration: none;
			}
			
			a:visited {
				color: #00FF00;
				text-decoration: none;
			}
			
			a:hover {
				color: #FF0000;
				text-decoration: underline;
			}
			
			a:active {
				color: #0081EF;
				text-decoration: none;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<a href="#" class="a">php中文网</a>
		</div>
	</body>

</html>

Die im obigen Beispiel definierte Linkfarbe ist schwarz und der besuchte Link ist grün. Der Link ist rot, wenn Sie mit der Maus darüber fahren, und blau, wenn Sie darauf klicken. Sie können es selbst ausprobieren, um die Wirkung zu sehen. Das Festlegen von Stilen mithilfe von CSS-Pseudoklassen erfordert die Einhaltung einer bestimmten Reihenfolge. Werfen wir einen Blick darauf.

Die Reihenfolge der CSS-Pseudoklassen-Einstellungsstile:

Es gibt auch Regeln für die CSS-Pseudoklassen-Einstellungs-Linkstile. Wenn die Schreibreihenfolge dieser vier Elemente geringfügig ist Falsch, die Auswirkung des Links ist möglicherweise nicht vorhanden. Achten Sie daher jedes Mal, wenn Sie einen Linkstil definieren, darauf, die Definitionsreihenfolge Link--besucht--hover-aktiv zu bestätigen, was wir oft als LoVe bezeichnen HAte-Prinzip (Großbuchstaben sind ihre Anfangsbuchstaben).

Zusammenfassung: Das Obige ist der gesamte Inhalt der Methode zum Festlegen von Hyperlink-Stilen mit CSS. Bei der Verwendung von Pseudoklassen zum Festlegen von Stilen muss auf die Reihenfolge geachtet werden. Ich hoffe, dass es für das Lernen aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter: CSS-Basis-Video-Tutorial , HTML-Video-Tutorial , Bootstrap-Video-Tutorial !

Das obige ist der detaillierte Inhalt vonWie lege ich den Hyperlink-Stil mit CSS fest? So legen Sie den Hyperlink-Stil mit CSS fest (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css bootstrap html 指针 伪类
Stellungnahme：
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
Vorheriger Artikel：Einige der grundlegendsten Fehler und Lösungen in IE-Browsern in CSSNächster Artikel：Einige der grundlegendsten Fehler und Lösungen in IE-Browsern in CSS

In Verbindung stehende Artikel

Mehr sehen