Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt
Sie befinden sich: Startseite » CSS lernen – Webdesign erstellen » Steuerung per CSS » Steuerung mit Feedback

Steuerung mit Feedback auf Benutzer

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

Link, ...

  1. auf eine noch nicht besuchte Seite
  2. auf eine besuchte Seite
  3. der gerade den Fokus hat
  4. über den mit der Maus gefahren wird
  5. 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

Weiterempfehlen • Social Bookmarks • Vielen Dank

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Vielen Dank für Ihre Hilfe

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details