Textformatierung & Selektoren in CSS

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]:

• Generische Familien: serif, sans-serif, monospace, cursive, fantasy[cite: 13].
• Schriftnamen mit Leerzeichen müssen in Anführungszeichen gesetzt werden[cite: 13].

p {
  font-family: "Duru Sans", Verdana, sans-serif;
}

• font-size: Steuerung der Textgröße mittels Einheiten (z. B. rem, em, px) oder Schlüsselwörtern[cite: 13].
• font-weight: Schriftstärke (z. B. normal, bold oder Werte von 100 bis 900)[cite: 13].
• font-style: Schriftschrägung (normal, italic, oblique)[cite: 13].
• font-variant: Z. B. small-caps für echte Kapitälchen[cite: 13].
• font-stretch: Stauchung oder Dehnung der Schriftart (z. B. 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;
}

• line-height: Mindestabstand von Grundlinie zu Grundlinie (Baseline)[cite: 13].
• text-indent: Einrücken der ersten Textzeile (z. B. 2em, 25%, -35px)[cite: 13].
• letter-spacing / word-spacing: Zeichen- und Wortabstände anpassen[cite: 13].

• text-align: Horizontale Ausrichtung (left, right, center, justify, start, end)[cite: 13].
• text-decoration: Textverzierungen (none, underline, overline, line-through, blink)[cite: 13].
• text-transform: Groß-/Kleinschreibung anpassen (capitalize, lowercase, uppercase, none)[cite: 13].
• text-shadow: Textschatten definieren (Format: 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]:

• list-style-type: Typ des Aufzählungszeichens (z. B. disc, circle, square, decimal, lower-roman, lower-greek)[cite: 13].
• list-style-position: Position der Markierung relativ zum Textfeld (outside [Standard] oder inside)[cite: 13].
• list-style-image: Verwenden einer eigenen Grafik als Aufzählungszeichen (z. B. url('/images/bullet.png'))[cite: 13].

Neben einfachen Element-Selektoren bietet CSS erweiterte Typen zur gezielten Ansprache[cite: 13]:

• Nachkommenselektor (Descendant): Spricht Elemente an, die sich innerhalb eines bestimmten Eltern-Elements befinden (getrennt durch Leerzeichen)[cite: 13].

ol a { font-weight: bold; } /* Nur Links innerhalb nummerierter Listen */

• ID-Selektor: Spricht ein spezifisches Element über dessen eindeutige id an (gekennzeichnet durch #)[cite: 13].

#primary { color: olive; }

• Klassenselektor: Spricht Elemente mit einem bestimmten class-Attribut an (gekennzeichnet durch .)[cite: 13].

.hilight { background-color: yellow; }

• Universalselektor: Spricht jedes beliebige Element an (gekennzeichnet durch *)[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]:

<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].