Verwendung von Pseudo-Klassen zum Verknüpfen von Links für HTML5 und CSS3 Programmierung

Sobald Sie in Ihren HTML5- und CSS3-Webseiten einen gewissen Stil entwickelt haben, sind Sie vielleicht etwas besorgt darüber, wie hässliche Links sind. Die Standard-Linkstile sind nützlich, passen jedoch möglicherweise nicht in Ihr Farbschema.

So formatieren Sie einen Standardlink

Das Hinzufügen eines Styles zu einem Link ist einfach. Schließlich ist (das Tag, das Links definiert) nur ein HTML-Tag, und Sie können jedem Tag einen Stil hinzufügen. Hier ist ein Beispiel, wo die Links schwarz mit einem gelben Hintergrund sind:

a {Farbe: schwarz; background-color: yellow;}

Das funktioniert gut, aber Links sind etwas komplexer als einige andere Elemente. Links haben tatsächlich drei -Zustände:

• Normal: Dies ist der Standardzustand. Wenn kein CSS hinzugefügt wird, zeigen die meisten Browser nicht besuchte Links als blauen unterstrichenen Text an.

• Besuchte: Dieser Status ist aktiviert, wenn der Benutzer einen Link besucht und zur aktuellen Seite zurückkehrt. Die meisten Browser verwenden einen violett unterstrichenen Stil, um anzuzeigen, dass ein Link besucht wurde.

• Hover: Der Hover-Status ist aktiviert, wenn sich die Maus des Benutzers über dem Element befindet. Die meisten Browser verwenden den Hover-Status nicht in ihren Standardeinstellungen.

Wenn Sie einen Stil auf die Tags einer Seite anwenden, wird der Stil auf alle Zustände aller Anker angewendet.

So formatieren Sie die Verbindungsstatus

Sie können jedem Status einen anderen Stil zuweisen. In diesem Beispiel sind die Links auf einem weißen Hintergrund schwarz. Ein besuchter Link ist schwarz auf gelb; und wenn die Maus über einem Link schwebt, ist die Verbindung weiß mit einem schwarzen Hintergrund.

Schauen Sie sich den Code an und sehen Sie, wie es gemacht wird:

linkStates. html a {Farbe: schwarz; Hintergrundfarbe: weiß;} a: besucht {color: black; Hintergrundfarbe: # FFFF33;} a: Hover {Farbe: Weiß; background-color: black;}

Pseudo-Klassen und Links
Dieser Link ist normal
Dieser Link wurde besucht
Die Maus schwebt über diesem Link

Nichts ist besonders an den Links in der HTML-Teil des Codes. Die Links ändern ihren Status dynamisch, während der Benutzer mit der Seite interagiert. Das Stylesheet bestimmt, was in den verschiedenen Zuständen passiert. So stellen Sie den Code zusammen:

1. Bestimmen Sie zuerst den gewöhnlichen Linkstil, indem Sie einen Stil für das Tag festlegen.

   Wenn Sie keine anderen Pseudoklassen definieren, folgen alle Links dem normalen Linkstil.

2. Erstellen Sie einen Stil für besuchte Links.

   Ein Link verwendet diesen Stil, nachdem diese Website während der aktuellen Browsersitzung besucht wurde. Der a: besuchte Selektor zeigt Links an, die besucht wurden.

3. Einen Stil für schwebende Links erstellen.

   Der A: Hover-Stil wird nur dann auf den Link angewendet, wenn die Maus über dem Link schwebt. Sobald die Maus den Link verlässt, wird der Stil entsprechend auf den Standard- oder den besuchten Stil zurückgesetzt.

Beste Linkpraktiken

Linkstile haben einige spezielle Eigenschaften. Sie müssen ein wenig vorsichtig sein, wie Sie Stile auf Links anwenden. Beachten Sie die folgenden Probleme beim Anwenden von Stilen auf Links:

• Die Reihenfolge ist wichtig. Stellen Sie sicher, dass Sie zuerst den gewöhnlichen Anker definieren. Die Pseudoklassen basieren auf dem Standard-Ankerstil.

• Stellen Sie sicher, dass sie immer noch wie Links aussehen. Es ist wichtig, dass Benutzer wissen, dass etwas als Link gedacht ist. Wenn Sie die Unterstreichung und die Farbe entfernen, die normalerweise einen Link anzeigt, könnten Ihre Benutzer verwirrt sein. Im Allgemeinen können Sie Farben ohne Probleme ändern, aber Links sollten entweder unterstrichener Text oder etwas sein, das eindeutig wie eine Schaltfläche aussieht.

• Test besuchte Links. Das Testen von besuchten Links ist ein wenig kompliziert, da es nach dem Besuch eines Links besucht bleibt. Die meisten Browser erlauben es Ihnen, den Browser-Verlauf zu löschen, der auch die Verbindungszustände auf unbesuchte löschen soll.

• Ändern Sie die Schriftgröße nicht in einem Schwebezustand. Hover ändert die Seite in Echtzeit. Ein Hover-Stil mit einer anderen Schriftgröße als der gewöhnliche Link kann Probleme verursachen. Die Seite wird umformatiert, um die größere Schriftart zu akzeptieren, die eine große Menge Text schnell auf dem Bildschirm bewegen kann. Es ist am sichersten, Farben oder Rahmen beim Hover zu ändern, aber nicht die Schriftfamilie oder Schriftgröße.