CSS-Selektoren, Kaskade und Boxmodell verstehen

HTML beschreibt Inhalt und Bedeutung. CSS, kurz für Cascading Style Sheets, beschreibt die Darstellung: Farben, Schriftarten, Abstände, Rahmen und Hintergründe. Durch eine Änderung des Stylesheets kann dasselbe HTML anders aussehen, ohne seine Überschriften, Absätze oder Links zu ändern.

Eine Regel lesen

p {
  color: navy;
  font-size: 18px;
}

Der Selektor p trifft auf Absätze zu. Die geschweiften Klammern schließen den Deklarationsblock ein. Jede Deklaration besteht aus einer Eigenschaft, einem Doppelpunkt, einem Wert und einem Semikolon. Hier sind color und font-size Eigenschaften; navy und 18px sind Werte. Zeilenumbrüche und Leerzeichen zwischen diesen Teilen machen den Code leichter lesbar, ohne seine Wirkung zu ändern.

Ein Semikolon trennt eine Deklaration von der nächsten. Das letzte ist optional, verhindert aber Fehler, wenn du eine weitere Zeile hinzufügst. In color: navy font-size: 18px; liest der Browser einen ungültigen Farbwert. Er kann die beiden beabsichtigten Deklarationen nicht daraus wiederherstellen, sodass dieser Text keinen der beiden Stile festlegt.

CSS einbinden

Ein externes Stylesheet ist eine separate CSS-Datei, die vom head des HTML aus verknüpft wird:

<link rel="stylesheet" href="css/styles.css">

Dieser Pfad bedeutet, dass neben der HTML-Datei ein Ordner namens css liegt, der styles.css enthält. Eine externe Datei kann mehrere Seiten gestalten. Speicherst du dort eine Änderung, werden die Regeln aktualisiert, die diese Seiten laden.

Ein style-Element im head enthält Regeln für eine Seite. Ein Inline-style-Attribut enthält Deklarationen für ein Element, etwa <p style="color: crimson;">Hello.</p>. Externe Stylesheets sind meist leichter zu warten. Normale Inline-Deklarationen haben außerdem Vorrang vor normalen Regeln in Autoren-Stylesheets, was spätere Änderungen erschweren kann.

Für ein erstes Ergebnis schreibe body { font-family: Arial, sans-serif; } und h1 { color: darkslateblue; } in die verknüpfte Datei. Lade die Seite neu. Der Fließtext verwendet Arial, wo verfügbar, und sonst eine serifenlose Ersatzschrift; die Überschrift ändert ihre Farbe. Steuerelemente wie Schaltflächen können ihre eigene Browserschrift behalten, bis du sie ausdrücklich zur Vererbung veranlasst.

Syntax- und Pfadfehler finden

Browser überspringen ungültige Deklarationen und fahren fort. color: 12px; ist ungültig, weil eine Länge keine Farbe ist. font-size: 16 px; ist ungültig, weil Zahl und Einheit direkt aneinanderstehen müssen. Eine falsch geschriebene Eigenschaft wird ebenfalls ignoriert. Eine gültige Rahmendeklaration im selben Block kann trotzdem funktionieren. Eine sichtbare Änderung beweist also nicht, dass jede Deklaration gültig ist.

CSS-Kommentare verwenden /* Header styles */ und können sich über mehrere Zeilen erstrecken. // beginnt keinen CSS-Kommentar; dadurch kann nachfolgender Code übersprungen werden. Bei Eigenschaftsnamen und gewöhnlichen Schlüsselwortwerten wird nicht zwischen Groß- und Kleinschreibung unterschieden; schreibe sie wie üblich klein. Klassennamen und Dateipfade müssen in Schreibweise und Groß- und Kleinschreibung genau übereinstimmen.

Wenn keine Stile erscheinen, prüfe die Anfrage im Netzwerkbereich. Ein falscher Pfad wie style.css kann 404 zurückgeben, obwohl sich die HTML-Seite selbst normal öffnet.

Kurzschreibweisen als vollständige Festlegungen behandeln

Eine Kurzschreibweise legt mehrere verwandte Eigenschaften zugleich fest. margin: 10px 20px; legt alle vier Außenabstände fest. Ausgelassene Teile kehren zu ihren Anfangswerten zurück: Auf background-image: url("sky.jpg"); folgendes background: lightblue; entfernt das Bild. Schreibe zuerst die Kurzschreibweise und danach alle Ausnahmen als Einzeleigenschaften, die erhalten bleiben sollen.

Eine einfache HTML-Seite hat bereits große Überschriften, Absatzabstände, Listenzeichen und unterstrichene Links. Sie stammen aus dem Browser-Stylesheet, dem eingebauten CSS des Browsers. Deine Stile setzen auf diesen Standardstilen auf; eine ungestaltete Seite ist keine Seite ohne CSS-Regeln.

Bedeutung vor Aussehen wählen

Typische Standardstile sind ein 8px großer Außenabstand des body, vertikale Absatzabstände von 1em und ein Innenabstand von 40px an der Anfangsseite von Listen. Für Überschriften gelten unter anderem 2em für h1 und 1.5em für h2; h1 hat vertikale Außenabstände von 0.67em. Als wichtig ausgezeichneter Text ist fett, betonter Text kursiv. Nicht besuchte Links sind meist blau und besuchte Links violett. Browsereinstellungen und Implementierungen können die Standardstile beeinflussen. Untersuche daher die tatsächliche Seite, wenn es auf Genauigkeit ankommt.

Die Standardschriftgröße beträgt häufig 16px; die Schriftart wird in den Browsereinstellungen gewählt. Leser können diese Größe ändern. Relative Schriftgrößen können dieser Einstellung folgen.

Wähle ein HTML-Element nach seiner Bedeutung aus und gestalte es anschließend. Wenn ein h2 zu groß aussieht, verwende h2 { font-size: 1.25rem; }. Ein h4 allein wegen der kleineren Schrift zu wählen, würde die Überschriftenstruktur ändern. Eine Änderung der CSS-Größe lässt die Bedeutung als Überschrift zweiter Ebene erhalten.

Die Standardstile bestimmen auch, wie Elemente Platz einnehmen. Absätze und Abschnitte bilden normalerweise Blockboxen. Spans und Links fließen normalerweise innerhalb von Zeilen. Listeneinträge haben display: list-item und erhalten dadurch eine Box auf Blockebene und ein Listenzeichen. Eine Änderung von display in CSS verändert das Verhalten der Box, erhält aber die HTML-Bedeutung des Elements.

Nur Gewünschtes zurücksetzen

Ein CSS-Reset entfernt ausgewählte Standardstile. body { margin: 0; } entfernt den äußeren Abstand. Eine umfassende Regel wie * { margin: 0; padding: 0; } entfernt auch Absatzabstände und Listeneinrückungen, die du anschließend wiederherstellen musst. Ein Normalize-Ansatz behält nützliche Standardstile bei und gleicht Unterschiede aus.

Formularsteuerelementen werden häufig direkt Browserschriften zugewiesen. Damit sie zur Seite passen, schreibe:

button, input, select, textarea {
  font: inherit;
}

Beginne das HTML-Dokument mit <!DOCTYPE html>. Dadurch wird der Standardmodus ausgewählt. Fehlt die Dokumenttypdeklaration, kann der Quirks-Modus ausgelöst werden, in dem älteres Kompatibilitätsverhalten manche Größen und andere CSS-Ergebnisse verändert.

Die auffällige Eigenschaft untersuchen

Klicke ein Element mit der rechten Maustaste an und wähle Untersuchen. Der Stilbereich zeigt passende Regeln einschließlich der als Browserstile gekennzeichneten Regeln. Eine durchgestrichene Deklaration hat einer anderen unterlegen; eine Warnung kann ungültiges CSS anzeigen. Die maßgeblichen Deklarationen werden für jede Eigenschaft einzeln ausgewählt. Eine Regel kann also bei der Farbe unterliegen und dennoch den Innenabstand liefern.

