Textlinks mit CSS formatieren

CSS für schönere Verweise

Um optisch schöne Verweise zu gestalten, mußte man früher Bilder verwenden, die verlinkt wurden. Per CSS läßt sich aber auch sehr viel erreichen, so daß es kaum noch nötig ist, auf benutzerfreundliche Textlinks zu verzichten. Hier ein Beispiel:

• Testlink
• Startseite
• Jane Bond
• Testlink
• Spezial-Testlink

Einzelne Verweise anders formatieren

Wenn Du in Deinen Seiten bestimmte Verweise anders formatieren möchtest als die übrigen, bietet CSS die wunderbare Möglichkeit, dies über verschiedene Selektoren zu realisieren. Im Beispiel oben wurde der „Spezial-Testlink“ beim Überfahren mit der Maus anders formatiert.

Hier der HTML-Code für das Beispiel

Wie allgemein bei Navigationsmenüs üblich habe ich die Verweise in diesem Beispiel in eine ungeordnete Liste (ul) gesteckt. HTML beschreibt ja nur die Bedeutung der Elemente, nicht deren Aussehen. Und eine Liste von Verweisen ist natürlich nichts weiter als eine Liste. Übrigens könnte man die Listenpunkte mit CSS leicht auch horizontal anordnen.

<ul id="samplelist">
  <li><a href="">Testlink</a></li>
  <li><a href="/">Startseite</a></li>
  <li><a href="http://janebond.bubax.net/">Jane Bond</a></li>
  <li><a href="#content">Testlink</a></li>
  <li><a href="#samplelist" class="example">Spezial-Testlink</a></li>
</ul>

Der CSS-Code für das Beispiel

Der CSS-Code sieht anfangs vielleicht etwas abschreckend und groß aus. Bedenke aber, daß dutzende von Verweisen damit formatiert werden können. Das Navigationsmenü dieser Seiten mit derzeit 42 Verweisen wird ebenfalls komplett per CSS gestaltet. Da es aber auf über 42 Einzelseiten eingebunden wird, ist der CSS-Code, wenn man ihn auf die einzelnen Seiten hochrechnet, doch wieder sehr kurz und sparsam.

#samplelist {
  list-style-type:none;
  margin:0;
  padding:0;
  border:1px solid black;
  border-bottom:none;
  width:12em;
}

#samplelist li {
  list-style-type:none;
  width:12em;
  background-color:#999;
  margin:-1px 0 0 0;
  padding:0;
  border-top:1px solid black;
  border-bottom:1px solid black;
}

#samplelist a {
  margin:0 0 0 0;
  padding:0.2em 1.2em 0.2em 0.2em;
  display:block;
  text-align:center;
  border-left:1em solid #999;
  border-right:1px solid #999;
}

#samplelist a.example {
  border-right:1em solid #999;
  padding:0.2em 0 0.2em 0;
}

#samplelist a:link {
  color:#fff;
  background-color:transparent;
  text-decoration:none;
  font-weight:bold;
}

#samplelist a:visited {
  color:#006;
  text-decoration:none;
  font-weight:bold;
}

#samplelist a:hover,
#samplelist a:focus {
  color:#000;
  background-color:#ccc;
  text-decoration:underline overline;
  font-weight:bold;
  border-left-color:black;
}

#samplelist a.example:hover,
#samplelist a.example:focus {
  color:#f66;
  background-color:#000;
  text-decoration:underline overline;
  font-weight:bold;
  border-left-color:white;
  border-right-color:white;
}

#samplelist a:active {
  color:#00f;
  text-decoration:underline overline;
  font-weight:bold;
  border-left:1em solid #00f;
}

Erklärung einiger der eingesetzten Techniken

An folgenden Codeauszügen wird mein Vorgehen beim Formatieren erläutert:

Der ID-Selektor

#samplelist {
  list-style-type:none;
  margin:0;
  padding:0;
  border:1px solid black;
  border-bottom:none;
  width:12em;
}

Durch #samplelist wird das Element mit der ID „samplelist“ angesprochen. Im HTML-Code habe ich der die Verweise umschließenden Liste diese ID gegeben, um ihre Inhalte von anderen Verweisen meiner Seiten unterscheiden zu können.

Besonders wichtig sind hier die Angaben list-style-type:none (damit wird der Listenpunkt ausgeblendet, der sonst automatisch vor jedem li-Element vorhanden wäre) und width:12em, womit ich dem gesamten Block eine Breite gebe, die sich der eingestellten Schriftgröße des Besuchers anpaßt (verstelle sie ruhig mal – bei den meisten Browsern unter „Ansicht - Schriftgröße“).

