Diese Dokumentation behandelt die CSS-Eigenschaften zur Textgestaltung, Zeilen- und Listensteuerung sowie erweiterte Selektortypen und die Spezifitätsberechnung basierend auf den Schulungsunterlagen[cite: 13].
Da Schriftarten auf dem Gerät des Benutzers vorhanden sein müssen, werden Schriftfamilien als Ausweichkette (Fallback-Liste) angegeben[cite: 13].
Der Browser verwendet die erste verfügbare Schriftart der Liste[cite: 13]. Am Ende sollte immer eine generische Schriftfamilie stehen[cite: 13]:
serif, sans-serif, monospace, cursive, fantasy[cite: 13].p { font-family: "Duru Sans", Verdana, sans-serif; }
rem, em, px) oder Schlüsselwörtern[cite: 13].normal, bold oder Werte von 100 bis 900)[cite: 13].normal, italic, oblique)[cite: 13].small-caps für echte Kapitälchen[cite: 13].condensed, expanded)[cite: 13].
Kombiniert mehrere Schrifteigenschaften in einer Zeile. Mindestens font-size und font-family müssen angegeben werden[cite: 13]:
/* Format: font: style weight stretch variant size/line-height font-family */ h3 { font: oblique bold small-caps 1.5em Verdana, sans-serif; }
2em, 25%, -35px)[cite: 13].left, right, center, justify, start, end)[cite: 13].none, underline, overline, line-through, blink)[cite: 13].capitalize, lowercase, uppercase, none)[cite: 13].Offset-X Offset-Y Unschärfe Farbe)[cite: 13].h1 { text-shadow: 0.2em 0.2em 0.1em silver; }
Zur Gestaltung von Listen dienen drei zentrale Eigenschaften[cite: 13]:
disc, circle, square, decimal, lower-roman, lower-greek)[cite: 13].outside [Standard] oder inside)[cite: 13].url('/images/bullet.png'))[cite: 13].Neben einfachen Element-Selektoren bietet CSS erweiterte Typen zur gezielten Ansprache[cite: 13]:
ol a { font-weight: bold; } /* Nur Links innerhalb nummerierter Listen */
id an (gekennzeichnet durch #)[cite: 13].#primary { color: olive; }
class-Attribut an (gekennzeichnet durch .)[cite: 13]..hilight { background-color: yellow; }
*)[cite: 13].* { border: 1px solid gray; }
Die Spezifität bestimmt, welcher Selektor bei Konflikten Vorrang hat[cite: 13]. Sie wird über ein Drei-Klassen-System berechnet[cite: 13]:
| Rang / Position | Selektortyp |
|---|---|
| Feld 1 (Höchste Priorität) | Anzahl der ID-Selektoren[cite: 13] |
| Feld 2 (Mittlere Priorität) | Anzahl der Klassen- und Pseudoklassenselektoren[cite: 13] |
| Feld 3 (Niedrigste Priorität) | Anzahl der Element-Selektoren[cite: 13] |
<note important>
Inline-Stile über das style-Attribut haben grundsätzlich eine höhere Spezifität als alle Selektoren im Stylesheet[cite: 13].
</note>
h1 $ \rightarrow $ [0] [0] [1] (1 Element)[cite: 13]blockquote p $ \rightarrow $ [0] [0] [2] (2 Elemente)[cite: 13]h1.special $ \rightarrow $ [0] [1] [1] (1 Klasse, 1 Element)[cite: 13]Das erste Feld von links, bei dem kein Unentschieden herrscht, entscheidet[cite: 13]. Ein einzelner Klassenselektor [0][1][1] schlägt somit beliebig viele reine Elementselektoren wie [0][0][2][cite: 13].