Wie Pseudo-Klassen-Art Links für HTML5 und CSS3 Programmierung verwenden

Sobald Sie einige Stil geht in HTML5 und CSS3 Web-Seiten haben, können Sie ein wenig besorgt darüber, wie hässlich Links. Die Standard-Link-Styles sind nützlich, aber sie können nicht mit Ihrem Farbschema passen.

Wie ein Standard-Link zum ursprünglichen Stil

Das Hinzufügen eines Stils zu einer Verbindung ist einfach. Immerhin (der Tag, die Links definiert) nur ein HTML-Tag ist, und Sie können einen Stil zu jedem Tag hinzuzufügen. Hier ist ein Beispiel, wo die Links sind schwarz mit einem gelben Hintergrund:

a {color: black-background-color: gelb-}

Das funktioniert gut, aber Links sind ein wenig komplexer als einige andere Elemente. Links haben tatsächlich drei heißt es:

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

  • besucht: Dieser Zustand wird aktiviert, wenn der Benutzer auf einen Link besucht und kehrt zu der aktuellen Seite. Die meisten Browser verwenden, um einen lila unterstrichenen Stil, um anzuzeigen, dass ein Link besucht wurde.

  • Schweben: Der Schwebezustand wird aktiviert, wenn die Maus des Benutzers über das Element verweilen. Die meisten Browser in ihren Standardeinstellungen verwenden, um die Schwebezustand nicht.

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

Wie die Verbindungszustände zu gestalten

Sie können einen anderen Stil zu jedem Zustand anzuwenden. In diesem Beispiel sind die Links schwarz auf weißem Hintergrund. Ein besuchten Link ist schwarz auf gelb- und, wenn die Maus über einen Link schwebt, der Link ist weiß mit einem schwarzen Hintergrund.

bild0.jpg

Werfen Sie einen Blick auf den Code und sehen, wie es gemacht wird:

linkStates.html
Pseudo-Klassen und Links
Dieser Link ist normal
Dieser Link wurde besucht
Die Maus ist die Maus über diesen Link

Nichts ist das Besondere an den Links im HTML-Teil des Codes. Die Links ihren Zustand ändern sich dynamisch, während der Benutzer mit der Seite interagiert. Das Stylesheet bestimmt, was in den verschiedenen Staaten geschieht. Hier ist, wie Sie den Code Ansatz der Zusammenstellung:

  1. Bestimmen Sie den normalen Link Stil zuerst durch einen Stil für das Tag zu machen.

    Wenn Sie keine anderen Pseudo-Klassen definieren, werden alle Links, um den normalen Link Stil folgen.

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

    Ein Link wird diesen Stil verwenden, nachdem die Site im aktuellen Browser-Sitzung besucht wird. Das a: visited Selektor zeigt Links, die besucht wurden.

  3. Machen Sie einen Stil für hovered Links.

    Das a: hover Stil ist nur auf den Link angewendet, wenn die Maus über den Link schwebt. Sobald die Maus auf den Link verlässt, kehrt der Stil der Norm oder besucht Stil, als angemessen.

Beste Link Praktiken

Link-Stile haben einige Besonderheiten. Sie müssen ein wenig vorsichtig sein, wie Sie Stile für Links gelten. Betrachten Sie die folgenden Probleme, wenn Stile Links Anwendung:

  • Die Reihenfolge ist wichtig. Achten Sie darauf, zuerst die gewöhnlichen Anker zu definieren. Die Pseudo-Klassen sind auf dem Standard-Anker-Stil basiert.

  • Stellen Sie sicher, sie sehen immer noch wie Links. Es ist wichtig, dass die Nutzer wissen etwas soll eine Verbindung zu sein. Wenn Sie die Unterstreichungen und die Farbe nehmen, die normalerweise einen Link gibt, könnten die Benutzer verwechselt werden. Im Allgemeinen können Sie Farben ohne Probleme ändern, aber Links sollten entweder unterstrichenen Text oder etwas sein, das klar wie eine Taste aussieht.

  • Test besuchte Links. besuchte Links zu testen ist ein wenig schwierig, weil, nachdem Sie einen Link besuchen, besuchte er bleibt. Die meisten Browser können Sie die Browser-History zu löschen, die auch die Verbindungszustände löschen sollte nicht besucht.

  • Ändern Sie nicht Schriftgröße in einem Schwebezustand. Hover ändert sich die Seite in Echtzeit. Der Hover-Stil mit einer anderen Schriftgröße als die gewöhnliche Verbindung kann zu Problemen führen. Die Seite wird neu formatiert die größere Schrift zu akzeptieren, die schnell eine große Menge an Text auf dem Bildschirm zu bewegen. Am sichersten ist es Farben oder Grenzen auf schweben zu ändern, aber nicht die Schriftfamilie oder Schriftgröße.

Ähnliche

Menü