Der Nachfahren-Selektor

#samplelist li {
  width:12em;
  background-color:#999;
  margin:-1px 0 0 0;
  padding:0;
  border-top:1px solid black;
  border-bottom:1px solid black;
}

Durch #samplelist li wird jedes li-Element, das sich innerhalb eines Elementes mit der ID „samplelist“ befindet (also jeder „Nachfahre“), angesprochen. Hätte ich das nicht getan, würden auch andere Listen auf meinen Seiten von den zugehörigen CSS-Angaben verändert werden, was ein lustiges Chaos verursachen kann...

Besonders wichtig sind hier die Angaben width:12em (damit sich die li-Elemente ganz ausdehnen) und margin:-1px 0 0 0 (das steht für Abstand: oben, rechts, unten, links, also im Uhrzeigersinn). Da ich jedem li-Element oben und unten einen Rahmen der Stärke 1px gegeben habe, wären zwischen den einzelnen Listenpunkten zwei Rahmen – also mit der Gesamtstärke 2px, was zu viel wäre. Nun überlagern sich die Rahmen, sind also wieder nur 1px stark.

Nachfahren-Selektor und Klassen-Selektor

#samplelist a {
  margin:0 0 0 0;
  padding:0.2em 1.2em 0.2em 0.2em;
  display:block;
  text-align:center;
  border-left:1em solid #999;
  border-right:1px solid #999;
}

#samplelist a.example {
  border-right:1em solid #999;
  padding:0.2em 0 0.2em 0;
}

Wie oben werden hier durch den Nachfahren-Selektor die Nachfahren der „samplelist“ angesprochen, damit nicht andere Elemente meiner Seiten verändert werden. Allerdings werden hier Nachfahren der zweiten Ebene angesprochen, nämlich die Anker (a) innerhalb von li innerhalb von samplelist.

