HTMLCSSSuchen:WebdesignSonstigesPlanetHTML |
CSS: Links und LinkformatierungenEine der beliebtesten und am meisten genutzten Formatierungen innerhalb von CSS betrifft die Links. Vielen gefallen die Standardlinks in Blau und mit Unterstrich nicht so gut und bevorzugen individuelle Links in anderen Farben, mit Rahmen, mit Veränderungen bei Mauskontakt und mehr. All dies war zu den Anfangszeiten von HTML nur mit JavaScript möglich. Dank CSS geht es nun aber kinderleicht, wie dieses Tutorial zeigen wird. Untenstehend sind einige Beispiele für veränderte Links aus diesem und weiteren Tutorials von PlanetHTML: Beispiele (mit der Maus berühren um Effekte zu sehen)
Beispiel für einen Link mit Unter- und Überstreichung
Beispiel für einen Link mit anderen Farben Beispiel für einen Link mit Rahmen und Hintergrundfarben Beispiel für einen Link mit veränderten Textformatierungen Code
<html>
<body> <head> <style type="text/css"> <!-- a:link { color: #0000ff; text-decoration:none; }
a:active { color: #ff0000; text-decoration:none; }
a:visited { color: #0000ff; text-decoration:none; }
a:hover { color: #ff0000; text-decoration:none; }
//--></style> </head> <a href="http://www.PlanetHTML.de"> Dieser Link führt zu PlanetHTML.de </a> </body> </html> Das obere Beispiel zeigt, wie die Formatierung von Links funktioniert. Die entscheidende Rolle spielen dabei die vier Codezeilen,
die rot markiert sind. Diese bestimmen die normalen Linkeigenschaften ( Da in der Praxis oft die ersten drei Linkdefinitionen gleich formatiert werden, schreiben einige Webdesigner auch nur Im oberen Beispiel wurde lediglich die Farbe ( Einige typische Formatierungen für Links sind untenstehend aufgeführt. Ausführliche Informationen, wie man diese einsetzt, finden sich im jeweiligen Tutorial von PlanetHTML:
|