Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)

NEU:
WordPress 4

Einstieg in CSS (Cover)

Beispielseiten

Inhaltsbereich

5.7 Hyperlinks gestalten

Die Gestaltung von Hyperlinks mit CSS ist ein sehr beliebtes Thema. Hier finden Sie zunächst eine kleine Einführung. Später geht es mit der Gestaltung der Navigationsliste weiter.

Hyperlinks: das HTML-Element a

Hyperlinks werden im Quelltext mit dem Element a markiert. Mit CSS können Sie Hyperlinks völlig neue Gestaltungen mit ins Web geben, zum Beispiel die Unterstreichung der Links entfernen.

ToDo: Die Unterstreichung für alle Hyperlinks entfernen
  1. Fügen Sie am Ende von bildschirm.css die folgende CSS-Regel ein:

    a { text-decoration: none; } /* Unterstreichung entfernen */

  2. Speichern Sie das Stylesheet und betrachten Sie die Webseiten im
    Browser.

Diese Regel entfernt auf beiden Webseiten die Unterstreichung von allen Hyperlinks. Viele Designer lieben diesen Trick, aber Sie sollten immer darauf achten, dass Hyperlinks trotzdem noch als solche zu erkennen sind.

Während die Unterstreichung von Hyperlinks in einem optisch abgesetzten Navigationsbereich meist nicht nötig ist, sollten Sie besonders im Textbereich überprüfen, ob die Links auch ohne Unterstreichung deutlich erkennbar sind. Im nächsten Kapitel erfahren Sie, wie Sie Hyperlinks nur im Textbereich gestalten.

Besuchte und nicht besuchte Hyperlinks

Links können je nach Zustand ihr Aussehen verändern: Unbesuchte Hyperlinks werden vom Browser traditionell blau dargestellt, besuchte hingegen lila. Für die verschiedenen Zustände eines Hyperlinks kennt CSS sogenannte Pseudoklassen, die mit einem Doppelpunkt hinter den Elementnamen a gehängt werden.

Die folgende Tabelle zeigt die beiden wichtigsten Link-Zustände und die entsprechenden CSS-Selektoren:

Hyperlink … CSS-Selektor
… zu noch nicht besuchter Seite a:link
… zu besuchter Seite a:visited

Wie das Rautenzeichen hat auch der Doppelpunkt in CSS eine doppelte Funktion:

  • Ein Doppelpunkt vor den geschweiften Klammern verbindet den Namen eines Elements mit einer Pseudoklasse: a:link. Hier darf vor oder nach dem Doppelpunkt keine Leerstelle stehen.
  • Innerhalb der geschweiften Klammern trennt der Doppelpunkt Eigenschaft und Wert, z. B. color: #d90000. Leerstellen davor und dahinter sind in diesem Fall optional.

Hier ein Beispiel für die Formatierung von besuchten und nicht besuchten Hyperlinks:

ToDo: Die Farben für besuchte und unbesuchte Links ändern
  • Fügen Sie am Ende des Stylesheets die folgenden CSS-Regeln hinzu:

    a:link { color: #d90000; }
    a:visited { color: #cc6666; }

  • Speichern Sie das Stylesheet und betrachten Sie die Webseiten im
    Browser.

Unbesuchte Hyperlinks werden jetzt dunkelrot eingefärbt und besuchte etwas blasser. Beim Ändern der Farben für Hyperlinks sollten Sie darauf achten, dass die Unterscheidung von besuchten und
unbesuchten Hyperlinks möglich bleibt, sofern dies von Ihnen gewünscht wird.

Besuchte Hyperlinks wieder unbesucht machen

Beim Testen Ihrer Seiten sind früher oder später alle Links besucht. Um sie wieder unbesucht zu machen, müssen Sie den Verlauf bzw. die History Ihres Browsers löschen.

Im Firefox geht es mit dem Add-on Web Developer einfacher: Dort finden Sie im Menü VERSCHIEDENES zu diesem Zweck das Untermenü BESUCHTE LINKS MARKIEREN

Wenn die Maus darüber schwebt: a:hover und Kollegen

CSS kennt noch drei weitere Pseudoklassen für Hyperlinks, die in der folgenden Tabelle aufgelistet werden:

Hyperlink … CSS-Selektor
… wenn der Mauszeiger darüber schwebt a:hover
… beim Durchsteppen per TABULATOR-Taste a:focus
… der gerade angeklickt wird a:active

Die ersten beiden Pseudoklassen ähneln sich in gewisser Weise, die dritte macht etwas ganz anderes:

  • :hover verändert den Hyperlink, während der Mauszeiger darüber schwebt.
  • :focus gestaltet den Hyperlink, wenn der Link per Tastatur ausgewählt wird.
  • :active formatiert den Hyperlink, wenn die Maustaste über dem Link gedrückt wird, also im Moment des Klicks.

In der Praxis bedeutet das, dass Sie :hover und :focus häufig gemeinsam deklarieren, da :focus in gewisser Weise die Tastaturentsprechung zu :hover ist.

Schreiben Sie dazu die beiden Selektoren wie im folgenden ToDo durch ein Komma getrennt vor den Deklarationsblock, am besten jeweils auf einer eigenen Zeile (Details zur Gruppierung von Selektoren finden Sie im folgenden Kapitel).

ToDo: Pseudoklassen für Hyperlinks definieren
  1. Ergänzen Sie am Ende des Stylesheets die folgenden CSS-Regeln:

    a:hover,
    a:focus {
      border-bottom: 1px solid #d90000;
    }
    a:active {
      color: white;
      background-color: #d90000;
    }

  2. Speichern Sie das Stylesheet und betrachten Sie die Webseiten im Browser.

Diese Regeln bewirken, dass bei :hover und :focus die Links wieder ihre typische Unterstreichung bekommen. Normalerweise wird die Unterstreichung von Links mit text-decoration: underline aktiviert, aber im Beispiel benutzen Sie stattdessen die Eigenschaft border-bottom, die Sie im Kapitel über das Box-Modell genauer kennenlernen werden.

border-bottom hat zwei Vorteile:

  • Sie haben bei der Gestaltung mehr Möglichkeiten und können z. B. für die Unterstreichung eine andere Farbe wählen als für den Link selbst.
  • Die Unterstreichung ist etwas weiter vom Text entfernt, der dadurch besser lesbar wird.

Im zweiten Style werden mit der Pseudoklasse :active im Moment des Klicks Hintergrund- und Schriftfarbe geändert, was mit ein bisschen Fantasie so aussieht, als ob ein Schalter gedrückt wird.

Abbildung 5.5: Startseite mit Link im Moment des Klicks
Abbildung 5.5: Startseite mit Link im Moment des Klicks

Bei :focus und :active erhalten Hyperlinks im Browser oft eine unschöne gepunktete Umrisslinie. Diese können Sie für einige Browser entfernen, indem Sie dem Selektor a in Ihrem Stylesheet die Deklaration outline: none; hinzufügen:

a {
  text-decoration: none;
  outline: none;
}

Das sollten Sie allerdings nur tun, wenn der Rahmen wirklich stört und die beiden Link-Zustände aufgrund anderer Styles trotzdem deutlich erkennbar sind, denn Tastaturbenutzer (z. B. mit TAB) können beim Navigieren sonst nicht erkennen, welcher Link gerade aktiv ist.

Die Reihenfolge der Pseudoklassen im Stylesheet ist wichtig

Beim Definieren der Pseudoklassen in Ihrem Stylesheet müssen Sie die richtige Reihenfolge beachten:

  1. a:link
  2. a:visited
  3. a:hover und a:focus (Reihenfolge egal)
  4. a:active