Kaskadierung und Vererbung

Kaskadierung von Formaten

Wenn es für ein Element mehrere Regeln für ein Attribut (z. B. color) gibt, dann gilt folgende Rangfolge

• kontextabhängig individuell (p#id)
• vor individuell (#id)
• vor kontextabhängiger Klasse (p.achtung)
• vor allgemeiner Klasse (.warnung)
• vor redefiniertem Standard Format (p)
• Innerhalb einer Ebene hat !important Vorrang
• Reihenfolge in der Datei ist das letzte Kriterium
• inline vor embedded vor externem Stylesheet

Beispiel: Kaskadierung

p#hervorhebung  { color: white; }
p               { color: olive; }
.achtung        { color: green; }
p.achtung       { color: orange; }
p#hervorhebung  { color: red; }
#hervorhebung   { color: grey; }

<p id="hervorhebung" class="achtung">Dies soll hervorgehoben werden.</p>
<p id="auch" class="achtung">Und das hier auch.</p>
<p id="noch" class="achtung" style="color: green;">Und hier.</p>

Vererbung von Formaten

Wenn es für ein Element kein direktes Format gibt, wird das Format des übergeordneten Elements übernommen (Vererbung von Formaten)

• Vererbung folgt dem Dokumenten-Baum
• Manche Attribute werden nicht vererbt (z. B. `text-decoration)

Vererbung von Eigenschaften

Bereich	Eigenschaft	vererbt?
Hintergrund	background-attachment, -color, -image, nein -position, -repeat	nein
Text	color	ja
	font-family, -size, -style, -variant, -weight	ja
	letter-spacing	ja
	line-height	ja
	text-align, -indent, -transform	ja
	text-decoration	nein
	word-spacing	ja

Bereich	Eigenschaft	vererbt?
Rahmen	border-collapse, -spacing	ja
	border-color, -style, -width	nein
Listen	liste-style-image, -position, -type	ja
Positionierung	position, bottom, left, top, right	nein
	float, clear	nein
	z-index	nein

Bereich	Eigenschaft	vererbt?
Weitere Elemente	display	nein
	height, width	nein
	margin (betrifft alle Richtungen)	nein
	max-height, -width	nein
	min-height, -width	nein
	padding (betrifft alle Richtungen)	nein
	visibility	ja
Pseudoelement	content	nein
Tabellen	caption-side	ja

Beispiel: Vererbung

body { font-family: monospace; }
div { font-family: sans-serif; font-size: 90%;}
div ul { color: olive; text-decoration: none; }

<p>Ein Absatz mit etwas Text. Darin eine <em>Hervorhebung</em>.</p>
<div>Hier ein Abschnitt
<h1>Mit Überschrift</h1>
<ul>
  <li>Eins <em>Hervorhebung</em></li>
  <li>Zwei <em>Hervorhebung</em></li>
</ul></div>