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).
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 :).
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.deE-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.
Mehr Details
-
