So erstellen Hyperlink Styles mit Pseudo-Klassen in Cascading Style Sheets (CSS)

Eines der häufigsten Verwendungen der Verbindung Arten von Cascading Style Sheets (CSS) ist benutzerdefinierte Hyperlinks mit Pseudo-Klassen zu erzeugen, die verwendet werden können, die Standardfarbe und Attribute von Hyperlinks zu ändern.

Der Hyperlink Verbindung Pseudo-Klasse-Stil kann als zweiteilige Selektor geschrieben werden, wo der Anker-Tag durch eine durch den Namen des Verbindungsstatus Doppelpunkt getrennt ist, wie in eine Verbindung, a: visited, a: hover, und a: active.

Das Aussehen eines Hyperlinks wird durch ein Besucherinteraktivität mit ihm in einem Browser bestimmt:

  • Normale Links sind nicht besuchte Links.

  • Besuchte Links Links, die der Besucher bereits geklickt hat.

  • Hover Links ihr Aussehen zu verändern, wenn ein Besucher den Mauszeiger über ihnen schwebt.

  • Aktive Links ihr Aussehen zu verändern nur als Besucher direkt auf einen Link klickt, bevor Sie die Maustaste loslassen.

Wie Sie vielleicht gut kennen, alle Hyperlinks durch Standardanzeige in entweder blau unterstrichenen Text (unvisited Link) oder lila unterstrichenen Text (besuchte Links). Da diese Farben unwahrscheinlich sind in Ihrer Website-Design die besonderen Farben übereinstimmen, können Sie die Standard-Link-Arten außer Kraft setzen von benutzerdefinierten Link Arten zu schaffen.

Noch besser ist, zusätzlich zu den unvisited und besuchten Hyperlink Staaten, mit CSS, können Sie Stile für zwei weitere Hyperlink Staaten hinzuzufügen, nämlich der Schwebezustand, der, wenn ein Besucher den Mauszeiger über einen Link auf, und der aktive Zustand, die erscheint, wenn ein Besucher auf einen Link klickt.

nur die Farbe eines Hyperlinks für alle vier Verbindungszustände, fügen Sie die folgenden Stil-Definitionen zu Ihrer CSS und ersetzt die hexadezimalen Werte in diesem Beispiel mit dem gewünschten Farbwerte für jede der Link-Styles zu ändern:

a: link {color: # CC0000-} a: visited {color: # 339933-} a: hover {color: # 000000-} a: active {color: # 99CC33-}

Um die Dinge interessant zu machen, können Sie zusätzliche Stil Erklärungen hinzufügen für eines oder alle vier Verbindungszustände. Zum Beispiel möchten Sie vielleicht die unterstrichenen zu entfernen, eine Hintergrundfarbe oder eine gepunktete Umrandung um den Hyperlink gelten, wie hier gezeigt und weiter unten:

bild0.jpg
a: link {color: # CC0000-} a: visited {color: # 339933-text-decoration: none;} a: Hover {color: # 000000-background-color: # 0CC-} a: active {color: # ffffff-text-decoration: none; border: 2px gepunkteten # CCC-background-color: # 000-}

Wenn diese Stile Link erstellen, müssen Sie darauf achten, dass jeder Stil, um die CSS in der gleichen Reihenfolge hinzugefügt wird wird es durch einen Website-Besucher auf einer Website erfahren werden: link, besuchte, schweben, aktiv.

Wenn die Stile auf die CSS in der falschen Reihenfolge hinzugefügt werden, können die Link-Styles nicht richtig funktionieren, wenn sie in einem Browser angezeigt. Daher erhalten die Gewohnheit, zuerst den normalen Verbindungsstatus zu erstellen, fügen Sie dann den besuchten Zustand durch den Schwebezustand folgte, und schließlich in den aktiven Zustand, wie im vorherigen Beispiel gezeigt.

Ähnliche

Menü