Webdesign - Webseiten planen, gestalten - Free-Hack Library

82
Selektor A B C D
style="…" (HTML) 1 0 0 0
#nav a.xy 0 1 1 1
#nav li a 0 1 0 2
#nav a 0 1 0 1
#nav 0 1 0 0
ul li .xy 0 0 1 2
a:link 0 0 1 1
a.xy 0 0 1 1
ul[id="nav"] 0 0 1 1
*.xy 0 0 1 0
li a 0 0 0 2
a:first-line 0 0 0 2
a 0 0 0 1
A enthält den Wert 1, wenn CSS-Deklarationen
dem Element direkt per style-Attribut zugewiesen
wurden.
B entspricht der Anzahl der selektierten ID-
Attribute.
C entspricht der Anzahl der selektierten anderen
Attribute (z.B. Klassen und Pseudoklassen).
D entspricht der Anzahl der selektierten Elementnamen
und Pseudoelemente.
Die Spezifität kann aus den Spalten A, B, C, D
abgelesen werden, z. B. 101 für #nav a.
Quelle:
http://de.selfhtml.org/
CSS
Welche Regeln sich in den Autoren-Stylesheets überschreiben,
hängt von deren Spezifität ab. Der Wert für die Spezifität berechnet
sich wie folgt:
Handelt es sich um eine style-Anweisung im Tag, dann ist der Wert
für die Spezifität immer 1000. Ansonsten multipliziert man die
Anzahl der ID-Attribute in dem Selektor mit 100, addiert diesen Wert
mit 10-mal der Anzahl der anderen Attribute und Pseudoklassen
und addiert das Ganze dann zu der Anzahl der Pseudoelemente
und Elementnamen.
Je höher der berechnete Wert, desto wichtiger die Anweisung.
Übungsexkurs zum Vererbungsprinzip:
Erweitern Sie die und -Container in Ihrem HTML-
Quelltext um folgende Angaben:
• Äußerer -Container: class="dreispaltig"
• Erster innerer - bzw. -Container:
class="spalte1"
• Zweiter innerer - bzw. -Container:
class="spalte2"
• Dritter innerer - bzw. -Container:
class="spalte3"
Erzeugen Sie im Header ein -Element, das auf ein externes
Stylesheet im selben Verzeichnis wie die (X)HTML-Dateien
verweist.
Das Stylesheet soll folgende Zeilen enthalten:
.dreispaltig {
padding: 2px;
margin: 2px;
border: 1px solid black;
}
Schauen Sie sich im Browser an, wie dieses Stylesheet Ihre Webseite
verändert.
Ergänzen Sie nun Ihr Stylesheet um folgende Zeilen und sehen
sich die Auswirkungen auf Ihre Webseite an:
.spalte1, .spalte2, .spalte3 {
padding: inherit;
margin: inherit;
border: inherit;
}
Sehen Sie, wie die Rahmen- und Abstandseigenschaften für alle
Container übernommen werden.