Verwendung von CSS zum Gestalten von Hyperlinks auf Webseiten

April 18, 2024

Wenn Sie mit HTML vertraut sind, wissen Sie, dass Sie die Farbe des Texts und der Hyperlinks auf einer Webseite steuern können. Mit Cascading Style Sheets können Sie jedoch noch viel mehr tun. Bestimmte Tags wie das Hyperlink-Ankertag weisen sogenannte Pseudoklassen auf, die den verschiedenen Zuständen des Tags zugeordnet sind. Das Hyperlink-Tag hat beispielsweise vier Zustände. Link, besucht, schweben und aktiv.

Wenn ein Link nicht verwendet wird (nicht ausgewählt), ist dies der Verknüpfung Pseudoklasse oder Zustand. Das hat besucht Status ist, nachdem der Link verwendet wurde. Das schweben Zustand ist, wenn die Maus über den Link und die fährt aktiv Status ist, wenn Sie auf den Link klicken. Die Magie von CSS besteht darin, dass jeder Status der Verbindung unabhängig über Pseudoklassen gesteuert wird. So können Sie für jeden Status unterschiedliche Eigenschaften festlegen. Sie können jede Eigenschaft verwenden, die dem Hyperlink-Ankertag in CSS zugeordnet ist.

Im folgenden Beispiel setzen wir den Verbindungsstatus auf Rot, den besuchten Status auf Lila (# 400040), den Hover- und den aktiven Status auf Rot, Unterstrichen und Kursiv.

Hinweis--Der Pfeil

gibt an, dass der Code in eine zweite Zeile eingeschlossen ist und eigentlich nur in einer Zeile stehen sollte.

Wie Sie sehen können, haben wir die Farbeigenschaft für alle Zustände auf Rot gesetzt, mit Ausnahme des besuchten Zustands, den wir auf Lila gesetzt haben. Da der Hyperlink nur für den Schwebezustand und den aktiven Zustand unterstrichen werden soll, haben wir die Eigenschaft für die Textdekoration für die beiden anderen Zustände auf "Keine" gesetzt. Schließlich haben wir den Schriftstil für den Hover- und den aktiven Status auf Kursiv gesetzt, wodurch der Text beim Übergehen oder Klicken auf den Link kursiv wird, und wir haben die Textdekoration wieder auf Unterstreichung gesetzt. Dies ist nur ein einfaches Beispiel. Sie können Ihre Stile so einfach oder ausgefallen gestalten, wie Sie möchten. Es gibt jedoch einige Dinge zu beachten.

Webbrowser unterscheiden sich darin, wie sie damit umgehen. Wenn Sie eine Eigenschaft auf einen bestimmten Wert festlegen, wird sie normalerweise von allen danach aufgelisteten Zuständen geerbt (an diese weitergegeben). In unserem obigen Beispiel war der erste in unserem Code aufgeführte Status der Verknüpfungsstatus, und wir haben die Farbeigenschaft auf Rot gesetzt. Meistens wird dies an die anderen drei Zustände weitergegeben, es sei denn, wir ändern es mit Code, wie wir es für den besuchten Zustand getan haben. Wenn wir die Textdekoration nicht wieder unterstrichen hätten, wäre der Text für den Schwebezustand und den aktiven Zustand nicht unterstrichen worden, da wir ihn im ersten Zustand deaktiviert haben. Sie können sich jedoch nicht darauf verlassen, dass alle Browser dies tun. Daher ist es am besten, alle Eigenschaften für jeden Status einzeln festzulegen.

Nehmen Sie beim Entwerfen ausgefallener Links keine großen Änderungen zwischen den Zuständen vor, z. B. erhöhen Sie die Textgröße dramatisch. Dies führt dazu, dass der Webbrowser die Seite neu lädt und Ihre Besucher sich sehr über Sie aufregen.

Die Reihenfolge, in der Sie den Code für diese Pseudoklassen auflisten, wird von der Kaskadenreihenfolge beeinflusst. Wir werden die Kaskadenreihenfolge in einem späteren Tutorial diskutieren. Denken Sie vorerst daran, dass Sie die Zustände in der oben verwendeten Reihenfolge codieren, um Konflikte zu vermeiden. Link, besucht, schweben und aktiv.

Video-Anleitungen: CSS Tutorial || Kreis und Dreieck mit CSS erstellen (April 2024).

Verwenden von CSS zum Stylen von Hyperlinks Auf Webseiten, HTML, Pseudoklassen, die den verschiedenen Status des Tags zugeordnet sind, Pseudoklasse, Hyperlink, Codieren von Hyperlinks in CSS, CSS-Pseudoklasse, CSS-Status, Status eines Tags, ausgefallene Links auf einer Webseite mit CSS ausgefallene Links

Vorherige Artikel

Nächster Artikel

In Verbindung Stehende Artikel

Computers

Begriffe der Animationssoftware

April 2024

Bei der Verwendung von Animationssoftware gibt es mehrere gebräuchliche Begriffe, mit denen Sie vertraut sein müssen. Obwohl es geringfügige Unterschiede bei der Verwendung dieser Begriffe zwischen...

Computers

Importieren Sie einen Soundclip in Flash

April 2024

Im letzten Tutorial haben Sie die Rollover-Schaltflächen für das Navigationsmenü Ihrer Site erstellt. Jetzt importieren wir einen Soundclip in Ihren Flash-Film und lassen den Sound abspielen, wenn...