Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Inhaltsbereich

6.6 Werte und Maße in CSS: die Qual der Wahl

CSS kennt jede Menge verschiedene Maßeinheiten. Diese Wahl kann besonders anfangs leicht zur Qual werden, weshalb ich Ihnen auf den folgenden Seiten ein paar Entscheidungshilfen geben möchte.

Grundregeln: die Leerstelle, die Null und der Anführungsstrich

Einige grundlegende Regeln vorweg:

  • Bei CSS steht zwischen dem Wert und einer Maßeinheit keine Leerstelle: Es heißt 130% und nicht 130 %, 12px und nicht 12 px. Das ist anfangs wohl der häufigste Fehler.
  • Wenn ein Wert 0 (null) ist, muss danach keine Einheit folgen. Null ist null, egal ob Pixel oder Kilometer, und die Angaben 0px und 0 sind in CSS identisch.
  • Werte werden im Gegensatz zu HTML nicht in Anführungsstriche gesetzt. Es heißt also color: black und nicht color: "black"

Eine Ausnahme der letzten Regel sind Schriftnamen, die aus mehreren Worten bestehen, wie z. B. Times New Roman, die in einfachen oder doppelten Anführungsstrichen stehen sollten:

body { font-family: "Times New Roman", Times, serif; }

Für den Bildschirm: relative Einheiten

Relative Einheiten eignen sich vorzüglich für die Darstellung von Webseiten am Bildschirm: Pixel (px), Emms (em) und Prozent (%).

Die Einheit px (Pixel)

Ein Pixel ist ein Bildpunkt und relativ zur Bildschirmauflösung: Bei 800 x 600 gibt es 480 000 Pixel auf dem Monitor, bei 1024 x 768 sind es bereits 768 432. Da sich der Monitor nicht vergrößern kann, werden bei einer höheren Auflösung die Pixel kleiner. Die Größe eines Pixels ist also relativ zu der verwendeten Bildschirmauflösung.

Trotzdem ist die Einheit Pixel relativ leicht zu verstehen und zu berechnen. Für Schriftgrößen sollte px aber momentan nicht verwendet werden, weil erstens die Pixel bei hohen Auflösungen immer  kleiner werden und zweitens Surfer im Internet Explorer bis inklusive V6 die Schriftgröße dann nicht mehr zoomen können.

Die Einheit em (»emm« gesprochen)

em ist relativ zur Schriftgröße, die ein Benutzer eingestellt hat. Es bezieht sich auf die Größe des Buchstabens M und wird wirklich »emm« ausgesprochen.

Die Einheit em ist sehr flexibel und ändert sich, wenn der Benutzer die Schriftgröße im Browser verändert. Abstände mit em zu gestalten ist sehr flexibel, anfangs aber ein bisschen schwer zu fassen, wie ein Stück Seife in der Badewanne.

em und em

Die in CSS verfügbare Einheit em hat außer den Buchstaben e und m nichts, aber auch gar nichts mit dem HTML-Element em zur Hervorhebung von Text zu tun.

Die Einheit % (Prozent)

Die Einheit Prozent ist definitiv relativ, und zwar zu verschiedenen Dingen, und so ist bei Prozent immer sofort die erste Frage: »Prozent von was?« Bei CSS ist die Bezugsgröße meist die umgebende Kiste, auch Eltern-Element genannt. Die Deklaration width: 50% bedeutet also die Hälfte der Breite des Eltern-Elements.

Falls irgendwas bei der Angabe von Prozenten überhaupt nicht klappt, schauen Sie am besten in einer CSS-Referenz wie CSS4You.de oder TheStyleWorks.de nach, worauf genau sich die Prozentangabe bei der verwendeten CSS-Eigenschaft bezieht.

Für den Drucker: absolute Einheiten

Absolute Einheiten sind für Bildschirm-Stylesheets ungeeignet und in erster Linie für Stylesheets zum Ausdrucken der Webseite gedacht:

  • cm ist ein Zentimeter.
  • in steht für Inch, der auf Deutsch Zoll heißt und 2,54 cm lang ist.
  • pt (kurz für Punkt) ist die traditionelle Einheit zur Angabe einer Schriftgröße im Printbereich und entspricht in CSS 1/72 Inch.

Wie gesagt: Für den Ausdruck okay, für den Bildschirm ungeeignet.