Der Bereich für berechnete Stile zeigt die endgültigen Eigenschaftswerte sowie Inhalt, Innenabstand, Rahmen und Außenabstand des Boxmodells. Hat eine Überschrift einen unerwarteten Abstand, untersuche ihren Außenabstand, bevor du einem anderen Element Innenabstand hinzufügst. Teste eine Änderung direkt in den Entwicklerwerkzeugen und übertrage die funktionierende Regel dann in dein Stylesheet: Änderungen in der Untersuchung verschwinden beim Neuladen.

Wenn ein Stil nicht funktioniert, hilft diese Reihenfolge: Prüfe, ob das Stylesheet geladen wurde, der Selektor zutrifft, die Deklaration gültig ist, sie sich durchsetzt und die Eigenschaft diese Art von Box beeinflusst. Auch ein gültiges width: 200px legt die Größe eines gewöhnlichen Inline-span nicht fest.

Ein Selektor beantwortet eine praktische Frage: Welche Elemente sollen diese Deklarationen erhalten? Beginne mit dem einfachsten Selektor, der die gewünschte Rolle beschreibt. Eine Klasse lässt sich für viele Elemente wiederverwenden, ohne den Stil an eine bestimmte Stelle der Seite zu binden.

Namen und Attribute auswählen

Ein Typselektor ist ein Elementname. Ein Klassenselektor beginnt mit einem Punkt; ein ID-Selektor beginnt mit #. Das Zeichen gehört zum CSS-Selektor, nicht zum HTML-Attributwert. Schreibe <p class="warning">, nicht <p class=".warning">.

Ein Element kann mehrere durch Leerzeichen getrennte Klassen haben. Sowohl <p class="warning"> als auch <div class="box warning"> passen zu .warning. Eine ID muss innerhalb einer Seite eindeutig sein. Ihre hohe Spezifität macht ID-basierte Stile außerdem schwerer überschreibbar. Daher sind Klassen meist das wichtigste Werkzeug für wiederverwendbare Stile.

Verwende Namen, die eine Rolle beschreiben, etwa .error-message oder .product-card. Ein Name wie .red-text wird irreführend, wenn das Design auf eine andere Farbe wechselt. Bei Klassennamen wird zwischen Groß- und Kleinschreibung unterschieden: .Warning und .warning sind verschieden. Beginnt ein Name mit einer Ziffer, muss diese in einem CSS-Selektor mit einer Escape-Sequenz geschrieben werden. Mit .three-columns vermeidest du die ungültige Form .3-columns ohne Escape-Sequenz.

Mehrere Bedingungen für ein Element festlegen

Direkt aneinandergeschriebene Selektoren bilden einen zusammengesetzten Selektor. Dasselbe Element muss alle Teile erfüllen. p.intro trifft auf Absätze mit der Klasse intro zu. .card.featured trifft auf ein Element mit beiden Klassen zu.

<p class="note important">Doors open at 19:00.</p>
<p class="note">Bring your ticket.</p>

