Unterschiedliche Linkfarben für bestimmte Teile einer Seite
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Problem
Navigation und Haupttext sollen unterschiedliche Stildefinitionen für Links erhalten.
Lösung
Umgeben Sie hierfür die unterschiedlichen Bereiche der Seite mit div-Tags, die je nach Funktion unterschiedliche Werte für das id-Attribut erhalten:
<div id="nav">
[...]
</div> <!-- end -->
<div id="content">
[...]
</div> <!-- end -->Verwenden Sie Kontext-Selektoren zusammen mit dem ID-Selektor und der LoVe/HAte-Methode aus dem Rezept Linkfarben anpassen, um unterschiedliche Linkstile für die Seitenbereiche zu definieren:
/* Stildefinitionen für Navigationslinks */
#nav a:link {
color: blue;
}
#nav a:visited {
color: purple;
}
/* Stildefinitionen für den Haupttext */
#content a:link {
color: white;
}
#content a:visited {
color: yellow;
}Diskussion
Mit Hilfe von ID-Selektoren ist es möglich, einzelne Teile einer Webseite zu unterscheiden und mit eigenen Stilen zu versehen, auch wenn diese sich auf die gleichen HTML-Elemente beziehen. Die Verwendung der LoVe/HAte-Methode stellt sicher, dass Ihre Links erwartungsgemäß funktionieren.
Siehe auch
Das Rezept ID-Selektoren.
| << zurück | vor >> |
Diskussion
Mit Hilfe von ID-Selektoren ist es möglich, einzelne Teile einer Webseite zu unterscheiden und mit eigenen Stilen zu versehen, auch wenn diese sich auf die gleichen HTMLElemente beziehen. Die Verwendung der LoVe/HAte-Methode stellt sicher, dass Ihre Links erwartungsgemäß funktionieren.
Siehe auch
Rezept "Verschiedene Selektoren für die Zuweisung von Stilen" zum ID-Selektor; die Anleitung der W3Schools zu den CSS-Pseudoklassen unter http://www.w3schools.com/css/css_pseudo_classes.asp
; die »Backstage«-Anleitung zur Verwendung mehrerer Linkfarben unter www.metalusions.com/backstage/articles/2/.
| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln