Hyperlinks gestalten

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Hyperlinks sind eine besondere Art von Text. Sie sind interaktiv und dienen der Navigation auf einer Seite und zwischen verschiedenen Seiten. Hyperlinks können zum Beispiel mit JavaScript auch für viele weitere Aufgaben eingesetzt werden, zum Beispiel um Dialog- oder Unterfenster zu erzeugen.

Es gibt grundsätzlich zwei Methoden, das Aussehen von Hyperlinks zu gestalten. Mit CSS-Eigenschaften kann man zum einen ein statisches Aussehen für sie festlegen, wie wir es bisher für normalen Text gemacht haben. Dabei lässt man die Besonderheit von Hyperlinks außer Acht, dass sie vier verschiedene Zustände annehmen können. Die zweite Methode macht sich diese Eigenschaft dagegen zunutze. CSS bietet vier Pseudoklassen für die vier verschiedenen Zustände von Ankerelementen (siehe folgende Tabelle). Über diese kann man jedem Zustand einen eigenen Textstil zuweisen. (Anmerkung: Nach dem CSS-Standard können die zwei Pseudoklassen :hover und :active auch für andere HTML-Elemente als Hyperlinks eingesetzt werden. Es existiert auch noch eine weitere Pseudoklasse :focus, die vom Internet Explorer unter Windows nicht unterstützt wird und daher nur selten zur Anwendung kommt.)

Standardmäßig werden Links als blauer, unterstrichener Text dargestellt. Schrifttyp und -größe werden immer vom umgebenden Text vererbt. Man kann einem Link aber auch eine andere Schrift, Schriftgröße oder Farbe zuweisen. Das bietet sich besonders für längere Linklisten an, die übersichtlicher werden, wenn man sie vom umgebenden Text hervorhebt.

Tabelle: Die vier Pseudoklassen für das Ankerelement.

Pseudoklasse Zustand des Hyperlinks
a:link Link wurde noch nicht angeklickt
a:visited Link wurde bereits angeklickt
a:hover Mauszeiger befindet sich über Link
a:active Link, während er angeklickt wird

Um das Aussehen von Hyperlinks zu verändern, können alle bekannten CSS-Methoden zur Textgestaltung verwendet werden. Im folgenden Beispiel weisen wir einen Link der CSS-Klasse hyperlink zu, in der wir eine besondere Schrift- und Farbkombination für ihn definiert haben:

<a class="hyperlink" href="irgendwo">Hier klicken</a>

Zwei Hyperlinks mit unterschiedlichen Formatierungen

Abbildung: Zwei Hyperlinks mit unterschiedlichen Formatierungen.

In der Abbildung sehen Sie zwei Hyperlinks. Der obere, normale Link wird auf dem Bildschirm in typisch blauer Farbe und in der Standardschrift dargestellt. Nur seine Unterstreichung ist im Browser ausgeschaltet worden. Der untere Link ist eine Instanz der Klasse hyperlink, für die wir Schriftfamilie und -größe sowie die Farben für Hintergrund und Text definiert haben.

In einem Stylesheet kann man über die oben vorgestellten Pseudoklassen ein spezifisches Design für jeden möglichen Zustand eines Links festlegen – wie in folgendem typischen Beispiel:

a:link {
  color: darkgreen;
  background-color: transparent;
}
a:visited {
  color: lightgreen;
  background-color: transparent;
}
a:hover {
  color: green;
  background-color: black;
}
a:active {
  color: black;
  background-color: green;
}

Wenn Sie in einem Stylesheet das Aussehen der verschiedenen Zustände von Hyperlinks definieren, sollten Sie unbedingt die Reihenfolge aus unserem Beispiel einhalten. In CSS kann es durchaus passieren, dass eine Stilregel durch eine im selben Stylesheet nachfolgende überschrieben wird. Würden wir zum Beispiel als Erstes a:hover und dann erst a:link und a:visited definieren, würden die Werte der Stilregel von a:hover nicht zum Einsatz kommen. Da sich jeder Link, über dem ein Mauszeiger schwebt, zugleich auch in einem Zustand befindet, dass er entweder bereits besucht oder noch nicht besucht wurde, würde die Regel für :hover von den nachfolgenden Regeln für :link oder :visited gleich wieder aufgehoben. Manche Menschen finden die Eselsbrücke »love-hate« zur Einhaltung der Reihenfolge hilfreich: :link, :visited, :hover und zum Schluß :active.

Es ist auch möglich, zwei kombinierte Pseudoklassen in einer Stilregel näher zu bestimmen. Mit der folgenden Stilregel wird zum Beispiel eine besondere :hover-Farbe für bereits besuchte Verknüpfungen festgelegt:

a:visited:hover {
  color: blue;
  background-color: transparent;
}

Mit der folgenden Stilregel können Sie die Unterstreichung von Links in allen vier Zuständen auf einmal unterbinden:

a {
  text-decoration: none;
}

Wenn Links nicht offensichtlich als solche erkennbar sind, sollte die Unterstreichung jedoch nicht entfernt werden. Es ist sonst schwierig, sie von normalem Text zu unterscheiden. Das trifft selbstverständlich nicht für Links in einer Navigationsleiste zu, die mit CSS besonders gestaltet wurden, anstatt Bilddateien zu verwenden.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg