Farbige Links können Ihrer Website Helligkeit und Lebendigkeit verleihen und die Benutzererfahrung verbessern. Sie ziehen die Aufmerksamkeit der Nutzer auf sich und machen die Navigation auf der Website bequemer. Wenn Sie lernen möchten, wie man einen Link in CSS farbig macht, gibt es mehrere Möglichkeiten, die wir in diesem Artikel betrachten werden.
Der erste Weg ist die Verwendung einer Pseudoklasse :hover. Mit dieser Pseudoklasse können Sie verschiedene Stile für einen Verweis festlegen, wenn der Benutzer den Mauszeiger darüber bewegt. Sie können beispielsweise die Textfarbe, den Unterstrich oder den Hintergrund eines Links ändern. Fügen Sie einfach einen Stil für die Pseudoklasse hinzu :hover geben Sie die gewünschte Farbe in Ihre CSS-Datei ein.
Die zweite Methode ist die Verwendung eines Pseudoselektors :active. Pseudo-Selektor :active wird auf einen Link angewendet, wenn er aktiv ist, d. H. Wenn der Benutzer darauf klickt. Mit diesem Pseudo-Selektor können Sie die Farbe von Text, Hintergrund, Unterstrichen und anderen Referenzstilen ändern. Fügen Sie Stile für hinzu :active in Ihre CSS-Datei und passen Sie sie nach Ihren Wünschen an.
Definieren der Referenzfarbe
Die Farbe des Links wird durch CSS-Stile bestimmt. Sie können die Farbe des Links mithilfe der color-Eigenschaft ändern.
Um beispielsweise einen Link rot zu machen, müssen Sie ihn mit folgendem CSS-Code versehen:
Sie können die Farbe des Links auch im Hexadezimalformat angeben. Um beispielsweise einen Link blau zu machen, können Sie den folgenden Code verwenden:
In diesem Fall wird der Link in Blau angezeigt. Der hexadezimale Farbcode kann online oder in den entsprechenden Tabellen gefunden werden.
Wenn Sie die Farbe eines Links ändern, können Sie ihn auf der Seite hervorheben und für Benutzer sichtbar machen. Dies kann hilfreich sein, wenn Sie ein stilvolles und ansprechendes Webseitendesign erstellen.
Es ist wichtig zu beachten, dass das Styling von Links nicht nur auf die Farbe angewendet werden kann, sondern auch auf andere Aspekte wie Unterstreichen, Ändern des Hintergrunds usw.
Ändern der Farbe beim Schweben
Sie können die Pseudoklasse :hover in CSS verwenden, um einen Link farbig zu machen, wenn Sie den Mauszeiger darüber bewegen. Mit dieser Pseudoklasse können Sie bestimmte Stile auf ein Element anwenden, wenn es sich im Hover-Zustand befindet.
Sie müssen eine Regel hinzufügen, um die Farbe des Hover-Links zu ändern :hover zum entsprechenden Link-Selektor in CSS. Wenn beispielsweise ein Link beim Hover rot wird, können Sie den folgenden Code verwenden, um sicherzustellen, dass der Link beim Hover rot wird:
In diesem Beispiel fügen wir dem Selektor a den Stil color: red; zur Pseudoklasse :hover hinzu. Wenn der Cursor also über den Link bewegt wird, wird er rot.
Sie können auch andere CSS-Eigenschaften verwenden, um das Erscheinungsbild eines Links beim Hover zu ändern, z. B. background-color, um den Hintergrund zu ändern, border, um den Rahmen zu ändern usw.
Ändern der Farbe eines besuchten Links
Mit CSS können Sie die Textfarbe des besuchten Links leicht ändern. Verwenden Sie dazu die Pseudoklasse :visited .
In diesem Beispiel ändert sich die Farbe des Links nach dem Besuch in Lila.
Die color-Eigenschaft kann verschiedene Werte annehmen, z. B. englische Farbnamen (z. B. rot - Rot, blau - Blau) oder hexadezimale Farbcodes (z. B. #FF0000 - rot, #0000FF - Blau).
Das Ändern der Farbe eines besuchten Links kann Benutzern helfen, die Webseite besser zu navigieren und ihre Aktivitäten im Auge zu behalten. Achten Sie bei der Auswahl der Farben darauf, dass der Text vor dem Hintergrund lesbar und gut sichtbar bleibt.
Formatieren eines aktiven Links
Ein aktiver Link ist ein Link, auf den der Benutzer gerade klickt oder den Mauszeiger bewegt. Standardmäßig stellen Browser ihren eigenen Stil für aktive Links bereit, aber Sie können diesen Stil mit CSS ändern.
Um einen aktiven Link zu formatieren, verwenden Sie die Pseudoklasse :active in CSS. Sie können jedoch Stileigenschaften wie Farbe, Hintergrund, Schriftart und viele andere ändern.
Beispiel für das einfache Styling eines aktiven Links:
a:active color: red;
font-weight: bold;
>
In diesem Beispiel wird die Textfarbe des aktiven Links rot angezeigt und der Text wird fett dargestellt.
Sie können eine andere Pseudoklasse verwenden, um den Link beim Schweben farbig zu machen :hover :
a:hover color: blue;
text-decoration: underline;
>
In diesem Beispiel wird der Linktext blau und der Text wird unterstrichen, wenn Sie den Mauszeiger bewegen.
Dadurch kann das Styling eines aktiven Links das Aussehen von Links ändern, wenn sie aktiviert oder bewegt werden, wodurch sie für Benutzer sichtbarer und interaktiver werden können.
Verwenden eines Farbverlaufs anstelle einer Farbe
Um einen Farbverlauf in CSS zu verwenden, müssen Sie die entsprechenden Werte für die Eigenschaft background oder background-color festlegen. Sie können Farben im Hexadezimalformat, ihre Namen oder den Wert none für einen transparenten Hintergrund als Werte angeben.
Beispiel für die Verwendung eines Farbverlaufs in CSS:
| Eigenschaft | Bedeutung |
|---|---|
| background | linear-gradient(to right, #ff0000, #0000ff) |
In diesem Beispiel wird ein linearer Farbverlauf verwendet, der in horizontaler Richtung von Rot (#ff0000) bis blau (#0000ff) reicht.
Auf diese Weise können Sie mithilfe eines Farbverlaufs farbenfrohe und ansprechende Links auf Webseiten erstellen.
