CSS - Grundlagen - Wertangaben

1. Die Möglichkeiten

Bei CSS gibt es drei verschiedene Formen von Wertangaben. Die sind für jede Eigenschaft dezidiert festgelegt. Daher müsst ihr sie leider auswendig lernen, anders geht es nicht. Aber keine Angst, so viele gibt es nicht.

2. Numerische Angaben

Wert	Bedeutung
pt (absolut)	Punkt, typographische Maßeinheit
pc (absolut)	Pica, typographische Maßeinheit
in (absolut)	Inch, Längenmaß aus dem Mittelalter (deutsch Zoll), wird nur noch in anglophonen Ländern verwendet. 1 Inch sind 2,54 cm.
mm (absolut)	Millimeter
cm (absolut)	Zentimeter
px (absolut)	Pixel, abhängig von der Pixeldichte des Ausgabegerätes
em (relativ)	Prozentuale Angabe, bezogen auf die Schriftgröße des Elements oder auf die Schriftgröße des Elternelements.
ex (relativ)	Bezogen auf die Höhe des Kleinbuchstaben x in diesem Element oder bezogen auf die Höhe des Kleinbuchstabens x im Elternelement
% (relativ)	prozentuale Angabe

Wann aber setzt man nun welche Maßeinheit ein? Also in (Inch) schon aus Protest nicht! Meter und somit auch Milli- und Zentimeter sind Segnungen der französischen Revolution und stehen für Freiheit, Gleichheit, Brüderlichkeit. Inch und somit auch die anderen Längenangaben wie feet oder miles sind repräsentative Relikte des Ständestaates aus dem Mittelalter.

Allerdings habe ich auch noch nie mm und cm benutzt, soviel zum Thema Freiheit, Gleichheit, Brüderlichkeit. pt, pc und ex sind Einheiten für Typographen und DTP-Fuzzis (Mac-User), also weg damit. Bleiben noch px, em und %, die einzig wahren Maße für Leute wie uns, also diejenigen, die zwar perfekt Quellcode hacken können, aber null Ahnung von den Feinheiten der Typographie haben.

Meine Meinung

Die folgenden Tipps sind Empfehlungen meinerseits. Mehr nicht! Ihr müsst euch nicht daran halten, wenn ihr wollt. Zumal etliche meiner Kollegen anderer Meinung sein werden.

• px wird bei absoluten Größenangaben gesetzt. Besonders sinnvoll ist es, wenn man mit einem festen Layout arbeitet. Bei Schriften sollte man es eigentlich nicht verwenden.
• em sollte meiner Meinung nach zur Auszeichnung der Schrift benutzt werden. Da es sich um einen relativen Wert handelt, können so zum Beispiel alle Schriftgrößen mit einer einzigen Änderung angepasst werden. Wie das geht, zeige ich euch bei den Tutorials.
• % wird bei relativen Größenangaben gesetzt. Diese Angabe empfiehlt sich bei "fließenden" Layouts oder Elemente, die sich dynamisch anpassen sollen.

Die Null

Wenn ihr die angebt, so könnt ihr euch getrost die Maßeinheit sparen. Es gibt sogar ehemalige Kollegen von mir, die darauf besonderen Wert legen. Na ja, wen es glücklich macht.

3. Farbangaben

Normalerweise werden Farben nach dem Schema RGB hexadezimal angegeben, beginnend mit einem Lattenzaun. Also zum Beispiel #05ad45. Möglich ist auch ein Kurzform, wenn pro Farbbereich identische Werte vorliegen, also #f00 anstelle von #ff0000 oder #4de anstelle von #44ddee. Alternativ kann man auch die RGB-Werte angeben und zwar so: rgb(50, 170, 204) mit absoluten Werten von 0 bis 255 oder prozentual rgb(35%, 50%, 80%). Welchen Hexadezimal- bzw. RGB-Wert ihr bei welchem Farbton bekommt, sagt euch das Bildbearbeitungsprogramm eurer Wahl.

4. Zeichenketten

Hierbei handelt es sich um alle speziell festgelegten Angaben wie zum Beispiel bold oder inline. Dabei muss man eigentlich auf nichts achten, bis auf eine Ausnahme.

Eine Besonderheit

Schriften können ganz normal geschrieben werden, so lange sie keine Leerzeichen enthalten. Wenn dem doch so ist, so muss man sie in Anführungszeichen setzen.

pre
{
  font-family: Courier, "Courier New";
}

Im Gegensatz zu den normalen Angaben sollte man hier auf die Groß- und Kleinschreibung achten. Es ist zwar erstaunlicherweise nicht notwendig (getestet unter Windows und Linux), aber man weiß ja nie.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt