So gestalten Sie Hyperlinks mit CSS

In CSS können wir den Stil von Hyperlinks über Pseudoklassen festlegen. Der Code lautet beispielsweise [a:link {color: #FF0000;}] und legt den fest Stil der besuchten Links. Der Code ist wie [a:visited {color: #00FF00;}].

Die Betriebsumgebung dieses Artikels: Windows 10-System, CSS 3, Thinkpad T480-Computer.

Wenn wir den Stil eines Hyperlinks festlegen möchten, können wir dies über CSS-Pseudoklassen tun. Das Folgende ist eine detaillierte Einführung in CSS-Pseudoklassen.

Pseudoklassen werden verwendet, um spezielle Zustände von Elementen zu definieren.

Zum Beispiel kann es verwendet werden, um:

• Stile festzulegen, wenn der Mauszeiger über ein Element bewegt wird

• unterschiedliche Stile für besuchte und nicht besuchte Links festzulegen

• Stile festzulegen, wenn ein Element den Fokus hat

Syntax:

selector:pseudo-class {
  property: value;
}

Codebeispiel:

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

Hinweis: a:hover muss nach a:link und a:visited in der CSS-Definition stehen, damit es wirksam wird! a:active muss nach a:hover in der CSS-Definition stehen, um wirksam zu werden! Bei Pseudoklassennamen wird die Groß-/Kleinschreibung nicht beachtet.

Verwandte Videofreigabe: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo gestalten Sie Hyperlinks mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!