CSS: Maße und Einheiten

In CSS gibt es die verschiedensten Arten von Maßen und Einheiten. Zusätzlich zu den in Level 1 beschriebenen kommen in Level 2 nun auch weitere hinzu. Darunter z.B. Angaben zu Winkeln oder Zeitabständen.

Längen

Bei der Angabe von Längen oder Breiten sollte, wie bei fast allen anderen Angaben, möglichst eine Einheit mitgeführt werden. Dazu stehen in CSS folgende zur Verfügung:

Beispiel:

P.a { font-size: 2in; }
P.b { font-size: 5cm; }
P.c { font-size: 150mm; }
P.d { font-size: 14pt; }
P.e { font-size: 2pc; }
P.f { font-size: 3em; }
P.g { font-size: 3.2ex; }
P.h { font-size: 16px; }

Hinweis: Bitte beachten Sie, dass Kommazahlen (wie z.B. 2,5 oder 123,456) nicht mit einem Komma (,) sondern mit einem Punkt (.) getrennt werden (statt 2,5 also 2.5 und statt 123,456 also 123.456).

Prozentangaben

Prozentangaben werden wie normale Angaben notiert. Einziger Unterschied ist logischerweise das zu setzende Prozentzeichen (%). Beispiel:

DIV { width:100%; height: 55%;} 

Absolute Schriftgrößen

Absolute Schriftgrößen bezeichnen die Größe der Schrift gemessen an der Normalgröße der Schrift, wie sie ohne weitere Definitionen wäre. Folgende stehen zur Auswahl:

Beispiel:

P { font-size: x-large; }
EM { font-size: medium; } 

Laut CSS Level 1 ist die Schrift (bei der Ausgabe auf einem Bildschirm) um jeweils 1.5 zur vorherigen Größe zu vergrößern bzw. zu verkleinern (d.h. xx-small = x-small/1.5, small = 1.5*medium usw.). Somit wären xx-small und xx-large 3.375 mal kleiner bzw. größer als medium. In CSS Level 2 wird dies jedoch umgeschrieben auf den Wert 1.2. Dieser ist bei der obigen Tabelle verwendet worden. Diese Werte sind vergleichbar mit den Werten 1 bis 7 bzw. -1 bis +6 des size-Attributes des font-Elements in HTML.

Relative Schriftgrößen

Relative Schriftgrößen werden relativ zur Größe der Schriftart und der Schriftgröße Elternelements betrachtet. Die folgenden Werte sind gültig:

Beispiel:

EM { font-size: larger; }
B { font-size: smaller; } 

Erklärung: Wird beispielsweise ein Element A mit larger definiert und befindet sich in einem Element P welches mit einer Schriftgröße von 10pt definiert wurde, so wird das Element A 1.2 mal größer als P, also mit einer Schriftgröße von 12pt, dargestellt werden.
Wäre dieses Element A nun wiederum in einem Element B enthalten, welches ebenso mit larger definiert wurde, so würde das Element B um 1.2 größer sein als P und A wiederum um 1.2 größer als B - also letztlich um 1.44 größer als P. Dies lässt sich beliebig weiterführen.

Allgemein sind diese Werte mit dem big- bzw. small-Element aus HTML vergleichbar.

Bitte beachten Sie, dass laut CSS Level 1 eine Vergrößerung bzw. Verkleinerung um 1.5 erfolgen sollte; CSS 2 beschreibt diese jedoch mit 1.2 .

URL's

URL's werden z.B. bei der Notation von (Hintergrund-)Bildern oder beim Einbinden von CSS-Dateien benötigt. Sie müssen dabei immer mit url() umschrieben werden, wobei innerhalb der Klammern die betreffende Adresse notiert wird. Beispiel:

BODY {background: url(http://www.name.de/name.jpg);} 

Farben

Farben werden z.B. bei Rahmen, Hintergründen oder Schrift gebraucht. Farbangaben können dabei in 5 verschiedenen Formen notiert werden:

Beispiel:

P.abc {color: maroon; background-color: yellow;}
BODY {color: #f0f; background-color: #000;}
SPAN {color: #ffff00; background-color: #c0c0c0;}
DIV.def {color: rgb(255,255,0);}
EM.ghi {color: rgb(10%,20%,30%);}

Nähere Informationen zu Farbnamen sowie den entsprechenden Hexadezimalzahlen liefert das Kapitel HTML - Übersicht: Farben aus dem Bereich HTML.

Winkel

Mit CSS Level 2 kommen erstmalig auch Winkel zum Einsatz. Hierbei werden diese z.B. dazu verwendet räumliche Effekte darstellen zu können. Winkel lassen sich dabei durch 3 Formen/Schreibweisen notieren:

Beispiel:

P.read { azimuth: 180deg; }
H1.read { elevation: 120grad; }
BODY.read { azimuth: 2rad; }

Zeit

Ebenso neu in CSS Level 2, wie die Möglichkeit von Winkeln, ist die Angabe von Zeiten. Diese werden hauptsächlich für aurale (sprachliche) Dinge, wie etwa Sprach-Browsing, verwendet (z.B. um Pausenlängen zu beschreiben). Folgende Zeit-Einheiten sind gegeben:

Beispiel:

P.read { pause: 2s; }
H1.read { pause-after: 30ms; } 

Frequenzen

Ebenso wie zeitliche Abstände spielen auch Frequenzen ab CSS Level 2 eine Rolle. Mit ihnen soll es ermöglicht werden sprachliche Ausdrucksstärke bzw. Verdeutlichungen besser interpretierbar zu machen. Folgende Frequenzmaße stehen zur Verfügung:

Beispiel:

P.read { pitch: 100Hz; }
P.read { pitch: 2.5kHz; }

Text

Unter Umständen kann es auch vorkommen, dass Text eingegeben werden kann/muss. Hierbei ist zu beachten, dass dieser in Hochkommas (') oder doppelten Anführungsstrichen (") zu führen ist. Beispiel:

P[align="center"] { ... }
EM { font-family: 'Arial'; }

Anmerkung: Da unter Umständen auch Anführungszeichen oder Hochkommas in Texten vorkommen sollten diese dann mit einem Backslash (\), der davor notiert wird, quasi als Sonderzeichen definiert werden. Die Ausgabegeräte werden dann angewiesen, dass der Text auch nach diesem Anführungszeichen oder Hochkomma noch weiter geht. Werden die jeweils anderen Zeichen verwendet, so brauch kein Schrägstrich gesetzt werden. Beispiel:

"Dies ist \"mein\" Text."
'Dies ist \'dein\' Text.'
"Dies ist 'mein' Text."
'Dies ist "dein" Text.' 

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project