Linkeigenschaften manipulieren
Das zentrale Element neben dem eigentlichen Inhalt einer Webseite sind sicherlich die Verweise, mit denen die Einzelseiten zu einem zusammenhängenden Webprojekt verbunden sind. Die Hyperlinks sollten sich daher optisch deutlich vom übrigen Fließtext unterscheiden. Mit den Style Sheets lassen sich über sogenannte Pseudoformate Linkeigenschaften für die einzelnen Linkzustände problemlos manipulieren.
Pseudoformate
Über Pseudoklassen und Pseudoelemente können in CSS einzelne HTML-Elemente näher definiert werden, die für sich genommen nicht eindeutig definiert sind. Das bekannteste Beispiel ist der Link. Wenn man eine Webseite zum ersten Mal ansurft, dann ist in der Regel jeder Verweis neu für den Besucher. Wenn er nun ein wenig in dem Angebot herumklickt, stößt er sicher irgendwann einmal auf Links zu Seiten, die er schon besucht hat. Dieser Linkzustand ist für den Programmierer natürlich nicht vorherzusehen, denn nur die Historyliste des Browsers gibt Auskunft, welche Seite bereits angezeigt wurde. Ein Link kann den Zustand „noch nicht besucht (link)“, „besucht (visited)“ und „aktiv (active)“ annehmen oder es wird gerade „mit der Maus darübergefahren (hover)“.
Eine Stylesheet Angabe für einen Link setzt sich aus dem betroffenen HTML-Element, in diesem Fall „a“, gefolgt von einem Doppelpunkt und einer vordefinierten Angabe zusammen.
Verschiedene Linkeigenschaften
Der aufmerksame Leser wird bestimmt gleich entdeckt haben, dass in obigem Beispiel eine CSS-Class für den Beispiellink definiert wurde. Man kann per CSS die Linkeigenschaften für ganz bestimmte Links festlegen und in diesem Fall wurde das gemacht, um für das Beispiel nicht die Linkeigenschaften der kompletten Seite zu verändern. Tatsächlich hätte die Anweisung „a:link {color:#0000FF; size:14px;}“ usw. heißen müssen. Es gibt jedoch Situationen, in denen es nötig ist, für einzelne Links abweichende Eigenschaften zu definieren. Angenommen man hat die Linkfarbe „rot“ festgelegt und in einem Bereich mit braunem Hintergrund taucht ein Link auf, dann würde sich das Rot des Links kaum vom Hintergrund abheben. In einem solchen Fall kann man dann die Linkfarbe beispielsweise in „gelb“ ändern. Dazu vergibt man für die Sonderlinks einen Namen, unter dem sie angesprochen werden können – in unserem Fall ist das „beispiel“.
IE | Opera | Netscape | Firefox | ||||||
| 5 | 5.5 | 6 | 6 | 7 | 8 | 6 | 7+ | 0.8+ | |
| link | x | x | x | x | x | x | x | x | x |