XML-Know How

Die Maßeinheiten in CSS

CSS erlaubt viele unterschiedliche Maßeinheiten, um Container, Abbildungen, Schriften, etc. zu formatieren und zu gestalten.

Die wichtigsten sind:

  • Absolute Pixelwerte → Einheit »px«
  • Prozentwerte  → Einheit »%«
  • Geviert-Teile  → Einheit »em«

Info

Neben diesen Werten sind auch die metrischen Werte »cm«, »mm«, »pt« zulässig. Diese Einheiten sollten für elektronische Publikationen nicht verwendet werden, da die unterschiedlichen Bildschirme über verschiedene Auflösungen verfügen. Die Einheiten px, % und em nehmen darauf Rücksicht und werden – je nach Auflösung des Ausgabegeräts – unterschiedlich groß dargestellt. Die absoluten, metrischen Werte wie cm führen in aller Regel zu Fehldarstellungen am Bildschirm.

Einheit »em«

Besonders interessant ist die Einheit »em«. 1em entspricht 100% der Schriftgröße des übergeordneten Eltern-Elements – in der Print-Typographie entspricht das in etwa einem Geviert. Die Schriftgröße wird zusammen mit anderen Angaben von den Elternelementen an die Kindelemente weitervererbt, solange, bis eine neue, fixe Größe (in Pixeln) angegeben wird.

Legt man also die Grundschrift-Größe im CSS-Stylesheet einmalig für <html> oder <body> in Pixeln an, kann danach durchgängig die Maßeinheit em verwendet werden.

Der Vorteil dieser Maßeinheit besteht vor allem darin, dass bei gewünschten Änderungen der Schriftgröße für die Darstellung nur ein einziger Wert verändert werden muss und sich alle anderen Angaben – Zeilenabstände, Überschriftengrößen und -abstände, Sperrungen etc. auf diesen Wert beziehen und automatisch und typographisch korrekt mit verändern – während andere Werte, die fest in Pixel (px) kodiert wurden, z. B. die Breite einer Abbildung, nicht mit skaliert werden. So bleibt die grundsätzliche Seitengeometrie einer HTML-Seite erhalten, während die Schriftgrößen innerhalb der Seite veränderbar bleiben.

Beispiel:

<html>

<head>(…)</head>

<body style="font-size:10px;">

<p style="font-size:1em;">Text in 10px Größe</p>

<p style="font-size:1.5em;">Text in 15px Größe</p>

<div style="font-size:0.8em;">

<h2 style="font-size:3em;">Überschrift in 24px Größe </h2>

<p>Text in 8px Größe</p>

</div>

</body>

</html>

Codierung von Schriftgrößen über das style-Attribut (der Einsatz des style-Attributs als Träger der CSS-Information wird als Technologie nicht empfohlen und soll hier nur der Veranschaulichung dienen)

Beispiel:

body {

font-size: 10px;

}

h2 {

font-size: 2em;

/* 2 × 10px = 20px (bezieht sich auf body font-size) */

line-height: 1.5em;

/* 1.5 × 20px = 30px (bezieht sich auf font-size) */

margin-top: 2em;

/* 2 × 20px = 40px (bezieht sich auf font-size) */

}

Kommentare in CSS

Beispiel eines CSS-Stylesheets, bei dem die Grundschrift auf 10px festgelegt wurde (Selektor body) und sich alle anderen Maßangaben darauf beziehen.
Die Codierungen /* … */ umschließen Kommentare innerhalb von CSS.