Weitere Infos
Sie lesen:
LB1 (2009)
Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.
Aktuelle Infos finden Sie hier:
9.2 Punktsieg: Spezifität in der Praxis
Im Kapitel über Selektoren haben Sie bereits etwas über Spezifität gelesen. Bei der Gestaltung der Navigationsliste ist dieses Punktesystem in voller Aktion.
margin-bottom für ul
Schauen Sie sich zum Beispiel die Regeln für ul an:
- ul { margin: 0 0 1em 0; } ist ein einfacher Selektor und bekommt 1 Punkt.
- #navibereich ul { margin: 0; } ist eine ID plus einfacher Selektor, macht zusammen 101 Punkte.
Mit 101 zu 1 ist #navibereich ul also klarer Punktsieger, und die ungeordnete Liste im Navigationsbereich bekommt keinen margin-bottom.
Die Farbe der Hyperlinks
Bei der Farbe für die Hyperlinks sieht es ähnlich aus:
- a:link und a:visited bekommen jeweils 11 Punkte: 1 für a und 10 für die Pseudoklasse :link bzw. :visited.
- Die Deklarationen für #navibereich a haben 101 Punkte und gewinnen.
Die Hyperlinks im Navigationsbereich bekommen also die Schriftfarbe Schwarz.
Feineinstellungen für die Hyperlinks
Wenn Sie mit der Maus über einen Link in der Navigation fahren, werden Sie sehen, dass für den Hover-Effekt immer noch die für a:hover definierte rote Unterstreichung per border-bottom gilt. Diesem Effekt fügen Sie jetzt noch einen roten Hintergrund und weiße Schrift hinzu. Außerdem wird im folgenden ToDo noch ein Style für a:active im Navibereich definiert.
ToDo: Feineinstellungen für die Hyperlinks in der Navigation
- Fügen Sie unterhalb des Styles für #navibereich a folgende Regel hinzu:
#navibereich a:hover,
#navibereich a:focus {
color: white;
background-color: #d90000;
}
#navibereich a:active {
color: black;
background-color: white;
border-bottom-color: white;
} - Speichern Sie das Stylesheet und betrachten Sie die Webseiten im Browser.
Auch diese Einstellungen gelten allesamt aufgrund einer höheren Spezifität gegenüber den Einstellungen für einfache Selektoren in Teil 1 des Stylesheets.