Steuerung mit Feedback auf Benutzer

Das Aussehen von Links kann beeinflusst werden. Dazu gibt es 5 verschiedene Zustände von Links:

Link, ...

auf eine noch nicht besuchten Seiten
auf eine besuchten Seiten
der gerade den Fokus hat
über den mit der Maus gefahren wird
der aktiv ist.

Diese in CSS existierenden Klassen nennen sich Pseudoklassen. In alten Browser funktionierten diese nicht alle. Auch heute ist noch wichtig, bei der Definition die exakte Reihenfolge einzuhalten. Erst kommt link, dann visited, focus, hover und dann active.

Die Steuerung nehmen wir aus der letzten Seite und ergänzen diese mit dem Bereich für die Pseudoklassen. Dabei wollen wir folgende Reaktionen erreichen (es geht hier nicht um Design sondern um das Lernen von CSS und die Zusammenhänge).

Art des Links -> gewünschte Reaktion

noch nicht besuchten Seiten - Text blau, keine Unterstreichung
auf eine besuchten Seiten - Text schwarz, durchstrichen
der gerade den Fokus hat - Textfarbe Grün, blinkt
über den mit der Maus gefahren wird - Textfarbe Rot, überstrichen
der aktiv ist - Textfarbe orange, unterstrichen

HTML-Datei mit Steuerung als letztem Beispiel

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
 <link rel="stylesheet" type="text/css"
 media="screen" href="design.css" />

</head>

<body>
<div id="navi">
  <ul>
    <li><a href="index.htm">Startseite</a></li>

    <li><a href="ueber-mich.htm">Über mich</a></li>
    <li><a href="termine.htm">Termine</a></li>
    <li><a href="impressum.htm">Impressum</a></li>

  </ul>
</div>
</body>
</html>

Und die erweiterte externe CSS-Datei (mit dem Dateinamen design.css)

#navi {
   text-align:left;               /* Textausrichtung     */
   margin-top:10px;               /* Außenabstand oben   */
   margin-bottom:10px;            /* Außenabstand unten  */
   margin-left:20px;              /* Außenabstand links  */
   margin-right:15px;             /* Außenabstand rechts */
 }

 #navi ul {
   list-style:none;               /* keine Aufzählungspunkte */
 }

 #navi li {
   float:left;                     /* Anordnung links   */
   margin-left:15px;               /* Außenabstand oben */
   width:90px;                     /* Breite des Links  */

   background-color:silver;        /* Hintergrundfarbe  */
   border-top:1px black solid;     /* Rahmenfarbe Auflistungpunkt oben */
   border-left:25px orange solid;  /* Rahmenfarbe Auflistungpunkt oben */
   border-bottom:1px red solid;    /* Rahmenfarbe unten  */
   border-right:2px blue solid;    /* Rahmenfarbe unten  */
   margin-top:10px;                /* Außenabstand oben  */
   padding-top:8px;                /* Innenabstand oben  */
   padding-bottom:8px;             /* Innenabstand unten */
   padding-left:8px;               /* Innenabstand unten */
   padding-right:8px;              /* Innenabstand unten */
 }

#navi a:link    { color:blue;   text-decoration:none; }
#navi a:visited { color:black;  text-decoration:line-through; }
#navi a:focus   { color:green;  text-decoration:overline; }
#navi a:hover   { color:red;    text-decoration:overline; }
#navi a:active  { color:orange; text-decoration:underline; }

Ergebnis der Pseudoklassen

Probieren und nun mit den Möglichkeiten von CSS herum spielen, damit die Steuerung auch nach was aussieht!

Den Zustand von focus erreicht man, wenn man über die TAB-Taste (öfters drücken) zu einem Link wandert. Dieser kann dann mit der Return-Taste gewählt werden (wie bei einem Mausklick).

vorheriges Kapitel: Steuerung per CSS

nächstes Kapitel: Block- u. Inline-Elemente