Kapitel 4: Werte und Masseinheiten
Zahlenangaben
In CSS 2.1 sind entweder ganze oder gebrochene Zahlenangaben möglich, die positiv oder negativ sein können.
Ebenso können gebrochene oder ganze Zahlen als Prozentangaben dargestellt werden.
Farbangaben
Benannte Farben
CSS 2.1 kennt insgesamt 17 benannte Farben. Für die insgesamt etwa 140 nach X11 RGB- Standard benannten Farben, gibt es für die Benutzung nicht unbedingt Gewähr.
Die 17 CSS-Farben:
aqua,fuchsia, lime, olive, red, white, black, gray, maroon, orange, silver, yellow, blue, green, navy, purple, teal
Farben nach RGB
Muster: rgb(rotzahl,grünzahl,blauzahl)
Mit Werten von jeweils 0-255 als ganze, gebrochene oder auch Prozentwerte (0-100%).
Grauschattierte Zahlen, sind die RGB-Zahlen immer in 20%-Schritten. (0, 51, 102, 153, 204)
dargestellt werden.
Hexadezimale Zahlenwerte
Muster: #rot grün blau –Werte hexadezimal von jeweils 00 bis ff.
DieAbgekürzte Version (short hex) ist beispielsweise #fff für #ffffff oder #666 für #666666.
Äquivalente
| Farbe | Prozent | Numerisch | Hexadezimal | Short-Hex | Aussehen |
|---|---|---|---|---|---|
| red | rgb(100%,0%,0%) | rgb(255,0,0) | #ff0000 | #f00 | |
| orange | rgb(100%,40%,0%) | rgb(255,102,0) | #ff6600 | #f60 | |
| yellow | rgb(100%,100%,0%) | rgb(255,255,0) | #ffff00 | #ff0 | |
| green,lime | rgb(0%,100%,0%) | rgb(0,255,0) | #00ff00 | #0f0 | |
| blue | rgb(0%,0%,100%) | rgb(0,0,255) | #0000ff | #00f | |
| aqua | rgb(0%,100%,100%) | rgb(0,255,255) | #00ffff | #0ff | |
| black | rgb(0%,0%,0%) | rgb(0,0,0) | #000000 | #000 | |
| fuchsia | rgb(100%,0%,100%) | rgb(255,0,255) | #ff00ff | #f0f | |
| grey | rgb(50%,50%,50%) | rgb(128,128,128) | #808080 | ||
| maroon | rgb(50%,0%,0%) | rgb(128,0,0) | #800000 | ||
| navy | rgb(0%,0%,50%) | rgb(0,0,128) | #000080 | ||
| olive | rgb(50%,50%,0%) | rgb(128,128,0) | #808000 | ||
| purple | rgb(50%,0%,50%) | rgb(128,0,128) | #800080 | ||
| silver | rgb(75%,75%,75%) | rgb(192,192,192) | #c0c0c0 | ||
| teal | rgb(0%,50%,50%) | rgb(0,128,128) | #008080 | ||
| withe | rgb(100%,100%,100%) | rgb(255,255,255) | #ffffff | #fff |
Websichere Farben: 8-bit Color-Palette
Es sind 217 Farben(20%-Sprünge minus die Betriebs-Systemfarben)
rgb: 0, 51, 102, 153, 204, 255 (teilbar durch 51)
hex: 00,33,66,99,cc,ff
%: 0%,20%,40%,60%,80%,100%
Längenmasse
Positive oder (ev.)negative Zahlen, gefolgt von einer Wertangabe.
Es werden absolute und relative Masse unterschieden.
None ist nicht gleich 0. (0 braucht keine Massangabe)
Absolute Längenmasse:
Inches (in) 2.54 cm
Zentimeter (cm)
millimeter (mm)
Point (pt, typografisch = 1/72 in)
Pica (pc typografisch = 12 pt)
Demo 2
Würde die gesamte Monitorfläche zur Verfügung stehen (bei 1024 x 768 –Auflösung), so hätte jeder inch genau 72 px (Mac-Monitor), was jedoch nie der Fall ist. So ergeben sich in der Realität bis zu 120 ppi (Pixel per Inch).
Der Windows-Monitor hat 96 ppi oder mehr, der Mac-Monitor (betriebssystembedingt) 72 ppi.
Das ist ein gutes Beispiel dafür, dass relative Massangaben auf jeden Fall besser sind im Webdesign als absolute Angaben.
Relative Längenmasse: (relativ den Elternelementen)
em,ex (typografisch: richtet sich an der Oberlänge bzw. Unterlänge der gewählten Schrift aus.
Pixels (px)
Verwendung von em und ex ("geviert" und "halbgeviert"):
Beispiel:
Verschiedene Elemente haben unterschiedliche Schriftgrössen:
<h1> hat 24pt, <h2> hat 18pt und <p> hat 12pt. Ein em entspricht also dieser Schriftgrösse.
Ist die Schriftgrösse von Hand gesetzt, so wird diese Grösse als 1em interpretiert. 1em ist immer die im Parent-Element geltende Schriftgrösse.
ex ist nicht zu empfehlen, weil diese Grösse im Schriftsatz häufig nicht angegeben ist oder der Browser es falsch berechnet (1ex = ½ em), was meist nicht stimmt.
Demo 3
Verwendung von px:
CSS 2.1 hat die 96ppi-Auflösung des Bildschirms als Standard gesetzt. Dem sind moderne Mac-Browser wie IE5(mac) und Safari gefolgt.
Demo 4
Generell: Relative Massangaben sind im Screendesign allemal besser als absolute Massangaben – ausser man beabsichtigt eine Printausgabe des Contents.
URLs
Mit url(Pfadangabe) wird ein Pfad zu einem Element (Bild, Css) angegeben. Diese Pfade können relativ oder absolut sein.
Wird aus einer importierten Css-Datei mit @import ein weiteres CSS aufgerufen, so bezieht sich der Ausgangspfad auf den Pfad des aufrufenden CSS und nicht auf den Pfad der HTML-Seite.
inherit (Vererbungsanweisung):
Eine einfache Methode, die Vererbung zu erzwingen ist inherit.
Beispiel: #toolbar {background:blue;color:white};
#toolbar a{inherit} //damit ist die Linkfarbe von #toolbar vererbt!
Weitere Massangaben in CSS2
media: Aural
Angle, Time, Frequency (Sprechrichtung, Verzögerung, Wiederholfrequenz)
Diese Möglichkeiten wurden bisher in keinem Browser implementiert.
Weiter zu Kapitel 5: Fonts