CSS: Farben, Hintergründe, Selektoren & Externe Stylesheets

Diese Dokumentation behandelt die Grundlagen der visuellen Gestaltung mit CSS, einschließlich Farbmodellen, Hintergrund-Eigenschaften, fortgeschrittenen Selektoren sowie dem Einbinden externer Stylesheets[cite: 8].

Farben können in CSS auf verschiedene Arten definiert werden[cite: 8]:

CSS bietet 140 vordefinierte Farbnamen[cite: 8].

h1 { color: red; }
h2 { color: darkviolet; }
body { background-color: papayawhip; }

Für eine präzisere Kontrolle stehen verschiedene numerische Modelle zur Verfügung[cite: 8]:

• RGB / RGBa: Mischung aus Rot-, Grün- und Blauanteilen (jeweils 0–255 oder 0%–100%)[cite: 8]. Das optional angehängte a steuert die Transparenz (Alpha-Kanal) von 0 (vollständig transparent) bis 1 (undurchsichtig)[cite: 8].
• Hexadezimalwerte: Hexadezimale Darstellung der RGB-Werte (Format: #RRGGBB)[cite: 8]. Doppelziffern können abgekürzt werden (z. B. #F06 entspricht #FF0066)[cite: 8].
• HSL / HSLa: Farbton (Hue in Grad $0^\circ$–$360^\circ$), Sättigung (Saturation in %) und Leuchtkraft (Luminosity in %)[cite: 8].

/* RGB Formate */
p { color: rgb(200, 178, 230); }
p { color: rgb(78%, 70%, 90%); }
p { color: #C8B2E6; }
p { color: rgba(0, 0, 0, 0.5); } /* 50% Transparenz */
 
/* HSL Format */
div { color: hsl(180, 50%, 75%); }

Die Eigenschaft color bestimmt die Farbe des Texts und eventuell definierter Rahmen eines Elements[cite: 8].

blockquote {
  border: 4px dashed;
  color: green;
}

Füllt den Hintergrundbereich eines Elements bis zum äußeren Rand des Rahmens[cite: 8].

blockquote {
  background-color: green;
}

Legt fest, wo der Hintergrund-Malbereich endet[cite: 8]:

• border-box: Reicht bis an den äußeren Rand des Rahmens (Standard)[cite: 8].
• padding-box: Reicht bis zum äußeren Rand des Innenabstands (Padding)[cite: 8].
• content-box: Erstreckt sich nur über den eigentlichen Inhalt[cite: 8].

div { background-clip: padding-box; }

Steuert die Gesamtransparenz eines Elements inklusive aller seiner Kinder (Wertebereich: 0 bis 1)[cite: 8].

h1 {
  color: gold;
  background: white;
  opacity: 0.25;
}

• background-image: Lädt eine Bilddatei über url()[cite: 8]. Standardmäßig wiederholt sich das Bild horizontal und vertikal[cite: 8].
• background-repeat: Steuert das Wiederholungsverhalten[cite: 8].
  • Mögliche Werte: repeat, no-repeat, repeat-x (nur horizontal), repeat-y (nur vertikal), space, round[cite: 8].

body {
  background-image: url("star.png");
  background-repeat: no-repeat;
}

• background-position: Bestimmt den Ursprung des Hintergrundbildes[cite: 8]. Werte können Schlüsselwörter (left, center, right, top, bottom), Längenangaben oder Prozentwerte sein[cite: 8].
• background-attachment: Legt fest, ob das Bild mit dem Inhalt scrollt[cite: 8]:
  • scroll: Bild scrollt mit (Standard)[cite: 8].
  • fixed: Bild bleibt fest im Anzeigefenster verankert[cite: 8].
  • local: Scrollt mit dem Elementinhalt mit[cite: 8].

Legt die Dimensionen des Hintergrundbilds fest[cite: 8]:

• Längen- oder Prozentangaben (z. B. 600px 300px)[cite: 8].
• cover: Das Bild deckt den gesamten Bereich vollständig ab (wird ggf. beschnitten)[cite: 8].
• contain: Das Bild wird so skaliert, dass es vollständig sichtbar ist[cite: 8].

Mehrere Eigenschaften können kombiniert oder mehreren Bildern zugewiesen werden[cite: 8]:

/* Shorthand-Syntax */
body {
  background: white url("star.png") no-repeat top center fixed;
}
 
/* Mehrere Hintergrundbilder */
body {
  background: 
    url("image1.png") left top no-repeat,
    url("image2.png") center center no-repeat,
    url("image3.png") right bottom no-repeat;
}

Farbverläufe werden über Generierungs-Funktionen als Hintergrundbilder angewendet[cite: 8].

Wechseln Farben entlang einer Linie[cite: 8]. Richtungen können in Grad (deg) oder Begriffen (z. B. to right, to bottom) definiert werden[cite: 8].

#banner {
  background-image: linear-gradient(180deg, aqua, green);
}
/* Mit Zwischenstopps */
#header {
  background-image: linear-gradient(90deg, yellow, orange 25%, purple);
}

