So gestalten Sie Links in CSS

Styling-Links

Links können mit jeder CSS - Eigenschaft, wie gestylt werden color, font-family, font-size, und padding. Hier ist ein einfaches Beispiel:

a { color: hotpink; }

Darüber hinaus können Links je nach Status unterschiedlich gestaltet werden.

Links haben auch 4 Zustände, und viele Programmierer gestalten jeden Zustand anders. Die vier Zustände sind:

  • a:link: ein nicht besuchter, nicht angeklickter Link
  • a:visited: ein besuchter, angeklickter Link
  • a:hover: Ein Link, wenn sich die Maus des Benutzers darüber befindet
  • a:active: Ein Link, wenn darauf geklickt wird

Die Eigenschaft ist für das Erstellen von URLs verantwortlich und kann mithilfe einer Reihe von CSS-Stileigenschaften geändert werden, obwohl sie standardmäßig einige enthält:

  1. Unterstreichen
  2. Blaue Farbe

Sie können diese ändern, indem Sie Änderungen an colorund text-decorationEigenschaften hinzufügen .

 color: black; text-decoration: none;

Sie können den Link auch basierend auf der Interaktion mithilfe dieser Eigenschaften formatieren, die auch als Linkstatus bezeichnet werden:

  • a: link - ein normaler, nicht besuchter Link
  • a: besucht - ein Link, den der Benutzer besucht hat
  • a: hover - ein Link, wenn der Benutzer mit der Maus darüber fährt
  • a: active - ein Link, sobald darauf geklickt wird

Hier ist ein Beispiel für CSS mit den 4 Status:

a:link { color: red; } a:visited { color: blue; } a:hover { color: green; } a:active { color: blue; }

Beachten Sie, dass es einige Bestellregeln gibt, wenn Sie den Stil für Verbindungsstatus festlegen .

  • a:hoverMUSS nach a:linkund kommena:visited

a:active MUSS danach kommen a:hover

a: Link - ein normaler, nicht besuchter Link a: besucht - ein Link, den der Benutzer besucht hat a: hover - ein Link, wenn der Benutzer mit der Maus darüber fährt a: aktiv - ein Link, sobald er angeklickt wird

/* unvisited link */ a:link { color: red; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: hotpink; } /* selected link */ a:active { color: blue; } 

Mehr zum Styling in CSS:

  • So formatieren Sie ein HTML-Tag direkt in CSS
  • So gestalten Sie Listen mit CSS
  • So stylen Sie Schaltflächen mit CSS