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