Veit Schiele

Veit Schiele

Globale Werte

Globale Anweisungen für Text, Boxen-Größe etc. vereinheitlichen das Erscheinungsbild, erleichtern aber auch das Debuggen des Layouts.

Angaben, die für nahezu jedes Element verwendet werden sollen, können häufig vom body-Element geerbt werden. So muss z.B. line-height nicht für jedes <p> oder <h*>-Element einzeln definiert werden:

body {
    line-height: 1.62em;
}

Solche Textanweisungen können leicht von nachfolgenden Elementen geerbt werden, z.B.:

body {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

Und zum Debuggen von CSS-Layouts eignen sich die folgenden globalen Werte:

* { background-color: rgba(255,0,0,.2) !important;}
* * { background-color: rgba(0,255,0,.2) !important;}
* * * { background-color: rgba(0,0,255,.2) !important;}
* * * * { background-color: rgba(255,0,255,.2) !important;}
* * * * * { background-color: rgba(0,255,255,.2) !important;}
* * * * * * { background-color: rgba(255,255,0,.2) !important;}
global-values.png

Unterschiedlich tief verschachtelte Elemente werden in unterschiedlichen Farben angezeigt, sodass ihr die Größe der einzelnen Elemente auf der Seite, deren Rand und Abstand sehen könnt.