Zusammenfassung

In dieser Lektion haben wir gelernt:

• Die Eigenschaft color legt die Farbe des Textes fest und background-color die Farbe des Hintergrunds eines Elements. color wird vererbt. background-color nicht, aber Hintergründe sind standardmäßig transparent, sodass der Hintergrund des Elements ringsum durchscheint.
• Der Hintergrund von body bedeckt das ganze Browserfenster.
• CSS kennt 148 benannte Farben, etwa green, linen oder tomato.
• Eine RGB-Farbe mischt rotes, grünes und blaues Licht, jeweils von 0 bis 255: rgb(71, 105, 88).
• Eine Hexfarbe schreibt dieselben drei Zahlen im Hexadezimalsystem, je zwei Zeichen: #2a231b. Sind beide Zeichen jedes Paars gleich, können wir die Kurzform verwenden: #fff.
• Eine HSL-Farbe wird durch ihren Farbton (0 bis 360° auf dem Farbkreis), ihre Sättigung und ihre Helligkeit beschrieben: hsl(150, 19%, 20%). Eine hellere oder dunklere Version einer Farbe bekommen wir, indem wir ihre Helligkeit ändern.
• Ein Alphawert macht eine Farbe transparent, von 0 (transparent) bis 1 (deckend), zum Beispiel rgba(71, 105, 88, 0.2), hsla(150, 19%, 35%, 0.2) oder #47695833. Dezimalzahlen schreibt man mit einem Punkt.
• Die Eigenschaft opacity macht ein ganzes Element durchsichtig, samt Text und allem darin, während ein Alphawert nur eine Farbe betrifft.
• Text muss sich vom Hintergrund abheben, damit er gut lesbar ist.

Als Nächstes kommt ein kleines Projekt, in dem du alles aus den ersten drei Lektionen selbst ausprobierst: Du gibst der Speisekarte eines Cafés ihre Farben. Danach wählen wir in der Lektion Text und Schriften die Schriften für unsere Seite aus und legen Größe, Stärke, Zeilenabstand und Ausrichtung des Textes fest.