Zusätzlich wird hier der Klassen-Selektor eingesetzt, um den „Spezial-Testlink“, also einen speziellen Verweis, gesondert anzusprechen. Er funktioniert genau so wie der ID-Selektor, nur wird statt einer Raute (#) ein Punkt zur Kennzeichnung verwendet. Diese Selektoren kann man ohne Angabe des zugehörigen Elementes einsetzen (wie oben beim Nachfahren-Selektor) – dann beziehen sie sich auf jedes beliebige Element mit der entsprechenden ID oder Klasse. Oder es wird das zugehörige Element angegeben (wie hier beim Klassen-Selektor) – dann beziehen sich die Angaben ausschließlich auf das angegebene Element (hier also a) mit der entsprechenden ID oder Klasse.

Besonders wichtig sind hier die Angaben display:block (dadurch dehnen sich die Verweise auf die volle Breite ihres Containers aus), text-align:center, wodurch der Text innerhalb der Verweise zentriert wird und border-left:1em solid #999. Zu dem Rahmen gibt es folgendes zu beachten: Er hat dieselbe Farbe wie der Hintergrund der li-Elemente, ist also unsichtbar. Außerdem ist er wesentlich dicker als die anderen Rahmen (1em entspricht der Breite des Buchstaben „m“. Beim Überfahren mit der Maus (wird weiter unten erwähnt) wird nur die Farbe, nicht aber die Dicke geändert. Den Effekt sieht man oben im Beispiel: Es erinnert nun nicht mehr so sehr an einen Rahmen – wird aber genau dadurch erzeugt.

Noch etwas zu der Angabe display:block: Erstelle Dir einmal eine Testseite und ändere display:block in display:inline (das ist die Voreinstellung für alle inline-Elemente!) – dann siehst Du, was es mit display:block auf sich hat.

Pseudoklassen (Pseudoformate)

In den folgenden Abschnitten des CSS-Codes wird das Aussehen der Verweise festgelegt, wenn bestimmte Zustände zutreffen. Ein bereits besuchter (:visited) Verweis soll anders aussehen als ein „frischer“ (:link), ferner soll beim Überfahren mit der Maus (:hover) und wenn mit der Tastatur zu dem Verweis gesprungen wird (:focus) dieser hervorgehoben werden; und beim Auslösen des Verweises (:active – z. B. beim Klicken) soll er nochmals anders hervorgehoben werden.

Grundsätzliches zur Funktionsweise von Pseudoformaten

Bei CSS erhält die zuletztgenannte Angabe beim Zusammentreffen zweier Zustände eine höhere Priorität. Grundsätzlich – und in den meisten Fällen richtig – sollte die Reihenfolge daher so aussehen:

a:link {[...]}
a:visited {[...]}
a:focus {[...]}
a:hover {[...]}
a:active {[...]}

So werden alle Effekte, wie sie in den meisten Fällen gewünscht werden, ausgeführt. Bei folgendem Beispiel aber mit leicht geänderter Reihenfolge würde bei einem bereits besuchten Verweis der :hover-Effekt nicht mehr ausgeführt, da :visited Priorität gegenüber :hover erhält. Grundsätzlich kann man die Reihenfolge der Formate natürlich frei wählen, man sollte sich der Folgen der gewählten Reihenfolge jedoch bewusst sein. Hier das Beispiel:

a:link {[...]}
a:focus {[...]}
a:hover {[...]}
a:visited {[...]}
a:active {[...]}

Wenn die Maus sich über einem bereits besuchten Verweis befindet, dann gelten die Angaben für beide Zustände gleichzeitig. Stünde dort a:hover {text-decoration:underline;} und a:visited {font-style:italic;}, dann würde der Verweis natürlich gleichzeitig unterstrichen und kursiv sein. Schließen die Angaben aber einander aus (z. B. color:red und color:blue), was häufig der Fall ist, dann gewinnt - abgesehen von speziellen Fällen, die aber gewollt sein müssen - immer die letzte Angabe.

Browserkompatibilität der erwähnten Pseudoformate

Speziell der Internet Explorer einschließlich Version 6 macht einem hier das Leben schwer, da er :focus gar nicht, :active aber ganz falsch versteht. Bei :active verhält sich der IE in etwa so, wie es eigentlich für :focus vorgesehen ist, nur, daß er dabei auf die Auswahl von Elementen per Tastatur kaum reagiert.

Weil :focus im IE keine Auswirkung hat, verzichten viele Webseitenbastler ganz auf diese Angabe, was sehr schade ist. Denn Menschen, die lieber mit der Tastatur navigieren (und die einen modernen Browser verwenden), fehlt so eine deutlichere Hervorhebung von Verweisen.

Formatierung der Verweise

Es gibt in CSS zahllose Formatierungsmöglichkeiten. Die in meinem Beispiel gewählten und einige verwandte erläutere ich hier – die Auflistung ist keinesfalls erschöpfend!

Auflistung möglicher Formatierungen

text-decoration:none;

keine Textdekoration

text-decoration:underline;

Textunterstreichung

text-decoration:overline;

Textüberstreichung

text-decoration:underline overline;

Textunterstreichung und Textüberstreichung

text-decoration:line-through;

Textdurchstreichung

font-weight:bold;

fetter Text

font-style:italic;

kursiver Text

border:1px solid #00f;

massiver (solid) Rahmen der Stärke 1 Pixel (1px) und blauer Farbe (#00f)

border-right:1em solid #999;

massiver (solid) Rahmen auf der rechten Seite der Stärke 1em (1em) und hellgrauer Farbe (#999)

Farben

Natürlich lassen sich für alle Zustände sowohl Text- (color) als auch Hintergrundfarben (background-color) zuweisen; ebenso auch verschiedene Hintergrundbilder (background-image), so daß das Erscheinungsbild der Verweise wesentlich vielfältiger sein kann als bei meinem noch immer schlichten Beispiel

Weitere Selektoren

Neben den erwähnten Selektoren – ID-Selektor, Klassen-Selektor, Nachfahren-Selektor – gibt es noch viele weitere. Leider werden nicht alle von allen Browsern besonders gut unterstützt; speziell der veraltete Internet Explorer zeigt hier gravierende Mängel. Bei folgender Auflistung werden auch einige Selektoren aufgeführt, die es erst in CSS 3 (das noch nicht verabschiedet worden ist) geben wird, die aber schon eine breite Unterstützung in modernen Browsern (Mozilla, Firefox, Netscape 6 und höher, Opera, Konqueror, Safari) genießen. Bei diesen Selektoren ist jeweils angegeben, daß sie noch nicht in CSS 2.1 existieren; außerdem wird erwähnt, wenn der IE 6 einen Selektor nicht unterstützt.

Netscape 4 unterstützt so wenig davon, daß auf diesen Browser hier nicht näher eingegangen wird. Bitte diesen Umstand berücksichten: Die wenigen Besucher, die noch mit Netscape 4 unterwegs sind, bekommen diese Effekte zwar nicht mit, aber sie dürfen nicht von den Inhalten ausgeschlossen werden. Schau' Dir diese Seiten einfach mal mit Netscape 4 an, dann wirst Du sehen, was ich meine...

Auflistung von Selektoren aus CSS 2.1 und CSS 3

p a:link (Nachfahrenselektor)

Alle Verweise innerhalb des p-tags werden angesprochen, egal, auf welcher Ebene sich der Verweis befindet.

p > a:link (Kindselektor)

Alle Verweise innerhalb des p-tags werden angesprochen, sofern sie sich exakt eine Ebene unterhalb des p-tags befinden – hiermit hat der IE teilweise Probleme.

* a:link (Universalselektor)

Alle Verweise innerhalb eines beliebigen anderen Elementes werden angesprochen – also überhaupt alle, weil ja jedes a irgend ein Elternelement haben muß. * ist der Universalselektor. Auch hiermit hat der IE in einer bestimmten Konstellation Probleme: Und zwar wendet er im Falle von * html a:link die Formatierungen auf a:link an, obwohl html niemals ein Elternelement haben kann. Dieser Fehler (nach den beteiligten Selektoren als „star-html bug“ bezeichnet) wird manchmal ausgenutzt, um bestimmte CSS-Angaben ausschließlich dem IE zukommen zu lassen, wenn er die eigentlich korrekten Angaben falsch umsetzt.

p * a:link (Universalselektor, tiefere Verschachtelung)

Durch geschickte Verschachtelung von Selektoren lassen sich gezielt bestimmte Elemente ansprechen, wie in diesem Beispiel gezeigt wird: Alle Verweise innerhalb des p-tags werden angesprochen, sofern sie sich mindestens 2 Ebenen unterhalb des p-tags befinden (p muß ein Kind haben, das als Nachfahren einen Verweis hat). Ähnlich auch die folgende Verschachtelung.

p code a:link (speziellere tiefe Verschachtelung)

Alle Verweise innerhalb des p-tags werden angesprochen, sofern sie innerhalb eines code-Elementes stehen.

h2 + p (Folgeselektor)

Alle Absätze (p) werden angesprochen, sofern sie unmittelbar auf das h2-tag folgen, also in dieser Form:

<h2>Ich bin eine Überschrift</h2>
<p>Ich bin ein Absatz.</p>

Diese Syntax versteht der IE nicht.

acronym[title] (Attributselektor)

Der Attributselektor: Gilt für jedes acronym, das ein title-Attribut hat – das versteht der IE nicht. (Dieser Selektor wird von mir übrigens eingesetzt, um z. B. Abkürzungen wie „CSS“, deren Bedeutung ich mit dem title-Attribut erläutere, hervorzuheben. Als Nutzer des Internet Explorer mußt Du raten, wo ich das Attribut gesetzt habe. Besucher mit modernen Browsern können das direkt durch Unterstreichung, Farbe und geänderten Mauszeiger erkennen).

a[href="http://janebond.bubax.net/"] (Attributselektor mit Wert)

Gilt für jedes a, das das href-Attribut hat, dessen Wert exakt identisch ist mit „http://janebond.bubax.net/“. Kurz: Jeder Verweis auf die Seite http://janebond.bubax.net/ – auch das versteht der IE nicht.

a[href^="http://"] (Attributselektor mit Wert) (CSS 3)

Gilt für jedes a, das das href-Attribut hat, dessen Wert mit „http://“ beginnt. Kurz: Jeder absolute Verweis auf eine Seite über das HTT-Protokoll. Dieser Selektor kann – auch zusammen mit dem vorhergegangenen – dazu genutzt werden, Verweise auf externe Seiten hervorzuheben, wie ich das auf diesen Seiten tue. Auch hier gilt wieder: Der IE bleibt stumm. IE-Nutzer müssen beim Überfahren eines Verweises also auf ihre Statusleiste blicken, um das Verweisziel zu erkennen.

a[href$=".pdf"] (Attributselektor mit Wert) (CSS 3)

Gilt für jedes a, das das href-Attribut hat, dessen Wert mit „.pdf“ endet. Kurz: Das Verweisziel ist (normalerweise) ein PDF-Dokument. Auch das versteht der IE selbstverständlich nicht.

Viel Spaß!
Jane

---

Literatur:

• Selektoren in CSS 3 (Englisch)