.note { color: #333333; }
.important { font-weight: bold; }
p.note.important { border-left: 4px solid crimson; }

Ermittle zuerst, worauf die Selektoren zutreffen. Beide Absätze haben note und erhalten daher dunkelgrauen Text. Nur der erste hat important und wird deshalb als Einziger fett. Der zusammengesetzte Selektor fügt demselben ersten Absatz den linken Rahmen hinzu, weil er ein p mit beiden Klassen ist. Ein zusätzliches umschließendes Element ist nicht nötig.

Ein Leerzeichen ändert die Auswahl: p .intro wählt ein Element mit der Klasse intro innerhalb eines Absatzes aus. Es wählt nicht den Absatz selbst aus. Schreibe die Teile direkt zusammen, wenn sie dasselbe Element beschreiben.

Einen Deklarationsblock gemeinsam nutzen

Ein Komma erzeugt eine Selektorliste:

h1, h2, h3 { font-family: Georgia, serif; }

Jeder Selektor trifft unabhängig auf seine Überschriftenebene zu. Ohne die Kommas würde h1 h2 h3 ein h3 innerhalb eines h2 innerhalb eines h1 auswählen.

Ein ungültiger Selektor in einer gewöhnlichen Selektorliste kann die gesamte Regel ungültig machen. h1, h2..title, h3 gestaltet keine dieser Überschriften, weil der doppelte Punkt ungültig ist. Scheint eine gemeinsame Regel zu fehlen, prüfe jeden Selektor in der Liste, nicht nur den für das untersuchte Element.

Manche Gestaltungsbedingungen sind bereits in HTML-Attributen vorhanden. Andere hängen davon ab, was Leser gerade tun oder wo ein Element unter seinen Geschwisterelementen steht. CSS kann diese Bedingungen erkennen, ohne für jede eine Klasse hinzuzufügen.

Ein Attribut oder seinen Wert auswählen

Attributselektoren verwenden eckige Klammern. [alt] trifft zu, wenn ein Attribut vorhanden ist, selbst wenn sein Wert leer ist. input[type="email"] verlangt den exakten Attributwert.

Ergänze i vor der schließenden Klammer, um die Groß- und Kleinschreibung zu ignorieren, wie in a[href$=".pdf" i]. Der Selektor erfasst dann auch einen Link, der auf .PDF endet. Die Suche nach einem ganzen Wort verhindert, dass note versehentlich auf ein längeres Klassenwort wie notebook zutrifft.

Einen Zustand oder eine Position auswählen

Eine Pseudoklasse verwendet einen Doppelpunkt: :hover, :focus, :checked oder :disabled. :focus-visible wählt ein fokussiertes Element aus, wenn der Browser entscheidet, dass ein sichtbarer Indikator nötig ist, häufig bei der Tastaturnavigation.

Ein Link kann zugleich besucht sein und sich unter dem Zeiger befinden. Schreibe bei konkurrierenden Regeln mit derselben Spezifität die Linkzustände in dieser Reihenfolge: :link, :visited, :focus, :hover, :active. Andernfalls würde sich bei einem besuchten Link eine spätere Regel für die Farbe besuchter Links gegen eine frühere Regel für die Farbe beim Überfahren durchsetzen. Zum Schutz der Privatsphäre beschränken Browser :visited auf bestimmte Farbänderungen; die Strichstärke lässt sich damit nicht festlegen und Transparenz kann den Besuchsverlauf nicht offenlegen.

Strukturelle Pseudoklassen zählen Geschwisterelemente. :first-child bezeichnet das erste Kindelement seines Elternelements. In <article><h2>News</h2><p>Update</p></article> trifft p:first-child auf nichts zu. p:first-of-type trifft dagegen auf diesen Absatz zu.

:nth-child(3) wählt das dritte Kindelement aus. odd wählt die Positionen 1, 3, 5; even wählt 2, 4, 6. Beginne bei :nth-child(3n+1) mit n = 0, dann 1, 2 und 3: Die passenden Positionen sind 1, 4, 7 und 10. li:not(:last-child) schließt den letzten Eintrag aus und eignet sich daher für Trennlinien nur zwischen Einträgen.

Einen Teil gestalten oder einen Hinweis hinzufügen

Ein Pseudoelement verwendet zwei Doppelpunkte. ::first-line und ::first-letter gestalten Textteile; ::marker gestaltet Listenzeichen, ::placeholder den Hinweis eines Feldes und ::selection markierten Text. Die älteren Formen mit einem Doppelpunkt für before, after, first-line und first-letter funktionieren weiterhin.

.required::after {
  content: " *";
  color: crimson;
}

::after erzeugt Inhalt innerhalb des ausgewählten Elements nach dessen vorhandenem Inhalt. ::before erzeugt ihn davor. Beide brauchen einen content-Wert; selbst content: "" erzeugt eine dekorative Box. Wesentlicher Text gehört ins HTML, wo er tatsächlicher Dokumentinhalt bleibt. Verwende diese Pseudoelemente für Dekoration oder kleine Hinweise, da sich generierter Text nicht so zuverlässig auswählen oder kopieren lässt wie HTML-Text.

HTML-Elemente bilden einen Baum. Ein Element direkt innerhalb eines anderen ist dessen Kindelement; jedes darin verschachtelte Element ist ein Nachfahrenelement. Elemente mit demselben Elternelement sind Geschwisterelemente. Ein Kombinator verbindet Selektoren über eine dieser Beziehungen.

Der Beziehung zum Zielelement folgen

Der äußerste rechte Teil benennt das Element, das die Deklarationen erhält. h2 + p gestaltet den Absatz, nicht die Überschrift. Beide Geschwisterkombinatoren suchen unter den Geschwisterelementen nach vorn; keiner wählt ein Elternelement oder ein vorheriges Geschwisterelement aus.

Eine verschachtelte Liste nachvollziehen

<ul class="menu">
  <li>Guides</li>
  <li>Topics
    <ul>
      <li>Typography</li>
    </ul>
  </li>
</ul>

.menu li trifft auf alle drei Listeneinträge zu, weil alle drei Nachfahrenelemente der äußeren Liste sind. .menu > li trifft nur auf „Guides“ und „Topics“ zu: Ihr Elternelement ist die Liste mit der Klasse menu. Das Elternelement von „Typography“ ist das innere ul, das diese Klasse nicht trägt.

Dieser Unterschied ist wichtig, wenn Einträge der obersten Ebene einen großen Innenabstand brauchen, verschachtelte Einträge aber kompakte Abstände. Ein Nachfahrenselektor erreicht jede Tiefe, sofern keine weitere Bedingung die Auswahl einschränkt.

Nachfolgende Geschwisterelemente nachvollziehen

<article>
  <h2>Opening hours</h2>
  <p>Visit in the morning.</p>
  <aside>Closed on holidays.</aside>
  <p>Booking is optional.</p>
</article>

h2 + p trifft auf den Absatz mit dem Hinweis zum Besuch am Vormittag zu. Der Selektor überspringt das aside nicht, um einen weiteren Absatz zu finden. h2 ~ p trifft auf beide Absätze zu, weil beide auf die Überschrift folgen und dasselbe Elternelement haben. Läge ein Absatz innerhalb des aside, wäre er kein Geschwisterelement der Überschrift und würde deshalb auf keinen der beiden Selektoren passen.

Beziehungen kombinieren, ohne zu viel auszuwählen

.sidebar > ul a:hover trifft auf Links unter dem Zeiger an beliebiger Stelle innerhalb eines ul zu, dessen direktes Elternelement die Klasse sidebar hat. Lies von rechts: ein Link unter dem Zeiger; innerhalb einer Liste; diese Liste direkt innerhalb der Seitenleiste. Das Leerzeichen erlaubt Zwischenelemente zwischen der Liste und dem Link.

Kombinatoren erhöhen die Spezifität nicht. Die Element-, Klassen-, ID- und anderen Selektorteile tun das weiterhin. Lange Ketten können Regeln daher schwerer wartbar machen, obwohl die Beziehungszeichen keine Punkte beitragen: Eine Änderung der HTML-Verschachtelung kann dazu führen, dass sie nicht mehr zutreffen. Eine aussagekräftige Klasse am Zielelement, etwa .menu-link, beschreibt eine wiederverwendbare Rolle oft klarer.

Wenn eine Regel nicht zutrifft, untersuche den tatsächlichen Baum, statt sichtbare Abstände zu zählen. Zwei Elemente können auf dem Bildschirm nebeneinander erscheinen und im HTML unterschiedliche Elternelemente haben. Kommentare und Leerraum zählen für diese Kombinatoren nicht als Geschwisterelemente.

Die Kaskade wählt für jede Eigenschaft jedes Elements eine maßgebliche Deklaration aus. Sie wählt nicht eine ganze Regel und verwirft alle anderen. Bei p { color: gray; font-size: 18px; } und .lead { color: black; } kann ein Absatz mit der Klasse lead seine Farbe aus der Klassenregel und seine Größe aus der Typregel erhalten.

In der richtigen Reihenfolge vergleichen

Entferne zuerst Deklarationen, die nicht gelten: Ihre Selektoren müssen zutreffen und alle Bedingungen erfüllt sein. Vergleiche dann Herkunft und Wichtigkeit einschließlich der Priorität der Kaskadenebene. Normale Inline-Stile des Autors haben Vorrang vor normalen Regeln in Autoren-Stylesheets. Bleiben Deklarationen bei diesen früheren Schritten gleichauf, vergleiche die Spezifität; bei weiterem Gleichstand entscheidet die Reihenfolge im Quelltext.

Bei zwei gleichrangigen .button-Regeln, die unterschiedliche Hintergrundfarben festlegen, entscheidet die Reihenfolge: Die spätere gewinnt. Auch später im HTML eingebundene Stylesheets stehen bei diesen Gleichständen später. Dass eine Datei schneller über das Netzwerk ankommt, macht sie in der Kaskade nicht später.

Wichtigkeit verstehen, bevor du sie ergänzt

Eine Inline-Deklaration wie style="color: purple;" setzt sich gegen normale Selektoren in Autoren-Stylesheets durch, auch gegen Selektoren mit IDs. Eine Deklaration mit !important in einem Autoren-Stylesheet kann sich gegen diese normale Inline-Deklaration durchsetzen.

<p class="note" style="color: purple;">Check the time.</p>

p { color: gray !important; }
.note { color: blue; }

Der Absatz ist grau. Die Wichtigkeit wird vor der Selektorspezifität und dem Vorteil normaler Inline-Stile verglichen. Hat auch die Inline-Farbe !important, gewinnt diese wichtige Inline-Deklaration gegen die wichtige Regel im Autoren-Stylesheet.

Für wichtige Deklarationen kehrt sich die Priorität der Herkünfte um: Wichtige Browserdeklarationen haben Vorrang vor wichtigen Benutzerdeklarationen, die wiederum Vorrang vor wichtigen Autorendeklarationen haben. Das schützt Regeln, die Leser oder Browser durchsetzen müssen. Innerhalb einer Herkunft stehen Inline- und Ebenenpriorität weiterhin vor Spezifität und Quelltextreihenfolge.

Wer !important für jeden Konflikt einsetzt, macht das Überschreiben zunehmend schwer. Bevorzuge einen einfacheren Selektor oder eine bewusste Reihenfolge. Das Überschreiben von Drittanbieterregeln, die du nicht bearbeiten kannst, kann eine wichtige Deklaration rechtfertigen; sie sollte eine überlegte Ausnahme sein.

Regeln in Kaskadenebenen gruppieren

@layer reset, base, components;
@layer base {
  p { margin: 0 0 1rem; }
}

Dies deklariert die Reihenfolge der Ebenen vor ihren Regeln. Bei normalen Deklarationen setzen sich spätere Ebenen unabhängig von der Selektorspezifität gegen frühere durch. Normale Regeln außerhalb jeder Ebene setzen sich gegen normale Regeln innerhalb von Ebenen durch. Eine Komponentenregel mit niedriger Spezifität kann daher eine Basisregel mit hoher Spezifität überschreiben, ohne IDs hinzuzufügen.

Bei wichtigen Deklarationen kehrt sich diese Ebenenreihenfolge um: Frühere Ebenen setzen sich gegen spätere durch und wichtige Deklarationen innerhalb von Ebenen gegen wichtige Deklarationen außerhalb von Ebenen. Diese Umkehr erhält wichtige Schutzregeln in grundlegenden Ebenen. Ermittle bei einem Konflikt zuerst die maßgebliche Herkunft, Wichtigkeit und Ebenengruppe, bevor du Selektorteile zählst.

Die Spezifität misst das Gewicht, mit dem ein Selektor Elemente auswählt. Vergleiche sie nur bei Deklarationen, die in den früheren Schritten der Kaskade einschließlich Herkunft, Wichtigkeit, Ebenen- und Inline-Priorität noch gleichauf liegen.

Drei Spalten zählen

Schreibe die Spezifität als ID-CLASS-TYPE, zum Beispiel 0-1-1.

Der Universalselektor * und Kombinatoren tragen nichts bei. Zähle bei a[href^="https"]:focus keine IDs, zwei CLASS-Teile (das Attribut und :focus) und einen TYPE-Teil (a). Das Ergebnis ist 0-2-1.

Weitere Beispiele: .nav a ergibt 0-1-1; ul li a:hover ergibt 0-1-3; #main .card > h2 ergibt 1-1-1; article p::first-line ergibt 0-0-3. Ein Pseudoelement zählt zu den Typen, obwohl sein Name mit Doppelpunkten beginnt.

Von links vergleichen

Vergleiche zuerst die IDs. Bei Gleichstand vergleiche CLASS; herrscht auch dort Gleichstand, vergleiche TYPE. Nur bei gleichen Tripeln entscheidet die Quelltextreihenfolge. Es handelt sich um getrennte Anzahlen, nicht um Ziffern einer Dezimalzahl: 0-11-0 unterliegt weiterhin 1-0-0. Zusätzliche Klassen lassen sich nicht zu einer ID übertragen.

<nav id="site-nav">
  <a class="active" href="/">Home</a>
</nav>

#site-nav a { color: white; }
nav a.active { color: orange; }
.active { color: yellow; }

Angenommen, dies sind normale Deklarationen in derselben Autorenebene. Ihre Werte sind 1-0-1, 0-1-2 und 0-1-0. Die erste gewinnt, der Link ist also weiß. Ihre ID-Spalte entscheidet den Vergleich, bevor die Anzahl der Klassen oder Typen eine Rolle spielt.

#site-nav .active würde mit 1-1-0 gewinnen, aber ein klassenbasiertes Design lässt sich leichter erweitern: .site-nav a kann den Basisstil liefern und .site-nav .active den aktiven Link ändern. So bleibt die Spezifität niedrig und recht gleichmäßig.

Die funktionalen Ausnahmen kennen

:is(), :not() und :has() tragen für die Funktion selbst kein Gewicht bei. Ihr spezifischstes Argument liefert das Gewicht. Daher ergibt li:not(.done) den Wert 0-1-1 und :is(#intro, p) a den Wert 1-0-1. Zähle den spezifischsten Selektor in der Argumentliste, nicht den, der dem Element optisch am nächsten steht.

:where() und alles darin tragen immer null bei. :where(#main) p ergibt daher 0-0-1. Das ist nützlich für Standardstile, die sich leicht überschreiben lassen sollen.

Der Abstand zu einem Vorfahrenelement zählt nicht. body h1 und html h1 ergeben beide 0-0-2, sodass bei ihrem Gleichstand eine spätere Deklaration gewinnt. Inline-Stile werden vor der Selektorspezifität behandelt und !important gehört zur Wichtigkeit. Keines von beiden ist ein weiterer gewöhnlicher Selektorteil, der zum Tripel addiert wird.

Durch Vererbung kann ein Kindelement einen Wert von seinem Elternelement erhalten, wenn die Eigenschaft normalerweise vererbt wird und keine Deklaration dem Kindelement einen anderen Wert zuweist. Deshalb kann eine einzige body-Regel Textfarbe und Schriftart für einen großen Teil einer Seite festlegen.

Vererbte Texteigenschaften von Boxeinstellungen unterscheiden

Die meisten Texteigenschaften werden vererbt: color, Schrifteigenschaften, line-height, letter-spacing, text-align und text-transform. Listenstile und visibility werden ebenfalls vererbt. Boxeigenschaften wie Außenabstand, Innenabstand, Rahmen, Breite, Höhe, Hintergründe, display und box-sizing werden nicht vererbt.

body { color: #222222; font-family: Georgia, serif; }
h1, h2 { font-family: Arial, sans-serif; }
footer { color: #666666; }

Gewöhnlicher Fließtext erscheint dunkelgrau in Georgia. Überschriften erhalten ihre direkt zugewiesene Schriftfamilie und behalten die vererbte Farbe. Der Text im Fußbereich erbt Georgia, während seine Farbe dort geändert wird.

Ein transparenter Hintergrund des Kindelements lässt den Hintergrund des Elternelements durchscheinen; das bedeutet nicht, dass das Kindelement die Hintergrundfarbe geerbt hat. Ebenso erhalten Kindelemente einer umrahmten Box nicht automatisch eigene Rahmen.

Direkte Zuweisungen setzen sich gegen vererbte Werte durch

Bei #content { color: red; } und p { color: blue; } ist ein Absatz innerhalb des Inhaltsbereichs blau. Die Spezifität der ID konkurriert nicht mit der Absatzregel, weil die Deklarationen auf unterschiedliche Elemente zielen. Dem Absatz ist bereits direkt eine Farbe zugewiesen, sodass er das vererbte Rot nicht benötigt.

Kindelemente erben im Allgemeinen berechnete Werte. Hat ein Abschnitt font-size: 20px und sein Kindelement font-size: 0.8em, ergibt sich für dieses Kindelement 16px. Ein Absatz darin erbt 16px; er multipliziert nicht erneut mit 0.8. Eine einheitenlose Zeilenhöhe ist nützlich, weil der vererbte Wert ein Faktor für die eigene Schriftgröße jedes Kindelements bleibt.

Die Bedeutung des Zurücksetzens wählen

Bei Autoren-CSS lässt revert die Gestaltung aus der Benutzer- oder Browserherkunft zum Zuge kommen. Der Unterschied ist bei einem div relevant: display: initial ergibt den Anfangswert inline der Eigenschaft, während display: revert die übliche Browserdarstellung block wiederherstellt. Ein Anfangswert gehört zur CSS-Eigenschaft; ein Browserstandard kann vom HTML-Element abhängen.

inherit funktioniert auch bei einer Eigenschaft, die normalerweise nicht vererbt wird, etwa border: inherit. button, input { font: inherit; } ersetzt die direkt zugewiesenen Schriftarten der Steuerelemente durch die Schrift ihres Elternelements. all: unset setzt fast jede Eigenschaft zugleich zurück und entfernt damit auch nützliches eingebautes Aussehen.

Eine scheinbare Ausnahme ist eine Unterstreichung. text-decoration wird nicht vererbt, aber die Unterstreichung eines Elternelements wird durch seine Inline-Nachfahrenelemente gezeichnet. text-decoration: none auf einem verschachtelten span kann die Linie des Elternelements nicht entfernen. Entferne sie vom Elternelement und wende sie nur auf den Text an, der sie tragen soll.

color legt die Textfarbe fest. Auch Hintergründe, Rahmen, Konturen, Textdekorationen und Schatten akzeptieren Farbwerte. Dieselbe Farbe lässt sich in mehreren Formen angeben; wähle eine Schreibweise, die die beabsichtigte Änderung leicht verständlich macht.

Namen und hexadezimale Kanäle lesen

CSS kennt etwa 150 benannte Farben, darunter navy, tomato und rebeccapurple. Namen sind für schnelle Versuche praktisch, ihre alltägliche Bedeutung kann aber überraschen: green ist #008000, während leuchtendes reines Grün lime oder #00ff00 ist. Genaue Werte beseitigen diese Unsicherheit.

Eine sechsstellige hexadezimale Farbangabe hat drei Kanalpaare: Rot, Grün und Blau. Jedes Paar reicht von 00 bis ff, entsprechend 0 bis 255. Überall null ergibt Schwarz; überall der Höchstwert ergibt Weiß. Gleiche Paare erzeugen ein Grau, wie in #808080.

Dreistellige Hexadezimalangaben verdoppeln jede Ziffer: #f0a wird zu #ff00aa. Es werden keine Nullen ergänzt. Eine Farbe wie #1e90ff lässt sich nicht verkürzen, weil nicht jedes Paar seine Ziffer wiederholt. Große und kleine Hexadezimalbuchstaben bedeuten dieselben Werte.

Um ein Paar umzurechnen, multipliziere seine erste Ziffer mit 16 und addiere die zweite. Die Buchstaben a bis f stehen für 10 bis 15. Bei #1e90ff ergibt 1e den Wert 30, 90 den Wert 144 und ff den Wert 255. Die entsprechende RGB-Schreibweise ist rgb(30 144 255). Älterer Code kann Kommas oder rgba() verwenden; diese Formen funktionieren weiterhin.

Farbton oder Transparenz beschreiben

hsl() gibt Farbton, Sättigung und Helligkeit an. Der Farbton ist ein Winkel: 0 oder 360 ist Rot, 120 Grün und 240 Blau. Die Sättigung reicht von Grau bei 0 % bis zur vollen Farbe bei 100 %. Die Helligkeit reicht von Schwarz bei 0 % bis Weiß bei 100 %. Ein reiner Farbton hat 100 % Sättigung und 50 % Helligkeit, wie in hsl(0 100% 50%). Änderst du nur die Helligkeit, entstehen verwandte dunkle und blasse Varianten.

Ein Alphawert folgt auf einen Schrägstrich: rgb(0 0 0 / 0.6) ist Schwarz mit 60 % Deckkraft. Null ist vollständig transparent und eins vollständig deckend. Achtstellige Hexadezimalangaben ergänzen ein Alphapaar: #00000080 enthält 128 von 255, also etwa 50 % als Alphawert. transparent ist vollständig transparent.

.notice {
  color: white;
  background-color: rgb(0 0 0 / 0.6);
}

Hier ist nur der Hintergrund teilweise transparent. opacity: 0.6 würde dagegen das ganze Element einschließlich Text und Kindelementen transparent machen. Dieser Unterschied ist wichtig, wenn du deckenden, lesbaren Text auf einer getönten Fläche möchtest.

Farbe wiederverwenden und das Ergebnis prüfen

currentColor bezeichnet die eigene Textfarbe des Elements. Bei color: #0055aa; border: 2px solid currentColor; folgt der Rahmen der Textfarbe. Änderst du die Textfarbe, ändert sich auch dieser Rahmen, ohne dass du einen Farbwert wiederholen musst.

WCAG 2.2 Stufe AA verlangt mindestens 4,5:1 Kontrast für normalen Text und 3:1 für großen Text, etwa 24px oder etwa 18,5px bei Fettschrift. #767676 auf Weiß erreicht etwa 4,54:1; #999999 auf Weiß erreicht etwa 2,85:1 und verfehlt beide Schwellenwerte. Prüfe das tatsächliche Vordergrund-Hintergrund-Paar einschließlich der Wirkung von Transparenz mit einem Kontrastprüfer oder den Farbwerkzeugen des Browsers.

Eine Länge verbindet eine Zahl mit einer Einheit, etwa 16px oder 1.5rem. Dazwischen steht kein Leerzeichen. Eine Breite ungleich null braucht eine Einheit: width: 300; ist ungültig. Bei null kann die Einheit entfallen. Manche Eigenschaften erwarten ausdrücklich reine Zahlen, darunter line-height: 1.5, opacity: 0.8 und font-weight: 700.

Die Einheit ihrer Bezugsgröße zuordnen

Ein CSS-Pixel ist nicht unbedingt ein physischer Bildpunkt. Bildschirme mit hoher Pixeldichte können für ein CSS-Pixel mehrere Gerätepixel verwenden. Zu den festen Einheitenbeziehungen gehören 1in = 96px = 2,54cm und 1pt = 1/72in. Damit entsprechen 12pt genau 16px und 1cm ungefähr 37,8px. Diese Umrechnungen garantieren nicht auf jedem Bildschirm ein physisches Maß.

Schriftbezogene Werte berechnen

Angenommen, ein Elternelement hat eine Schriftgröße von 16px und sein Kindelement hat font-size: 1.25em; padding: 2em;. Berechne zuerst die Schriftgröße: Das 1,25-Fache von 16px ergibt 20px. Der Innenabstand verwendet dann die eigene Größe des Kindelements, sodass 2 mal 20px auf jeder Seite 40px ergeben.

Verschachtelte em-Schriftgrößen können sich vervielfachen. Bei li { font-size: 1.25em; } ergeben drei verschachtelte Ebenen ausgehend von 16px die Größen 20px, 25px und 31,25px. 1.25rem ergibt dagegen auf jeder Ebene 20px, wenn das Wurzelelement 16px hat.

Lässt du die Größe des Wurzelelements auf dem Browserstandard oder legst sie als Prozentangabe fest, reagiert relative Textgröße darauf, wenn Leser diesen Standard ändern. Ein fester Wert html { font-size: 16px; } überschreibt diese Einstellung. Ein praktisches Muster ist rem für die Schriftgröße und em für den Innenabstand einer Schaltfläche, sodass ihr Abstand mit ihrem eigenen Text wächst.

Prozentangaben und den Viewport prüfen

Die Eigenschaft bestimmt die Bezugsgröße einer Prozentangabe. Ein umschließender Block liefert eine Bezugsgröße für die Boxgröße; in diesen Beispielen im normalen Dokumentfluss ist das meist der Inhaltsbereich des Elternelements. Ein Kindelement mit width: 40% in einem 600px breiten umschließenden Block ist vor einem möglichen Innenabstand oder Rahmen im content-box-Modell 240px breit. font-size: 150% verwendet die Schriftgröße des Elternelements. Selbst prozentuale obere und untere Innen- und Außenabstände beziehen sich auf die Breite des umschließenden Blocks, nicht auf seine Höhe.

1vw ist 1 % der Viewport-Breite; 1vh ist 1 % der Viewport-Höhe. In einem Viewport mit 1280 mal 800 CSS-Pixeln sind 50vw gleich 640px und 10vh gleich 80px. 100vw kann die Breite der Scrollleiste einschließen und horizontalen Überlauf erzeugen, wo 100% des Elternelements passen würden.

max-width: 65ch gibt einer Textspalte eine schriftbezogene Breite. Das ist ein ungefährer Anhaltspunkt für die Leselänge und keine Zusage, dass jede Zeile genau 65 Zeichen hat.

Einheiten mit einer Berechnung kombinieren

width: calc(100% - 40px); zieht einen festen Betrag von einer relativen Größe ab. Setze Leerzeichen um + und -; calc(100%-40px) ist ungültig. Browser berechnen schriftbezogene Längen in Pixeln, während Prozentangaben zur Containergröße bei der Layoutberechnung aufgelöst werden. Die Entwicklerwerkzeuge zeigen die resultierenden Größen, sodass du sowohl die Bezugsgröße als auch die Rechnung prüfen kannst.

Von innen nach außen hat eine Box Inhalt, Innenabstand, Rahmen und Außenabstand. Der Inhalt enthält Text, Bilder oder Kindelemente. Der Innenabstand schafft Platz um diesen Inhalt. Der Rahmen umgibt den Innenabstand; der Außenabstand trennt die Box einschließlich Rahmen von ihren Nachbarn.

Ein Hintergrund füllt Inhalt und Innenabstand und reicht bis unter den Rahmen, färbt aber nie den Außenabstand. Verwende Innenabstand, wenn der Platz Teil einer farbigen Karte sein soll. Verwende Außenabstand für Platz außerhalb. Außenabstände können negativ sein; Innenabstände nicht.

Die Kurzschreibweisen für Abstände lesen

margin, padding und border-width akzeptieren ein bis vier Werte:

Die Reihenfolge bei vier Werten verläuft von oben im Uhrzeigersinn. Verwende Einzeleigenschaften wie padding-left, um nach der Kurzschreibweise nur eine Seite zu ändern. Lies den zweiten Wert einer Form mit zwei Werten nicht als unten: Er legt beide horizontalen Seiten fest.

Die Inhaltsbox im Standardmodell berechnen

.card {
  width: 300px;
  padding: 20px;
  border: 5px solid;
  margin: 10px;
}

Der Anfangswert von box-sizing ist content-box. Die angegebene Breite von 300px umfasst nur den Inhalt. Addiere zweimal 20px Innenabstand und zweimal 5px Rahmen: Die Box einschließlich Rahmen ist 350px breit. Addiere die beiden Außenabstände von je 10px, um 370px horizontalen Platz zu erhalten.

Die Höhe funktioniert bei ausdrücklicher Größenangabe genauso, aber Text braucht oft eine Box, die wachsen kann. Lässt du height: auto stehen, vermeidest du, veränderlichen Inhalt in einer festen Höhe einzuschließen.

Innenabstand und Rahmen in die Breite einbeziehen

Mit box-sizing: border-box schließt dieselbe angegebene Breite Innenabstand und Rahmen ein. Die Box einschließlich Rahmen bleibt 300px breit; ziehe 40px Innenabstand und 10px Rahmen ab, um einen Inhaltsbereich von 250px zu erhalten. Außenabstände bleiben außerhalb und ergeben 320px horizontalen Platz.

Ein verbreiteter CSS-Reset wendet dieses Modell auf Elemente und ihre generierten Teile an:

*, *::before, *::after { box-sizing: border-box; }

box-sizing wird nicht automatisch vererbt, daher wählt die Regel die Boxen direkt aus.

An einem Kindelement mit voller Breite lässt sich der Unterschied gut erkennen. In einem 600px breiten Container ergibt width: 100%; padding: 0 20px; bei Größenberechnung mit content-box eine Box einschließlich Rahmen von 640px, noch ohne einen Rahmen. Bei Größenberechnung mit border-box schließt dieselbe angegebene Breite von 600px den Innenabstand ein und passt in den Container.

Inhalt passend unterbringen

min-height legt eine untere Schranke fest und erlaubt zugleich Wachstum. max-width: 800px lässt einen Block mit automatischer Breite in einem schmalen Container schrumpfen und verhindert zugleich, dass er breiter als 800px wird.

Überschreitet Inhalt eine feste Box, steuert overflow das Ergebnis: visible lässt ihn herausragen, hidden schneidet ihn ab, scroll fordert Scrollleisten an und auto ermöglicht bei Bedarf das Scrollen. pre { overflow: auto; } gibt einer langen Codezeile einen eigenen scrollbaren Bereich. Abschneiden ist eine schlechte Lösung für Text, den Leser noch brauchen; prüfe zuerst, ob die feste Größe nötig ist.

Vergleiche mit dem Boxdiagramm im Bereich für berechnete Stile die Werte des Browsers für Inhalt, Innenabstand, Rahmen und Außenabstand mit deiner Rechnung.

Der Anzeigetyp bestimmt, wie sich eine Box in ihre Umgebung einfügt. Ein Block beginnt normalerweise eine neue Zeile und füllt bei automatischer Breite den verfügbaren Platz. Eine gewöhnliche Inlinebox fließt innerhalb von Text und richtet ihre Größe nach ihrem Inhalt. Eine Inline-Blockbox behält die Inline-Position bei und akzeptiert zugleich ausdrücklich angegebene Maße.

Das benötigte Verhalten wählen

Bei gewöhnlichen Inline-Elementen wie span und a haben obere und untere Außenabstände keine Wirkung. Vertikale Innenabstände und Rahmen werden gezeichnet, schieben benachbarte Zeilen aber nicht auseinander und können sie daher überdecken. Horizontale Innenabstände, Rahmen und Außenabstände nehmen dagegen Platz entlang der Zeile ein.

nav a {
  display: inline-block;
  padding: 8px 16px;
}

Diese Links bleiben in einer Zeile, während ihre Boxen mit Innenabstand vertikalen Platz reservieren. display: block würde jedem Link eine eigene Zeile geben. Bilder sind ein besonderer Inline-Fall: Sie akzeptieren Breite und Höhe. Ihre standardmäßige Ausrichtung an der Grundlinie kann darunter eine kleine Lücke für die Unterlängen von Buchstaben lassen; img { display: block; } entfernt diese Lücke.

display: none entfernt die Box und ihren Platz und sorgt dafür, dass Screenreader sie nicht vorlesen. visibility: hidden blendet sie aus und erhält dabei ihren Platz.

Eine Box oder ihren Inhalt zentrieren

.page {
  max-width: 960px;
  margin: 0 auto;
}

In einem breiteren Container wächst der Block nur bis 960px und die beiden horizontalen automatischen Außenabstände teilen den verbleibenden Platz gleichmäßig auf. Bei einem Block, der den Container ausfüllt, bleibt kein horizontaler Platz zum Aufteilen. Automatische Außenabstände zentrieren keine gewöhnliche Inlinebox und vertikale automatische Außenabstände im normalen Blockfluss werden zu null aufgelöst.

text-align: center erfüllt eine andere Aufgabe: Es zentriert Inline-Inhalt innerhalb eines Blocks. Eine zentrierte Absatzbox kann weiterhin linksbündigen Text haben; ein Absatz über die volle Breite kann zentrierten Text haben, ohne zu einer schmaleren zentrierten Box zu werden.

Zusammenfallende vertikale Außenabstände erkennen

Im normalen Blockfluss können angrenzende obere und untere Außenabstände zusammenfallen. Zwei positive Außenabstände werden zum größeren der beiden. Auf eine Überschrift mit 24px unterem Außenabstand folgt ein Absatz mit 16px oberem Außenabstand: Die Lücke beträgt 24px, nicht 40px. Horizontale Außenabstände fallen nicht zusammen.

Kombiniere bei positiven und negativen Außenabständen den größten positiven mit dem stärksten negativen: 20px und −8px ergeben 12px. Sind alle negativ, setzt sich der stärkste negative durch. Bei einer leeren Box ohne trennenden Inhalt, Höhe, Rahmen oder Innenabstand können der eigene obere und untere Außenabstand zusammenfallen.

Der obere Außenabstand eines ersten Kindelements kann auch mit dem seines Elternelements zusammenfallen, wenn kein Rahmen, Innenabstand oder vorheriger Inhalt sie trennt. Der Platz erscheint dann außerhalb des Hintergrunds des Elternelements. Ergänze am Elternelement Innenabstand oder einen Rahmen oder entferne den oberen Außenabstand des Kindelements. Unter ähnlichen Bedingungen kann der untere Außenabstand eines letzten Kindelements zusammenfallen; eine Höhe oder Mindesthöhe des Elternelements kann dies am unteren Rand verhindern.

Bei Inline-Blockboxen fallen Außenabstände nicht zusammen, ebenso wenig bei Flex- und Grid-Elementen sowie bei Boxen mit Float oder absoluter Positionierung. Ein einfaches Muster für Textabstände setzt obere Außenabstände auf null und verwendet untere Außenabstände sowie Innenabstand für Platz innerhalb von Containern.

Die Wahl einer Schriftart ist eine Präferenz mit einem Plan für den Rückfall. Auf Geräten sind unterschiedliche Schriftarten installiert, und eine heruntergeladene Schriftart kann später als der Text eintreffen. Eine Schriftartenliste hält die Seite lesbar und erhält dabei einen passenden Stil.

Eine Schriftartenliste erstellen

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
}

Der Browser versucht die Familiennamen der Reihe nach und verwendet eine verfügbare Schriftart. Setze Namen mit Leerzeichen in Anführungszeichen. Lass generische Schriftfamilien ohne Anführungszeichen: "sans-serif" verlangt eine Schriftart mit genau diesem Namen; sans-serif verlangt vom Browser eine passende generische Schriftart.

Zu den generischen Auswahlmöglichkeiten gehören serif, sans-serif, monospace, cursive, fantasy und system-ui. Die letzte verwendet die Schrift der Benutzeroberfläche des Systems. Häufig als websicher bezeichnete Schriftarten wie Arial, Georgia und Verdana sind verbreitet, aber nicht garantiert. Eine generische Rückfalloption gehört trotzdem ans Ende.

font-size akzeptiert Längen, Prozentangaben und Schlüsselwörter für Größen. Bei 16px für das Wurzelelement ergibt 1rem 16px und 2.5rem 40px. Relative Größen können den Einstellungen der Leser folgen.

Strichstärke, Stil und Kurzschreibweise sorgfältig festlegen

font-weight: normal entspricht 400; bold entspricht 700. Werte wie 300 und 600 fordern andere Strichstärken an, wenn die Schriftart sie bereitstellt. Fehlt eine angeforderte Strichstärke, wählt der Browser eine verfügbare oder erzeugt möglicherweise eine künstliche Fettschrift. Sind nur 400 und 700 geladen, wird bei einer Anforderung von 300 die Stärke 400 verwendet. bolder und lighter beziehen sich auf das Elternelement.

font-style: italic fordert einen kursiven Schriftschnitt an; normal entfernt diesen Stil. Die Kurzschreibweise font braucht sowohl Größe als auch Schriftfamilie:

blockquote {
  font: italic 700 1.125rem/1.6 Georgia, serif;
}

Optionaler Stil, Variante und Strichstärke stehen vor der Größe. Ein Schrägstrich fügt die Zeilenhöhe an die Größe an; die Schriftfamilie steht zuletzt. Fehlt die Größe oder Schriftfamilie, ist die Kurzschreibweise ungültig. Andere ausgelassene Schrifteinstellungen werden zurückgesetzt: font: 1rem Arial, sans-serif; setzt eine zuvor festgelegte fette Strichstärke auf normal zurück.

Eine Schriftdatei laden

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
body { font-family: "Inter", Arial, sans-serif; }

@font-face weist einer Datei einen CSS-Familiennamen zu. Verwende diesen deklarierten Namen in der Schriftartenliste, nicht den Dateinamen. Relative Dateipfade beginnen am Speicherort des Stylesheets. WOFF2 ist ein komprimiertes Format, das aktuelle Browser unterstützen.

Statische Schriftarten brauchen im Allgemeinen separate Dateien und Regeln für jede Strichstärke und jeden Stil. Variable Schriften können einen Bereich von Strichstärken in einer Datei enthalten. Lade die Dateien, die das Design tatsächlich verwendet. font-display: swap zeigt sofort eine Ersatzschrift an und ersetzt sie, sobald der Webfont verfügbar ist.

Ein Schriftartendienst kann einen HTML-Link und die Deklaration der Schriftfamilie bereitstellen; die Bereitstellung auf dem eigenen Server vermeidet eine Schriftanfrage an einen Drittanbieterserver. Prüfe, ob die Schriftlizenz die Verwendung auf Websites erlaubt. Sieht die Schrift falsch aus, untersuche die dargestellte Schrift und die Dateianfrage. Ein falsch geschriebener CSS-Familienname führt ohne Fehlermeldung zu einer Ersatzschrift. Lesbarer Text allein zeigt daher nicht, dass die gewünschte Schrift geladen wurde.

Textgestaltung muss bei Änderungen von Größe, Inhalt und Eingabemethode funktionieren. Beginne mit Zeilenabstand und lesbaren Breiten und ergänze dann Details für Listen und Links, die Lesern die Funktionsweise des Inhalts zeigen.

Die Zeilenhöhe jeder Schriftgröße folgen lassen

Verwende eine einheitenlose Zeilenhöhe wie line-height: 1.5. Bei Fließtext mit 16px erzeugt sie Zeilen mit 24px Höhe. Kindelemente erben die Zahl, sodass eine Überschrift mit 32px Zeilen mit 48px Höhe erhält. Ein Wert von 1.5em oder 150% am Elternelement wird dort dagegen zu 24px berechnet. Ein Kindelement kann diese feste Zeilenhöhe von 24px erben, selbst wenn sein eigener Text größer ist. Der Standardwert normal hängt von der Schrift ab und liegt häufig bei etwa 1,2.

body { font: 1.125rem/1.6 Georgia, serif; color: #222222; }
h1 { font: 700 2.25rem/1.2 Arial, sans-serif; }
p { max-width: 65ch; }

Bei 16px für das Wurzelelement ist der Fließtext 18px groß und hat eine Zeilenhöhe von 28,8px; die Überschrift ist 36px groß und hat eine Zeilenhöhe von 43,2px. Die Begrenzung der Absätze verhindert sehr lange Zeilen auf einem breiten Bildschirm.

text-align positioniert Inline-Inhalt innerhalb eines Blocks. Zu den Werten gehören left, right, center, justify, start und end; start und end folgen der Schreibrichtung. Die Eigenschaft verschiebt den Block selbst nicht. Blocksatz in schmalen Spalten kann große Lücken zwischen Wörtern erzeugen.

Darstellung ändern, ohne Text umzuschreiben

text-transform kann Wörter in Großbuchstaben, Kleinbuchstaben oder mit großem Anfangsbuchstaben anzeigen, ohne den HTML-Text zu ändern. letter-spacing, word-spacing und text-indent steuern verschiedene Arten von Abständen. text-shadow: 1px 1px 2px rgb(0 0 0 / 0.5); gibt horizontalen Versatz, vertikalen Versatz, Unschärfe und Farbe an.

text-decoration fügt Unterstreichungen, Überstreichungen oder Durchstreichungen hinzu. Die Eigenschaft kann auch Stil und Farbe festlegen, wie in underline wavy crimson. Stärke und Abstand der Unterstreichung erlauben eine genauere Einstellung. Leser erwarten bei unterstrichenem Text einen Link; verwende dieses Merkmal entsprechend.

Listen ohne unbeabsichtigte Einrückung gestalten

list-style-type wählt Listenzeichen wie disc, square, decimal oder lower-alpha. list-style-position: outside hält Listenzeichen außerhalb des Textblocks; inside setzt sie in die erste Zeile, sodass umgebrochene Zeilen unter dem Listenzeichen beginnen können. list-style-image stellt ein Bild als Listenzeichen bereit und li::marker kann allein das Listenzeichen färben.

Für eine einfache Navigationsliste verwende .menu { list-style: none; margin: 0; padding: 0; }. Werden nur die Listenzeichen entfernt, bleibt der standardmäßige Innenabstand der Liste an der Anfangsseite bestehen. list-style: square inside ist eine Kurzschreibweise, die Einstellungen für Listenzeichen kombiniert.

Links während der Bedienung sichtbar halten

Ordne Zustandsregeln gleicher Spezifität als Link, besucht, Fokus, Hover, aktiv. Ein Link kann zugleich besucht sein und sich unter dem Zeiger befinden; die Quelltextreihenfolge entscheidet zwischen ihren konkurrierenden Farbdeklarationen. :active bezeichnet den Zustand während der Aktivierung, nicht die aktuelle Seite.

Sorge dafür, dass Links an mehr als nur ihrer Farbe erkennbar sind, im Fließtext üblicherweise durch eine Unterstreichung. Gib dem Tastaturfokus einen deutlichen Indikator:

a:focus-visible {
  outline: 3px solid #f2a900;
  outline-offset: 2px;
}

Entferne die Fokus-Kontur nicht, es sei denn, ein anderer sichtbarer Fokusstil ersetzt sie. Eine Kontur nimmt im Boxmodell keinen Platz ein, sodass dieser Hinweis den umgebenden Text nicht verschiebt.

Ein Hintergrund liegt hinter dem Inhalt einer Box. Seine Farbe füllt Inhalt und Innenabstand und reicht bis unter den Rahmen; der Außenabstand bleibt transparent. Ein Bild wird über der Hintergrundfarbe gezeichnet, sodass eine Farbe eine verlässliche Fläche bieten kann, während das Bild lädt.

Den Pfad vom Stylesheet aus auflösen

.hero {
  background-color: #1a2b3c;
  background-image: url("../images/hero.jpg");
}

Liegt das CSS in css/styles.css und das Bild im Ordner images auf der obersten Ebene der Website, führt .. aus css heraus, bevor images betreten wird. Eine CSS-Bild-URL beginnt bei der CSS-Datei, anders als der Stylesheet-Link, der bei der HTML-Datei beginnt. Prüfe die Bildanfrage, wenn eine gültige Regel nur ihre Ersatzfarbe anzeigt.

Hintergründe sind Dekoration. Ein Screenreader gibt sie nicht als Bilder aus. Binde ein informatives Bild mit aussagekräftigem Alternativtext in HTML ein. Eine Ersatzfarbe nahe am Hauptfarbton des Bildes hilft außerdem, den Text lesbar zu halten, wenn das Bild langsam lädt oder fehlt.

Wiederholung, Skalierung und Position steuern

Bilder werden zunächst in ihrer natürlichen Größe wiederholt. no-repeat verwendet eine Kopie; repeat-x erzeugt eine Reihe und repeat-y eine Spalte. space verteilt ganze Kacheln mit Abständen, während round die Kacheln so anpasst, dass eine ganze Anzahl hineinpasst.

Bei einer Box von 800px mal 400px und einem quadratischen Bild mit 1000px Seitenlänge skaliert cover das Bild auf ein Quadrat mit 800px Seitenlänge, sodass 400px der Bildhöhe außerhalb der Box liegen. Contain skaliert es auf ein Quadrat mit 400px Seitenlänge; mit no-repeat bleiben 400px der Boxbreite unbedeckt. Contain allein schaltet die Wiederholung nicht aus.

Die Anfangsposition ist oben links. background-position: center zentriert ein Bild; right 20px bottom 10px versetzt es von diesen Rändern. Ein horizontaler Wert steht zuerst. Center zusammen mit cover hält die Mitte sichtbar, wenn ein Zuschnitt nötig ist.

Bilder erzeugen und übereinanderlegen

Ein Farbverlauf ist ein Bild und gehört daher in background-image:

background-image: linear-gradient(to right, #1e90ff, #8a2be2);

Die erste Farbe liegt links und die zweite rechts. Winkel und positionierte Farbstopps erlauben eine genauere Steuerung; radial-gradient(circle, white, steelblue) breitet sich von der Mitte nach außen aus. Ein Farbverlauf in background-color ist ungültig.

Trenne mehrere Bilder durch Kommas; das erste liegt oben. Ein halbtransparenter schwarzer Farbverlauf vor einem Foto kann das Bild abdunkeln, ohne den Text transparent zu machen.

Die Kurzschreibweise bewusst verwenden

background: url("hero.jpg") center / cover no-repeat #1a2b3c; kombiniert Bild, Position, Größe, Wiederholung und Farbe. Die Größe folgt nach einem Schrägstrich auf die Position. Nur die letzte Ebene kann eine Farbe haben. Ausgelassene Hintergrundeinstellungen werden zurückgesetzt, sodass ein späteres background: white; ein vorheriges Bild entfernt.

background-attachment verwendet zunächst scroll und bewegt sich beim Scrollen der Seite mit dem Element. fixed bindet den Hintergrund fest an den Viewport. Prüfe die tatsächliche Box und den Text, nachdem du Dekoration hinzugefügt hast; Skalierung und Zuschnitt sollten keine Informationen verbergen, die Leser brauchen.

Ein Rahmen ist Teil des Boxmodells. Eine Kontur oder ein Schatten wird um die Box gezeichnet, ohne zusätzlichen Platz zu reservieren. Die Wahl zwischen ihnen verändert sowohl das Aussehen als auch das Größenverhalten eines Stils.

Einem Rahmen einen Stil geben

.note {
  border: 1px solid #cccccc;
  border-left: 4px solid crimson;
  padding-left: 12px;
}

Die Kurzschreibweise legt Breite, Stil und Farbe fest; diese Teile können in beliebiger Reihenfolge stehen. Der Rahmenstil ist zunächst none, sodass die Angabe von nur Breite und Farbe keinen sichtbaren Rahmen erzeugt. Zu den Stilen gehören solid, dashed, dotted, double, groove, ridge, inset und outset sowie none und hidden.

Fehlt die Breite, gilt medium, in aktuellen Browsern meist 3px. Fehlt die Farbe, gilt currentColor, entsprechend dem Text des Elements. Seitenkurzschreibweisen wie border-top und Einzeleigenschaften wie border-left-color erlauben eine Ausnahme nach einem allgemeinen Rahmen. Zum Beispiel entfernt border-top: none nach einer Rahmendeklaration für vier Seiten nur die obere Kante.

Bei Größenberechnung mit content-box fügt ein Rahmen von 2px auf jeder Seite jeweils 4px zu Breite und Höhe hinzu. Eine größere Rahmenbreite beim Überfahren mit dem Zeiger kann daher benachbarten Inhalt verschieben. Halte die Rahmenbreite konstant und ändere die Farbe oder verwende eine Kontur als Hinweis, der keinen Platz einnimmt. Bei Größenberechnung mit border-box nimmt ein dickerer Rahmen stattdessen mehr vom Inneren der festgelegten Box ein.

Ecken in vorhersehbarer Reihenfolge abrunden

border-radius: 8px rundet alle Ecken ab, selbst wenn der Rahmen unsichtbar ist. Bei vier Werten lautet die Reihenfolge oben links, oben rechts, unten rechts, unten links. Zwei Werte gelten für gegenüberliegende Eckpaare: der erste für oben links und unten rechts, der zweite für oben rechts und unten links.

border-radius: 50% macht eine quadratische Box kreisförmig und ein Rechteck elliptisch. Ihr eigener Hintergrund wird an dieser abgerundeten Kante abgeschnitten. Der Radius selbst schneidet überlaufende Kindelemente nicht zu; das wird gesondert über den Überlauf entschieden. Der Radius vergrößert die gemessenen Boxmaße nicht.

Eine Fokuslinie oder Tiefe hinzufügen

.link:focus-visible {
  outline: 3px solid navy;
  outline-offset: 2px;
}

Eine Kontur wird außerhalb des Rahmens gezeichnet und nimmt keinen Platz im Layout ein. Ihr Versatz erzeugt einen Abstand zum Rahmen. Sie ist ein nützlicher Fokushinweis, weil sie erscheinen kann, ohne benachbarte Boxen zu verschieben.

box-shadow: 0 2px 6px rgb(0 0 0 / 0.2); ergibt einen horizontalen Versatz von null, einen Versatz von 2px nach unten, 6px Unschärfe und eine halbtransparente schwarze Farbe. Ein optionaler Ausdehnungswert folgt auf die Unschärfe. inset zeichnet den Schatten innen; durch Kommas getrennte Werte fügen mehrere Schatten hinzu. Schatten folgen abgerundeten Ecken und nehmen keinen Platz im Boxmodell ein.

Eine fertige Karte prüfen

Eine Karte mit width: 280px; padding: 16px; border: 1px solid #dddddd; ist bei Größenberechnung mit content-box 314px breit. Addiere zweimal 16px und zweimal 1px zu 280px. Bei Größenberechnung mit border-box bleibt sie 280px breit und lässt 246px für den Inhalt. Ein Eckenradius von 12px und ein weicher Schatten ändern keine der beiden Rechnungen. Sie ändern die gezeichnete Kante, nicht die Maße, mit denen andere Boxen platziert werden.