Farben, Schrift und eigene Werte
Farben angeben
| Schreibweise | Beispiel | Wann sinnvoll |
|---|---|---|
| Name | darkslateblue |
für schnelle Versuche; es gibt 148 davon |
| Hexadezimal | #483d8b |
am weitesten verbreitet, aus Werkzeugen kopiert |
| rgb | rgb(72 61 139) |
wenn man die Farbkanäle einzeln kennt |
| hsl | hsl(248 39% 39%) |
am besten zum Selbstwählen |
Die ersten vier Zeilen zeigen dieselbe Farbe in vier Schreibweisen.
Warum ist hsl zum Selbstwählen am besten?
Die drei Zahlen bedeuten:
- Farbton (0–360): die Stelle auf dem Farbkreis. 0 rot, 120 grün, 240 blau.
- Sättigung (0–100 %): wie kräftig. 0 % ist grau.
- Helligkeit (0–100 %): 0 % schwarz, 100 % weiß, 50 % die volle Farbe.
Damit kann man gezielt ändern: Eine hellere Variante derselben Farbe bekommt man, indem man nur die letzte Zahl erhöht. Bei #483d8b müsste man dafür rechnen.
Probier es aus: Baue aus hsl(248 39% 39%) eine helle Variante für einen Hintergrund, indem du die Helligkeit auf 95 % setzt.
Eigene Werte
Sobald dieselbe Farbe an fünf Stellen steht, wird das Ändern lästig. CSS kann sich Werte merken:
Eine eigene Eigenschaft (auch CSS-Variable) ist ein selbst benannter Wert. Ihr Name beginnt mit zwei Bindestrichen.
:root {
--gruen: hsl(140 60% 30%);
}Benutzt wird sie mit var():
header { background: var(--gruen); }:root ist das oberste Element der Seite. Was dort definiert wird, ist überall verfügbar – eigene Eigenschaften vererben sich wie Textfarben.
a) Ändere --gruen in einen anderen Farbton. Wie viele Stellen musst du anfassen? Wie viele ändern sich?
b) Ändere --abstand auf 2rem. Was passiert?
c) Erkläre, warum das dieselbe Idee ist wie eine Variable in Java.
Schrift
| Eigenschaft | Bedeutung |
|---|---|
font-family |
die Schriftart, als Liste mit Ausweichmöglichkeiten |
font-size |
die Schriftgröße |
font-weight |
die Strichstärke: 400 normal, 700 fett |
line-height |
der Zeilenabstand, am besten als Zahl ohne Einheit |
max-width |
wie breit ein Textblock höchstens wird |
Einheiten:
| Einheit | Bedeutung |
|---|---|
rem |
ein Vielfaches der Grundschriftgröße des Browsers |
em |
ein Vielfaches der Schriftgröße des Elements selbst |
ch |
die Breite einer Ziffer – praktisch für Textbreiten |
px |
ein Bildpunkt |
% |
Anteil vom umgebenden Element |
Gib Schriftgrößen in rem an, nicht in px.
rem bezieht sich auf die Grundschriftgröße, die im Browser eingestellt ist. Wer schlecht sieht und diese Größe hochgestellt hat, bekommt bei rem eine größere Seite. Bei px bleibt alles winzig.
Die Zeile max-width: 60ch; begrenzt den Text auf etwa 60 Zeichen je Zeile.
Das ist keine Willkür, sondern kommt aus dem Schriftsatz: Zwischen 45 und 75 Zeichen liest es sich am besten. Wird eine Zeile länger, findet das Auge beim Umbruch den Zeilenanfang nicht mehr zuverlässig.
Nimm die Zeile einmal heraus und lies den Absatz auf einem breiten Bildschirm. Der Unterschied ist deutlicher, als man erwartet.
Aufgabe
Gestalte die Seite im Übungsbereich:
a) Lege drei eigene Eigenschaften an: eine Hauptfarbe, eine helle Variante davon und einen Standardabstand.
b) Der Kopfbereich bekommt die Hauptfarbe als Hintergrund und weiße Schrift.
c) Der Hinweiskasten bekommt die helle Variante als Hintergrund und links einen 4 Pixel breiten Balken in der Hauptfarbe.
d) Die Seite bekommt eine serifenlose Schrift, einen Zeilenabstand von 1.6 und eine Höchstbreite von 65 Zeichen.
Tipp: Gerüst
:root {
--haupt: hsl(210 70% 35%);
--haupt-hell: /* dieselbe Zahl für den Farbton, hohe Helligkeit */;
--abstand: 1rem;
}