Links stylen
tldr;
Links stylen allgemein
a{ } /* Das Link-Element stylen */
a.btn{ } /* Links mit einer bestimmten Klasse stylen - hier die Links mit der Klasse "btn"
<a class="btn" ... */
footer a{ } /* Links in einem anderen Element stylen, hier alle Links in der Fusszeile */
Link-Interaktionen gestalten
a:link{ } /* Styles für noch nicht besuchte Links */
a:visited{ } /* Styles für besuchte Links */
a:hover{ } /* Styles für mouse-over */
a:focus{ } /* Styles für Fokus wenn mit der Tastatur navigiert wird */
a:active{ } /* Styles für den Klick-Moment */
Weitere Möglichkeiten
a[href^="https://sfg.dbopp.ch/"]{ } /* Styles für Link die auf eine bestimmte Seite zeigen */
:focus-within /* Element anders stylen wenn ein Link darin den Fokus hat */
<a target="_blank"></a> /* Link in neuem Tab öffnen */
<a href="mailto:info@example.com">Schreibe uns</a> /* Link zu E-Mail, SMS, Tel mit mailto:, sms:, tel: */
Geschichte
Bereits in den Anfängen des World Wide Web, noch vor der Entstehung von CSS, gab es interaktive HTML-Elemente: Fuhr man mit der Maus über einen Link, ändert sich der Cursor, das klickende Händchen zeigt an, dass man hier klicken kann.
Links verändern auch ihre Farbe von blau zu violett, wenn man schon mal da war.
Und wer mit der Tastatur durch eine Website navigiert, ist froh wenn das jeweils aktive Elemente optisch markiert ist.
Alle diese Interaktionen können wir mit CSS stylen. Und zwar für alle Elemente, nicht nur für Links.
Hover
Wir können ein Element beliebig anders darstellen, wenn jemand mit seiner Maus darüber fährt.
Dafür verwenden wir die Pseudoklasse :hover.
Der folgende Code bewirkt z.B., dass Links eine Hintergrundfarbe erhalten, wenn man darüber fährt.
a:hover{ background-color: pink; }
Wichtig: Man darf sich nie darauf verlassen, dass ein Website-Besucher eine Maus verwendet. Für das Verständnis wichtige Informationen dürfen nicht hinter einem Hover-Effekt versteckt werden!
Focus
Man kann mit der Tastatur durch eine Website navigieren. Das sollte man auch immer mal wieder bei eigenen Webseiten austesten, denn so ähnlich wie wir Sehenden mit der Tastatur navigieren, navigieren sich Blinde durch eine Website.
Das aktive Element erhält standardmässig einen feinen gepunkteten Rahmen (outline). Manchmal wird das als störend empfunden und mit CSS entfernt. Das sollte man nicht tun. Man erschwert damit die Zugänglichkeit der Website.
Wenn einem der gepunktete Rahmen nicht gefällt, sollte man sich eine Alternative überlegen. Wie soll ein Element aussehen, das den Fokus hat?
a:focus{ ouline:0; /* nur machen wenn man eine Alternative anbietet! */ background-color: black; /* eine mögliche Alternative */ color white;}
Active
Wird ein Link geklickt, wechselt der Browser dahin. Bis die neue Seite geladen ist, kann man den Link speziell anzeigen lassen.
:active
Weitere Pseudoklassen
(EN) https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
Kombinationen
Oft genügt es, einen einzigen Style für Hover, Focus & Active zu haben, dann kann man für alle denselben CSS-Regelblock verwenden.
a:hover, a:focus, a:active{ font-weight: bold;}
Transition
Eine Änderung mit Hover wurde bisher nach dem Motto „Ein/Aus“ umgeschaltet. Oft sind fliessende Übergänge erwünscht.
Hier kommt die vergleichsweise neue CSS-Eigenschaft transition ins Spiel. Mit ihr kann man festlegen, wie sich eine Eigenschaft vom einen in den anderen Zustand verändern soll. Daraus ergeben sich einfach Animationen.