http://jendryschik.de / archiv / einfuehrung / pseudoklassen.html

4. Styling von Webseiten

  Rahmen

Pseudoklassen und -elemente

Link-Pseudoklassen

Sicherlich kennen Sie diese schönen Effekte, wenn sie mit der Maus über einen Link fahren und dieser sich verändert, oder wenn das Betätigen des Links auch optisch dargestellt wird. Diese Effekte geben dem Besucher eine Seite das Gefühl, aktiv an der Seite teilzunehmen, er kann Elemente verändern und sieht das Klicken mit der Maus optisch umgesetzt.
Dies lässt sich mit CSS sehr einfach realisieren, jedoch gibt es wesentliche Dinge, auf die Sie achten sollten.

Wenn Sie sich bereits mit Usability und Accessibility beschäftigt haben, wissen Sie, dass Links intuitiv als solche erkennbar sein sollten. Umgekehrt sollte es vermieden werden, dass gewöhnlicher Fließtext für einen Link gehalten wird.
Daher gilt ganz einfache Regeln: Links sind unterstrichen dargestellt, Fließtext dagegen nicht. Womöglich ist es Ihnen auch schon einmal passiert, dass sie mit der Maus auf ein unterstrichenes Wort gefahren sind und versucht haben, es anzuklicken; dabei diente es nur der Betonung des Textes. Das ist sehr unglücklich. Oder sie wussten auf einer Seite nicht, wo es weitergeht, weil Sie keine Links ausmachen konnten.

Es gibt vier Link-Pseudoklassen, die optisch aufeinander aufbauen sollten. Es ist wichtig, die Klassen im Stylesheet in genau dieser Reihenfolge anzugeben, da es sonst zu Missinterpretationen kommen kann.

a:link

definiert das Aussehen gewöhnlicher Links.
Der Anwender ist gewöhnt, Links in blauer Farbe und unterstrichen vorzufinden.

a:visited

definiert das Aussehen bereits besuchter Links.
Diese sollten sich nicht wesentlich, am besten nur in der Farbe von nicht besuchten Links unterscheiden. Es empfiehlt sich, eine hellere, nicht so ganz auffällige Farbe zu wählen. Allerdings sollte der Link weiterhin als solcher zu erkennen sein.

a:hover

definiert das Aussehen von Links, auf denen der Mauscursor ruht.
Hier sollten Sie einen auffälligen Effekt einbauen. Vielleicht ein Farbwechsel zu einer Komplementärfarbe oder einen dezenten Hintergrund.

a:active

definiert das Aussehen von aktiven, soeben geklickten Links.
Dem Anwender sollte auch optisch dargestellt werden, dass er aktiv an der Seite teilnimmt, indem er den Hyperlink betätigt. Dies können Sie darstellen, indem sie einen Hintergrund einsetzen, die Hintergrundfarbe ändern oder gar einen Button-Klick simulieren.

CSS-Defitionen für A:hover könnten dann zum Beispiel so aussehen:

a:hover {
   color           : rgb(255,148,0);
   background      : transparent;
   text-decoration : underline;
}

Wenn Sie zwei inhaltlich unterschiedliche Linkarten auf einer Seite haben (beispielsweise zum einen die Hyperlinks in der Navigationsleiste, zum anderen die Hyperlinks im Fließtext), dann können Sie diese auch optisch variieren, zum Beispiel in der Farbe. In diesem Fall definieren Sie:

a:link { color: #00b; background: transparent }
a:visited { color: #666; background: transparent }
a:hover { color: #00b; background: none #ccccff }
a:active { color: #000000; background: none #ffcc66 }

a.navigation:link { color: #309; background: transparent }
a.navigation:visited { color: #666; background: transparent }
a.navigation:hover { color: rgb(255,148,0); background: transparent }
a.navigation:active { color: rgb (255,148,0); background: #ffa; }

Die alternativen Angaben für die Navigation werden dann wie folgt eingebunden:

<a href="index.html" class="navigation">Startseite</a>

Es ist jedoch günstiger und strukturell schöner, die Linkklassen für das übergeordnete Element festzulegen, welches die Links enthält. Für eine Navigationsleiste könnte das zum Beispiel so aussehen:

<div class="navigation">
    hier sind die Links:
    <a href="index.html">Startseite</a>
    <a href="copy.html">Copyright</a>
</div>

In den Abschnitten Schriftformatierung, Textformatierung und Farben und Hintergründe finden Sie Informationen darüber, wie Sie ihre Links gestalten können.

Pseudoelemente

In CSS 2.0 sind einige neue Pseudoelemente definiert, die allerdings erst von den aktuellsten Browsern unterstützt werden.

Das :first-line Pseudoelement

Dieses Pseudoelement erlaubt spezielle Styles für die erste Zeile eines Absatzes. Zum Beispiel:
p.uppercase:first-line { text-transform: uppercase }
Diese Angabe sorgt dafür, dass die erste Zeile eines Absatzes der Klasse "uppercase" in Großbuchstaben dargestellt wird.

Das :first-letter Pseudoelement

Dieses Pseudoelement formatiert den ersten Buchstaben eines Absatzes. Damit lassen sich sehr schöne, typografische Effekte erzielen. Folgendes (vereinfachtes) Beispiel macht die Anwendung deutlich:

Deklarieren Sie im head:

<style type="text/css">
   p:first-letter {
      font-size: 200%;
      font-style: italic;
      font-weight: bold;
      float: right;
   }
   span {
      text-transform: uppercase
   }
   </style>

Und im body:

<p><span>Hier ein Beispiel</span> für den Einsatz
  des :first-letter Pseudoelements.</p>

In neuen Browsern sieht das Ergebnis dann so aus wie auf dem folgenden Bild zu sehen:

Wenn Sie nicht möchten, dass alle Elemente p einer Seite so gestaltet werden, vergeben Sie einfach Klassen. Deklarieren Sie also z. B. für die Klasse p.einleitung:first-letter.

  Weitere Informationen über CSS