6.2.15 Exkurs – Eigenschaftswerte: Längenmaße, Farben, Schlüsselwörter
In den vorherigen Abschnitten und im folgenden Kapitel nennen wir immer wieder Anwendungsbeispiele. Es ist wichtig, dass wir zumindest die gängigsten Eigenschaftswerte wie Längenmaße, Farbangaben und Schlüsselwörter kennen. Diese stellen wir im Folgenden tabellarisch vor.
Absolute und relative Längenmaße
Längenmaße drücken wir in positiven oder negativen Zahlenwerten aus. Unmittelbar danach (ohne Leerzeichen) folgt die Einheitsbezeichnung. Ist der Wert 0
, kann die Einheitsbezeichnung entfallen. Absolute Einheiten bezeichnen immer feststehende Werte, während relative Einheiten sich im Verhältnis zu anderen Elementen verhalten.
Tabelle: Längenmaße
Längenmaß | Bedeutung | Beispiel |
---|---|---|
cm |
allgemeines Längenmaß; 2,54 cm sind 1 Inch | font-size: 1cm; top: 2.54cm; |
em |
bezieht sich auf die Höhe der Schriftart | font-size: 1.2em; line-height: 1.5em; |
in |
allgemeines Längenmaß im angelsächsischen Raum | border-width: 0.1in; margin-left: 1in; |
mm |
10 mm = 1 cm | margin-bottom: 10mm; width: 70mm; |
pc |
typographische Maßeinheit; 1pc = 12pt | font-size: 1pc; line-height: 1.2pc; |
pt |
typographische Maßeinheit; 72pt = 1 Inch | font-size: 12pt; line-height: 14pt; |
px |
ein Bildschirmpunkt; abhängig von der Pixeldichte | border-width: 3px; margin-right: 60px; |
Prozentwerte und Viewport-Werte
Prozentwerte geben wir als positive oder negative Zahlenwerte mit einem Prozentzeichen (%
) an. Prozentangaben sind relativ zu anderen CSS-Eigenschaften. Beispiel:
Viewport-Werte (vh
, vw
) beziehen sich auf die Abmessungen des Ansichtsfensters. Zusätzliche Einheiten wie vmin
und vmax
beziehen sich auf die kleinere oder größere Seite des Viewports. Beispiele:
Farbangaben
In CSS definieren wir Farben auf verschiedene Arten. Beispiele:
Notation | Erklärung |
---|---|
#RRGGBB |
Hexadezimale Paarwert-Notation (00 bis FF ) |
#RGB |
Kurzschreibweise; jede Stelle wird verdoppelt |
rgb(rrr%,ggg%,bbb%) |
RGB-Werte von 0% bis 100% |
rgb(rrr,ggg,bbb) |
RGB-Werte innerhalb einer Spanne von 0 bis 255 |
rgba(r, g, b, a) |
RGB-Werte plus Alphakanal für Transparenz; a liegt zwischen 0 und 1 |
hsl(h, s%, l%) |
HSL-Farbraum: Farbton (0–360), Sättigung und Helligkeit |
hsla(h, s%, l%, a) |
HSL plus Alphakanal |
Schlüsselwörter | Über 160 benannte Farben, z. B. red , blue , lightseagreen , rebeccapurple Link zur vollständigen Liste der benannten Farben |
Schlüsselwörter
Schlüsselwörter sind Werte, die wir nur für bestimmte Eigenschaften verwenden können, z. B.:
solid
fürborder-style
left
,right
,center
fürtext-align