Breiten sich kreis- oder elliptenförmig von einem Punkt nach außen aus[cite: 8].

div {
  background-image: radial-gradient(yellow, green);
}

<note tip> Herstellerpräfixe (Vendor Prefixes): Ältere Browser benötigten für Eigenschaften wie Verläufe Herstellervorstufen (z. B. -webkit-, -moz-, -ms-, -o-)[cite: 8]. Moderne Browser nutzen in der Regel den unpräfigierten W3C-Standard[cite: 8]. </note>

Zielen auf Zustände von Elementen ab[cite: 8].

Die Reihenfolge bei Links muss zwingend folgendem Schema entsprechen (LVHA-Regel)[cite: 8]:

a:link { color: maroon; }      /* Unbesuchte Links */
a:visited { color: gray; }     /* Besuchte Links */
a:focus { color: maroon; }     /* Element hat Tastatur-Fokus */
a:hover { color: red; }        /* Mauszeiger bewegt sich darüber */
a:active { color: brightred; } /* Element wird angeklickt */

• Strukturell: :first-child, :last-child, :nth-child(), :nth-of-type(), :empty, :root[cite: 8]
• Formulardaten: :enabled, :disabled, :checked[cite: 8]
• Logisch / Sonstige: :not(), :target[cite: 8]

Sprechen Teile eines Elements an, die nicht explizit im HTML markiert sind[cite: 8]:

• ::first-line: Formatiert die erste Zeile eines Textblocks[cite: 8].
• ::first-letter: Formatiert den ersten Buchstaben[cite: 8].
• ::before & ::after: Fügt mithilfe der Eigenschaft content dynamischen Inhalt vor bzw. nach dem Element ein[cite: 8].

p.warning::before {
  content: url("exclamation.png");
  margin-right: 6px;
}
p.warning::after {
  content: " Thank you.";
  color: red;
}

Zielen auf Elemente anhand ihrer HTML-Attribute und deren Werte ab[cite: 8]:

• E[attr]: Besitzt das Attribut[cite: 8].
• E[attr=„wert“]: Exakter Attributwert[cite: 8].
• E[attr~=„wert“]: Enthält das Wort in einer leerzeichengetrennten Liste[cite: 8].
• E[attr^=„wert“]: Wert beginnt mit der Zeichenkette[cite: 8].
• E[attr$=„wert“]: Wert endet mit der Zeichenkette[cite: 8].
• E[attr*=„wert“]: Wert enthält die Zeichenkette an beliebiger Stelle[cite: 8].

img[title] { border: 3px solid; }             /* Hat Title-Attribut */
img[src$=".png"] { border: 1px solid blue; }  /* Endet auf .png */

Zur besseren Wartbarkeit wird CSS idealerweise in separaten .css-Dateien gespeichert[cite: 8].

Wird im <head> der HTML-Datei platziert[cite: 8]:

<head>
  <title>Titel der Seite</title>
  <link rel="stylesheet" href="/path/stylesheet.css">
</head>

Kann innerhalb eines <style>-Blocks oder am Anfang einer externen CSS-Datei genutzt werden[cite: 8]:

<head>
  <style>
    @import url("/path/stylesheet.css");
    p { font-family: Verdana; }
  </style>
</head>