HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum |
 

 
 

Anzeige 
 
               Forum
 
 
HTMLWorld » Maße und Einheiten

Maße und Einheiten

von Jan Winkler

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.

Anzeige

Längen  nach oben

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:

Einheit Verhältnis Beschreibung
in
(Inch)
1 in = 2.54 cm Angabe von Größen in Inch.
cm
(Zentimeter)
1 cm = 10 mm Angabe von Größen in Zentimeter.
mm
(Millimeter)
10 mm = 1 cm Angabe von Größen in Millimeter.
pt
(Punkte)
1 pt = 1/72 in = 0,3527... mm Angabe von Größen in (Bild-)Punkten (gleichbleibend mit 1/72 in definiert).
pc
(Pica)
1 pc = 12 pt Angabe von Größen in Pica.
em
(Schriftgröße)
1 em = 100% Schriftgröße Angabe von (Schrift-)Größen relativ zur Normalgröße der Schriftart.
ex
(x-Schriftgröße)
1 ex = 100% Schriftgröße des kleinen x Angabe von (Schrift-)Größen relativ zur Normalgröße des kleinen x der Schriftart.
px
(Pixel)
1 px = 1 Pixel Angabe von Größen relative zur Auflösung. Dabei entspricht 1 px gleich einem Pixel des Bildschirms.

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  nach oben

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

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

Absolute Schriftgrößen  nach oben

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:

Einheit Verhältnis Beschreibung
xx-small 1.728 mal kleiner als medium Angabe von Größen als sehr sehr klein.
x-small 1.44 mal kleiner als medium Angabe von Größen als sehr klein.
small 1.2 mal kleiner als medium Angabe von Größen als klein.
medium normal Angabe von Größen als Normalgröße/mittelgroß.
large 1.2 mal größer als medium Angabe von Größen als groß.
x-large 1.44 mal größer als medium Angabe von Größen als sehr groß.
xx-large 1.728 mal größer als medium Angabe von Größen als sehr sehr groß.

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  nach oben

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

Einheit Verhältnis Beschreibung
smaller 1.2 mal kleiner Die Schrift wird um 1.2 verkleinert
larger 1.2 mal größer Die Schrift wird um 1.2 vergrößert

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  nach oben

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  nach oben

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

Einheit Beschreibung
Farbname Es wird der Name der Farbe angegeben.
Farbwert Es wird der RGB-Wert der Farbe (Farbwert) als Hexa-Dezimalzahl, mit einem Raute-Zeichen (#) davor, notiert.
doppelter Farbwert Es wird der RRGGBB-Wert (doppelter Farbwert) der Farbe als Hexa-Dezimalzahl, mit einem Raute-Zeichen (#) davor, notiert.
RGB-Zahlenwert Es wird der RGB-Wert der Farbe als Zahl von 0 bis 255 innerhalb von rgb(Zr,Zg,Zb) notiert. Dabei müssen Zr durch Rotanteil, Zg durch Grünanteil und Zb durch Blauanteil ersetzt werden.
RGB-Prozentwert Es wird der RGB-Wert der Farbe als Prozentzahl (0 bis 100) innerhalb von rgb(Zr%,Zg%,Zb%) notiert. Dabei müssen Zr durch Rotanteil, Zg durch Grünanteil und Zb durch Blauanteil ersetzt 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  nach oben

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:

Einheit Verhältnis Beschreibung
deg
(Grad / engl. Degrees)
Kreis = 360 deg Angabe von Winkeln in Grad/Degrees
grad
(Neugrad)
Kreis = 400 grad Angabe von Winkeln in Neugrad (Achtung, nicht mit Degrees/Grad verwechseln)
rad
(Radiant)
Kreis ~ 6.283 rad
1 rad = 57.296 deg
Angabe von Winkeln in Radianen

Beispiel:

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

Zeit  nach oben

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:

Einheit Verhältnis Beschreibung
s
(Sekunden)
1 Minute = 60 s Angabe von Zeiten in Sekunden
ms
(Millisekunden)
1 Minute = 60000 ms
1 s = 1000 ms
Angabe von Zeiten in Millisekunden

Beispiel:

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

Frequenzen  nach oben

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:

Einheit Verhältnis Beschreibung
Hz
(Hertz)
  Angabe von Frequenzen in Hertz.
kHz
(Kilohertz)
1 kHz = 1000 Hz Angabe von Frequenzen in Kilohertz.

Beispiel:

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

Text  nach oben

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.' 

 

Images verschiedener Größe gleich anpassen von Alphavader
Seite verzerrt bei anderen Auflösungen. von Gorgomir
img Stretcher auf fluid Div Container von Thunder1985
Dropdown Menu unter den header von Harburger1887
Kreis um Buchstabe... von karinsch
footer unten platzieren von Alex...
css-anfaengerin - schreibschutz von css-tempate entfernen von kiloberta
Programmierer in Festanstellung oder Freiberuflich gesucht von GP.1226
Button Formatierungs Problem mit Transparentem Hintergrund von redlin
Runde Ecken IE 8 / ohne JavaScript und BG Bilder? von kamikaetzelein
3 Div Elemente ausrichten von Kanikkl
Bilder werden nur im IE angezeigt von Schmido
Contentinhalt vor Linkstruktur im Seitenquelltext von tbtip
Browserunterschiede in Darstellung von CrazyPlaya
Wie sollte ich das aufbauen? von Reelay

zum Maße und Einheiten Forum »


 
     
 

Anzeige