Farben und Hintergründe

Diese Lektion behandelt CSS-Techniken zur Farbgestaltung von Texten, Hintergründen und Elementen.

1. Farbdefinitionen

CSS unterstützt verschiedene Methoden, Farben anzugeben. 
p {
    color: blue;
}

div {
    background-color: #f0f0f0;
}

2. Hintergrundbilder

Hintergründe können auch mit Bildern gestaltet werden. 
body {
    background-image: url('background.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

3. Farbverläufe (Gradients)

CSS kann lineare und radiale Farbverläufe als Hintergründe darstellen. 
div {
    background: linear-gradient(to right, red, yellow);
}

section {
    background: radial-gradient(circle, blue, white);
}

4. Transparenz und Opazität

Die Transparenz von Elementen wird mit opacity oder RGBA-Werten gesteuert. 
div {
    background-color: rgba(0, 128, 255, 0.5);
}

p {
    opacity: 0.7;
}

5. Textfarben

Die Textfarbe wird mit color festgelegt. 
h1 {
    color: #2b7cff;
}

p.note {
    color: orange;
}

6. Zusammenfassung

Die Beherrschung von Farben und Hintergründen ist zentral für ästhetisches und benutzerfreundliches Webdesign.