Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

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 besuchte Seite
  • auf eine besuchte Seite
  • 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 - Textfarbe Blau, keine Unterstreichung
  • auf eine besuchten Seiten - Textfarbe 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 letztes Beispiel

<!DOCTYPE html>
<html lang="de">
<head>
 <link href="design.css" rel="stylesheet" media="screen">

</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:0px;               /* 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:10px;               /* Außenabstand links */
   width:120px;                    /* Breite des Links  */

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

#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 herumspielen, 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).

Steuerung horizontal
Steuerung horizontal