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

===== 1. Typografie & Schrifteigenschaften =====

Da Schriftarten auf dem Gerät des Benutzers vorhanden sein müssen, werden Schriftfamilien als Ausweichkette (Fallback-Liste) angegeben[cite: 13].

==== Schriftarten (font-family) ====
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].

<code css>
p {
  font-family: "Duru Sans", Verdana, sans-serif;
}
</code>

==== Weitere Schrifteigenschaften ====
  * **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].

==== Kurzschreibweise (font) ====
Kombiniert mehrere Schrifteigenschaften in einer Zeile. Mindestens ''font-size'' und ''font-family'' müssen angegeben werden[cite: 13]:

<code css>
/* Format: font: style weight stretch variant size/line-height font-family */
h3 {
  font: oblique bold small-caps 1.5em Verdana, sans-serif;
}
</code>

===== 2. Textzeilen & Ausrichtung =====

==== Zeilen- & Textabstände ====
  * **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].

==== Textausrichtung & Dekoration ====
  * **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].

<code css>
h1 {
  text-shadow: 0.2em 0.2em 0.1em silver;
}
</code>

===== 3. Listenstilisierung =====

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

===== 4. Erweitere Selektoren =====

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].
<code css>
ol a { font-weight: bold; } /* Nur Links innerhalb nummerierter Listen */
</code>
  * **ID-Selektor:** Spricht ein spezifisches Element über dessen eindeutige ''id'' an (gekennzeichnet durch ''#'')[cite: 13].
<code css>
#primary { color: olive; }
</code>
  * **Klassenselektor:** Spricht Elemente mit einem bestimmten ''class''-Attribut an (gekennzeichnet durch ''.'')[cite: 13].
<code css>
.hilight { background-color: yellow; }
</code>
  * **Universalselektor:** Spricht jedes beliebige Element an (gekennzeichnet durch ''*'')[cite: 13].
<code css>
* { border: 1px solid gray; }
</code>

===== 5. Berechnung der Spezifität =====

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>

==== Beispiel-Vergleich ====
  * **''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].