====== 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].

===== 1. CSS-Farbwerte =====

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

==== Vordefinierte Farbnamen (Named Colors) ====
CSS bietet 140 vordefinierte Farbnamen[cite: 8].
<code css>
h1 { color: red; }
h2 { color: darkviolet; }
body { background-color: papayawhip; }
</code>

==== Numerische Farbmodelle ====
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].

==== Beispiel-Formate ====
<code css>
/* 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%); }
</code>

===== 2. Vordergrund, Hintergrund & Transparenz =====

==== Vordergrundfarbe (color) ====
Die Eigenschaft ''color'' bestimmt die Farbe des Texts und eventuell definierter Rahmen eines Elements[cite: 8].
<code css>
blockquote {
  border: 4px dashed;
  color: green;
}
</code>

==== Hintergrundfarbe (background-color) ====
Füllt den Hintergrundbereich eines Elements bis zum äußeren Rand des Rahmens[cite: 8].
<code css>
blockquote {
  background-color: green;
}
</code>

==== Begrenzung des Hintergrunds (background-clip) ====
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].

<code css>
div { background-clip: padding-box; }
</code>

==== Deckkraft (opacity) ====
Steuert die Gesamtransparenz eines Elements inklusive aller seiner Kinder (Wertebereich: ''0'' bis ''1'')[cite: 8].
<code css>
h1 {
  color: gold;
  background: white;
  opacity: 0.25;
}
</code>

===== 3. Hintergrundbilder (Background Images) =====

==== Bildquelle & Kachelung ====
  * **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].

<code css>
body {
  background-image: url("star.png");
  background-repeat: no-repeat;
}
</code>

==== Positionierung & Fixierung ====
  * **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].

==== Skalierung (background-size) ====
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].

==== Kurzschreibweise (Shorthand) & Mehrfache Hintergründe ====
Mehrere Eigenschaften können kombiniert oder mehreren Bildern zugewiesen werden[cite: 8]:
<code css>
/* 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;
}
</code>

===== 4. Farbverläufe (Gradients) =====

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

==== Lineare Verläufe (linear-gradient) ====
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].
<code css>
#banner {
  background-image: linear-gradient(180deg, aqua, green);
}
/* Mit Zwischenstopps */
#header {
  background-image: linear-gradient(90deg, yellow, orange 25%, purple);
}
</code>

==== Radiale Verläufe (radial-gradient) ====
Breiten sich kreis- oder elliptenförmig von einem Punkt nach außen aus[cite: 8].
<code css>
div {
  background-image: radial-gradient(yellow, green);
}
</code>

<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>

===== 5. Fortgeschrittene CSS-Selektoren =====

==== Pseudo-Klassen (Pseudo-classes) ====
Zielen auf Zustände von Elementen ab[cite: 8].

=== Interaktions- & Link-Pseudoklassen ===
Die Reihenfolge bei Links muss zwingend folgendem Schema entsprechen (LVHA-Regel)[cite: 8]:
<code css>
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 */
</code>

=== Weitere Pseudo-Klassen ===
  * **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]

==== Pseudo-Elemente (Pseudo-elements) ====
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].

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

==== Attribut-Selektoren (Attribute Selectors) ====
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].

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

===== 6. Externe Stylesheets einbinden =====

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

==== Einbindung über das <link>-Element ====
Wird im ''<head>'' der HTML-Datei platziert[cite: 8]:
<code html>
<head>
  <title>Titel der Seite</title>
  <link rel="stylesheet" href="/path/stylesheet.css">
</head>
</code>

==== Einbindung über die @import-Regel ====
Kann innerhalb eines ''<style>''-Blocks oder am Anfang einer externen CSS-Datei genutzt werden[cite: 8]:
<code html>
<head>
  <style>
    @import url("/path/stylesheet.css");
    p { font-family: Verdana; }
  </style>
</head>
</code>