Selektoren ·
Kombinatoren ·
Pseudo-Klassen ·
Box-Modell ·
Kaskade ·
Spezifität
CSS (Cascading Style Sheets) ist die Sprache für das Styling von Webseiten. Diese Grundlagen sind essenziell für das Layout, die Gestaltung und die Wartbarkeit von modernen Webprojekten.
Selektoren bestimmen, welche HTML-Elemente gestylt werden. Sie sind die Grundlage jeder CSS-Regel und reichen von einfachen Typselektoren bis zu komplexen Attributselektoren.
| Selektor | Beispiel | Beschreibung |
|---|---|---|
| * | * { margin: 0; } | Universalselektor – alle Elemente |
| element | p { color: blue; } | Typselektor – alle <p>-Elemente |
| .class | .highlight { background: yellow; } | Klassenselektor – alle mit class="highlight" |
| #id | #header { font-size: 2rem; } | ID-Selektor – Element mit id="header" |
| [attr] | [disabled] { opacity: 0.5; } | Attributselektor – Elemente mit dem Attribut |
| [attr="wert"] | [type="text"] { border: 1px solid; } | Attributselektor – exakter Wert |
| [attr^="wert"] | [href^="https"] { color: green; } | Attributselektor – beginnt mit |
| [attr$="wert"] | [src$=".png"] { border: 0; } | Attributselektor – endet mit |
| [attr*="wert"] | [title*="info"] { font-weight: bold; } | Attributselektor – enthält |
Kombinatoren definieren die Beziehung zwischen Selektoren – sie ermöglichen präzises Styling basierend auf der HTML-Struktur.
> ist restriktiver als das Leerzeichen (Nachkomme).
Pseudo-Klassen (:) beschreiben spezielle Zustände von Elementen. Pseudo-Elemente (::) stylen Teile von Elementen oder erzeugen virtuellen Inhalt.
| Pseudo-Klasse | Beschreibung | Beispiel |
|---|---|---|
| :hover | Element wird mit der Maus berührt | a:hover { color: red; } |
| :focus | Element hat Fokus (z.B. Input) | input:focus { outline: 2px solid blue; } |
| :active | Element wird angeklickt | button:active { transform: scale(0.95); } |
| :first-child | Erstes Kindelement | li:first-child { font-weight: bold; } |
| :last-child | Letztes Kindelement | li:last-child { border-bottom: none; } |
| :nth-child(n) | N-tes Kind (1-basiert) | tr:nth-child(2n) { background: #eee; } |
| :not(selektor) | Negation – alle außer | input:not([type="submit"]) { width: 100%; } |
| :checked | Ausgewähltes Radio/Checkbox | input:checked + label { color: green; } |
| Pseudo-Element | Beschreibung | Beispiel |
|---|---|---|
| ::before | Fügt Inhalt vor dem Element ein | p::before { content: "→ "; } |
| ::after | Fügt Inhalt nach dem Element ein | a::after { content: " (link)"; } |
| ::first-line | Erste Zeile eines Textblocks | p::first-line { font-weight: bold; } |
| ::first-letter | Erster Buchstabe | p::first-letter { font-size: 2em; } |
::before und ::after benötigen immer die content-Eigenschaft, um sichtbar zu sein.
Das Box-Modell beschreibt den Aufbau jedes HTML-Elements: Inhalt (content), Innenabstand (padding), Rahmen (border) und Außenabstand (margin).
| Eigenschaft | Beschreibung | Beispiel |
|---|---|---|
| margin | Abstand nach außen (transparent) | margin: 10px 20px 10px 20px; |
| border | Rahmen (Stil, Breite, Farbe) | border: 2px solid #333; |
| padding | Abstand nach innen (hintergrund | padding: 15px; |
| width / height | Breite/Höhe des Inhaltsbereichs | width: 300px; height: 200px; |
| box-sizing | Bestimmt, ob padding/border mitgezählt werden | box-sizing: border-box; |
box-sizing: border-box wird die gesamte Breite inklusive padding und border berechnet – das erleichtert das Layout enorm.
Kaskade bestimmt, welche CSS-Regel bei Konflikten angewendet wird. Vererbung bedeutet, dass bestimmte Eigenschaften von Elternelementen auf Nachkommen übergehen.
| Priorität | Quelle | Beschreibung |
|---|---|---|
| 1 | !important | Überschreibt alles (vermeiden!) |
| 2 | Inline-Styles | Im HTML mit style="" |
| 3 | ID-Selektoren | #header { ... } |
| 4 | Klassen / Attribute / Pseudo | .class, [attr], :hover |
| 5 | Element-Selektoren | p, div, h1 |
| 6 | Vererbung | Von Elternelementen |
| 7 | Browser-Standard | User Agent Stylesheet |
!important – es macht CSS schwer wartbar. Nutzen Sie stattdessen spezifischere Selektoren oder die richtige Kaskaden-Reihenfolge.
Spezifität bestimmt, welche CSS-Regel angewendet wird, wenn mehrere Selektoren auf dasselbe Element zielen. Die Regel mit der höheren Spezifität gewinnt.
| Selektortyp | Punkte | Beispiel |
|---|---|---|
| Inline-Styles | 1,0,0,0 | style="color: red;" |
| ID-Selektoren | 0,1,0,0 | #header, #main |
| Klassen, Attribute, Pseudo-Klassen | 0,0,1,0 | .class, [type], :hover |
| Elemente und Pseudo-Elemente | 0,0,0,1 | p, div, ::before |
| Universalselektor | 0,0,0,0 | * |
.class
>
:hover
box-sizing
cascade
spezifität
.class { color: blue; } ·
nav > ul { display: flex; } ·
a:hover { color: red; }