CSS bietet zahlreiche Möglichkeiten Inhalte zu animieren und dynamisch auf Interaktionen mit dem Benutzer zu reagieren. Diese Animationsmöglichkeiten durchzugehen, würde den Rahmen dieses Einführungskurses bei Weitem sprengen und vermutlich ein eigenes Tutorial benötigen.
Auf die grundlegenden Propertys, die nötig sind, Elemente dazu bringen, auf Verhalten des Benutzers zu reagieren, werden wir trotzdem kurz eingehen, um Ihnen einen Überblick zu verschaffen.
Um das Design eines bestimmten Elementes beim Eintreten eines Ereignisses dynamisch zu verändern, werden sogenannte Pseudo-Klassen verwendet. Deren Aufbau sieht wie folgt aus:
[Selektor]:[Aktion]{
[Style-Code]
}
Eine der häufigsten Anwendungen von Pseudo-Klassen ist das hover-Event. Dieses wird ausgelöst, wenn der Benutzer mit dem Mauszeiger über das Element fährt. Als optischer Effekt bietet es sich an zum Beispiel die Schriftgröße oder die Farbe zu verändern. Hierzu erstellen wir zuerst einen Selektor für das Element und dann einen zweiten Selektor in Kombination mit dem Event (in diesem Fall hover):
<!DOCTYPE html>
<html>
<head>
<title> Mein Seitentitel </title>
<style>
H1 {
Color: black;
Font-size: 36px;
}
H1:hover{
Color: red;
Font-size: 42px;
}
</style>
</head>
<body>
<h1>Hallo Welt!</h1>
</body>
</html>
Fährt der Benutzer nun mit der Maus über den Text im <h1>–Tag, wird dieser größer und färbt sich rot.
Eine andere nützliche Anwendung ist das gestalten von Links. Die meisten Browser zeigen bereits besuchte Links standardmäßig in einer anderen Farbe an. Diese Farbe kann von uns überschrieben werden, um besser zum Design zu passen.
A:link{
Color: black;
}
A:visisted{
Color: black;
}
Die Pseudo-Klasse link spricht alle noch nicht besuchten Links an. Die Pseudoklasse visited spricht alle bereits besuchten Links an. Mit dem obenstehenden Code erreichen wir, dass beide dieselbe Farbe haben und das Design schön einheitlich bleibt.
Das waren nur einige wenige Beispiele für die Anwendung von Pseudo-Klassen. Eine brauchbare Übersicht über alle verfügbaren Pseudo-Klassen und deren Verwendung finden wir im Netz, zum Beispiel hier: http://www.w3schools.com/css/css_pseudo_classes.asp