Anpassen von Links mit CSS

Anpassen von Links mit CSS - Dummies

Im Allgemeinen zeigen Browser Links als blau unterstrichenen Text an. Ursprünglich minimierte dieses Standardverhalten die Verwirrung zwischen Inhalt auf der Seite und einem interaktiven Link. Heutzutage verbindet sich fast jede Webseite auf ihre eigene Weise. Einige Websites unterstreichen keine Links; andere behalten die Unterstreichung, aber Stil-Links in anderen Farben als blau; und so weiter.

Das HTML-Ankerelement ( a ) dient zum Erstellen von Verknüpfungen. Der Text zwischen dem öffnenden und dem schließenden Anker-Tag ist die Link-Beschreibung, und die im Attribut href festgelegte URL ist die Adresse, die der Browser beim Klicken auf den Link aufruft.

Das Anker-Tag hat sich im Laufe der Zeit entwickelt und hat heute vier Zustände:

  • link : Ein Link, den ein Benutzer nicht angeklickt oder besucht hat
  • besuchte : A Link, den ein Benutzer angeklickt oder besucht hat
  • hover : Ein Link, über den der Benutzer den Mauszeiger bewegt, ohne zu klicken
  • active : Ein Link, den der Benutzer angeklickt hat, aber noch nicht freigegeben hat die Maustaste

CSS kann jeden dieser vier Zustände formatieren, am häufigsten unter Verwendung dieser Eigenschaften und Werte.

Allgemeine CSS-Eigenschaften und Werte für das Formatieren von Verknüpfungen
Eigenschaftsname Mögliche Werte Beschreibung
Farbe Name

Hexadezimalcode

RGB-Wert

Verbindungsfarbe angegeben mit Namen ( Farbe: Blau; ), Hexadezimalcode ( Farbe: # 0000FF; ) oder RGB-Wert ( Farbe: rgb (0, 0, 255); >). Textdekoration
keine

unterstreicht

Setzt den Link auf eine Unterstreichung (oder nicht).

Im folgenden Beispiel werden Links in ähnlicher Weise wie in Wikipedia-Artikeln formatiert, wobei Links standardmäßig blau, beim Maus-Mauszeiger unterstrichen und bei Aktivierung orange angezeigt werden. Wie unten gezeigt, wird die erste Verbindung zum Chief Technology Officer der Vereinigten Staaten unterstrichen dargestellt, als ob eine Maus darüber schweben würde. Außerdem erscheint die Verknüpfung zu Google so, als ob sie aktiv wäre und die Maus darauf geklickt hätte.

a: Verbindung {

Farbe: rgb (6, 69, 173);

Textdekoration: keine;

}

a: besuchte {

Farbe: rgb (11, 0, 128)

}

a: Hover {

Textdekoration: Unterstreichung

}

a: aktiv {

Farbe: rgb (250, 167, 0)

}

Wikipedia. Organisationsseite, die Verknüpfungen, Besuche, Hover und aktive Zustände anzeigt.

Denken Sie daran, den Doppelpunkt zwischen der Auswahl

a und dem Verbindungsstatus anzugeben. Auch wenn erklärt wird, warum der Rahmen dieses Buches übersteigt, bestehen die CSS-Spezifikationen darauf, dass Sie die verschiedenen Verknüpfungszustände in der hier gezeigten Reihenfolge definieren - verknüpfen, besuchen, schweben und dann aktiv.Es ist jedoch akzeptabel, keinen Verbindungsstatus zu definieren, solange diese Reihenfolge beibehalten wird.

Die verschiedenen Verbindungszustände sind als

Pseudoklassenselektoren bekannt. Pseudo-Klassenselektoren fügen CSS-Selektoren ein Schlüsselwort hinzu und gestatten Ihnen, einen speziellen Status des ausgewählten Elements zu formatieren.