CSS-Kurs / Eine responsive Website mit HTML und CSS erstellen

Sie können semantisches HTML, gemeinsame CSS-Variablen, Flexbox-Navigation und ein Grid-Kartenlayout kombinieren, um eine kleine responsive Website zu erstellen. Beginnen Sie mit lesbarem Inhalt und einem nutzbaren Layout für schmale Bildschirme, und fügen Sie dann Anpassungen für breitere Bildschirme und sichtbare Interaktionszustände hinzu.

Definieren Sie die Seite und Akzeptanzprüfungen

Entscheiden Sie, welche Inhalte und welches Verhalten die Seite benötigt, bevor Sie das Styling vornehmen. Auf schmalen Bildschirmen bricht die Navigation bei Bedarf um und die Karten bilden eine Spalte. Mehr verfügbarer Platz ermöglicht zwei oder drei Spalten. Begrenzen Sie die Gesamtlesebreite, damit der Text auf breiten Bildschirmen nicht übermäßig lang wird.

Dieses Beispiel ist ein statischer Bildschirm und es gibt keine Links auf der Karte selbst. Das Einführungs-/Kursmenü und die großen Navigationslinks führen zu Abschnitten desselben Dokuments. Um Ihre Liste der tatsächlichen Kurse zu erweitern, geben Sie die verifizierte Post-URL im Kartentitel an. Es ist nicht nötig, unbenutzte Formulare oder unendliche Animationen zu erzwingen, um diese Übung zu vervollständigen.

Dateien vorbereiten und semantisches HTML erstellen

Erstellen Sie index.html und style.css am selben Ort in einem leeren Ordner. Achten Sie beim Erstellen der Datei darauf, dass sie nicht index.html.txt aufgrund der versteckten Erweiterung ist, und speichern Sie sie als UTF-8. Das Link-Tag in index.html verweist auf style.css im selben Ordner. Keine separate Installation oder ein Build ist erforderlich.

learning-site/
  index.html
  style.css

Speichern Sie zuerst den gesamten HTML-Code unten in index.html. Selbst wenn das CSS leer ist, müssen Titel, Link und Karteninhalt der Reihe nach gelesen werden. header ist der Kopfbereich der Seite, nav ist die Navigation, main ist der Hauptinhalt und footer ist die Fußzeile. Platzieren Sie das Studienthema h2 und die Karte h3 unterhalb von h1 im Dokument. Dieses HTML ist ein Beispiel für eine eigenständige Datei, daher ist es von der Seitenstruktur, die direkt an den WordPress-Body angefügt ist, getrennt.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>A Small Learning Site</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <a class="skip-link" href="#main">Skip to main content</a>
  <header class="site-header">
    <div class="container header-inner">
      <p class="site-name">Learning Notes</p>
      <nav aria-label="Main navigation">
        <a href="#intro">About</a><a href="#lessons">Lessons</a>
      </nav>
    </div>
  </header>
  <main id="main" tabindex="-1">
    <section id="intro" class="hero" aria-labelledby="intro-title">
      <div class="container">
        <h1 id="intro-title">Learn to Build Webpages Step by Step</h1>
        <p>Structure content with HTML and adapt its appearance with CSS.</p>
        <a class="button" href="#lessons">Explore the lessons</a>
      </div>
    </section>
    <section id="lessons" class="lessons container" aria-labelledby="lessons-title">
      <h2 id="lessons-title">Learning topics</h2>
      <ul class="card-grid" role="list">
        <li><article class="card"><h3>HTML structure</h3><p>Organize content with headings and paragraphs.</p></article></li>
        <li><article class="card"><h3>CSS styles</h3><p>Adjust colors, fonts, and spacing.</p></article></li>
        <li><article class="card"><h3>Responsive layout</h3><p>Arrange cards to fit the available width.</p></article></li>
      </ul>
    </section>
  </main>
  <footer class="site-footer"><div class="container"><p>Small learning site exercise</p></div></footer>
</body>
</html>

Die Abkürzung zum Haupttext ist mit der ID von main verbunden. tabindex="-1" ermöglicht es main, den Fokus zu erhalten, ohne in die normale Tab-Reihenfolge aufgenommen zu werden. Tippen Sie auf ein Menü oder eine Abkürzung, um zu diesem Abschnitt zu navigieren, und stellen Sie sicher, dass die Tastaturnavigation ab dem Hauptinhalt fortgesetzt wird. Für Zweck und Zusammensetzung der Abkürzung, siehe bitte W3C Text-Abkürzungstechnik.

Gemeinsame Werte und Inhaltsbreite festlegen

Beginnen Sie mit style.css mit folgendem Abschnitt. Das Benennen von Farbvariablen nach ihrer Rolle erleichtert das Ändern der gemeinsamen Akzentfarbe. border-box schließt Padding und Rahmen in die deklarierte Breite ein, was die Größenanpassung vereinfacht. Legen Sie ein Basislayout fest, das wachsenden Inhalt aufnehmen kann, anstatt überall feste Abmessungen zuzuweisen. Bevor Sie gemeinsame Werte ändern, unterscheiden Sie CSS-Variablen: var(), Geltungsbereich, Vererbung und Fallbacks.

/* Shared values and base styles */
:root {
  --ink: #183044;
  --accent: #166b92;
  --surface: #eef6fa;
  --line: #c9dbe4;
  --focus: #164f73;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-family: sans-serif; line-height: 1.6; }
a { color: var(--accent); text-underline-offset: .15em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.container { width: min(100% - 2rem, 68rem); margin-inline: auto; }
.container, .card { overflow-wrap: anywhere; }

Die Containerbreite entspricht dem kleineren Wert aus der verfügbaren Breite minus insgesamt 2rem und 68rem. Bei zentrierter Anordnung bleiben auf schmalen Bildschirmen normalerweise je 1rem links und rechts. Es werden linke und rechte Ränder für schmale Bildschirme sowie eine maximale Breite für breite Bildschirme bereitgestellt. auto für margin-inline zentriert den Bereich. overflow-wrap: anywhere erlaubt es, Adressen oder Bezeichner ohne Leerzeichen bei Bedarf in einer Zeile umzubrechen. Es muss zwischen der Praxis unterschieden werden, die nur die Länge eines allgemeinen Satzes erhöht, und der Praxis, die ein langes Wort hinzufügt.

Wenn Sie zu diesem Zeitpunkt aktualisieren, werden die Farben, die Standardschriftart und die Inhaltsbreite angewendet, aber die Kopfzeilen und Karten werden noch nicht im Detail angeordnet. Wenn sich überhaupt nichts ändert, überprüfen Sie den Dateipfad, bevor Sie den nächsten Abschnitt hinzufügen. Die Konzepte der flüssigen Größe und der maximalen Breite sind mit den Fließende Layouts mit min(), max-width und clamp() verknüpft.

Erstellen Sie Flexbox-Navigation und Fokuspfade

Fügen Sie den folgenden Abschnitt unter Allgemeine Regeln in style.css hinzu: Die Platzierung zwischen dem Site-Namen und dem Menü wird von header-inner verwaltet, und der Abstand innerhalb des Menüs wird von nav verwaltet. Durch die Trennung des Abstands zwischen den beiden Positionen können Sie die Möglichkeit unbeabsichtigter Änderungen des Abstands zwischen den Menülinks beim Ändern des gesamten Header-Abstands verringern. Die grundlegenden Prinzipien der Achsrichtung und der Platzierung von Elementen finden Sie in Flexbox-Grundlagen: Container, Elemente und Achsen.

/* Navigation and header */
.skip-link { position: absolute; left: 1rem; top: -6rem; padding: .5rem; background: white; }
.skip-link:focus { top: 1rem; z-index: 10; }
.site-header { border-bottom: 1px solid var(--line); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem 1.5rem; padding-block: 1rem; }
.site-name { margin: 0; font-weight: 700; }
nav { display: flex; flex-wrap: wrap; gap: 1rem; }

flex-wrap platziert das Element in die nächste Zeile, wenn nicht genügend Platz vorhanden ist. Ein zweizeiliges Menü auf einem schmalen Bildschirm ist kein Fehler. Die Kriterien für die Beurteilung sind, ob es überlappende, abgeschnittene oder nicht anklickbare Links gibt. Um eine sinnvolle Navigationsreihenfolge beizubehalten, wird die Reihenfolge nicht einfach umgekehrt zur Bildschirmreihenfolge.

Der Sprunglink zum Hauptinhalt liegt zunächst oberhalb des sichtbaren Bereichs und wird sichtbar, sobald er den Tastaturfokus erhält. Sie mit display:none zu verstecken, erfüllt nicht denselben Zweck, da sie nicht einmal den Tastaturfokus erhält. Drücken Sie zuerst Tab, um den Sprunglink anzuzeigen, und dann Enter. Prüfen Sie, dass ein weiterer Tab-Tastendruck den großen Link im Einführungsbereich erreicht. Der dunkle Fokusumriss wurde gewählt, um sowohl vor dem weißen als auch dem einleitenden Hintergrund hervorzustechen.

Gestalten Sie die flüssige Einführung und die Link-Zustände

Das Hinzufügen der folgenden Abschnitte vervollständigt den einleitenden Hintergrund, den Titel und die großen Navigationslinks. Die Klammerung der Titelgröße bindet die Minimal-, Gleit- und Maximalwerte. Die Schrift wird nicht unbegrenzt größer, wenn die Breite zunimmt, und die Schriftgrößeinstellung, einschließlich des rem-Werts, wird ebenfalls berücksichtigt. Eine separate Bildschirmprüfung ist erforderlich, um zu sehen, ob es tatsächlich leicht lesbar ist, wenn der Benutzer hineinzommt.

/* Introduction and navigation link */
.hero { padding-block: clamp(3rem, 8vw, 6rem); background: var(--surface); }
.hero h1 { max-width: 18ch; margin-block: 0 1rem;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); line-height: 1.25; }
.hero p { max-width: 50ch; }
.button { display: inline-block; margin-top: .5rem; padding: .7rem 1rem;
  border-radius: .4rem; background: var(--accent); color: white; text-decoration: none;
  transition: background-color 180ms ease; }
.button:hover { background: #104d6a; }

Die Überschrift max-width: 18ch verwendet die Breite des "0"-Glyphen der Schrift; sie garantiert keine 18 Buchstaben pro Zeile. Ihre line-height steuert umgebrochene Überschriftszeilen, während der einleitende Absatz auf 50ch begrenzt ist. Dieses Beispiel verwendet systemeigene Sans-Serif-Schriften und lädt keine externe Schrift herunter.

Der große Navigationslink verwendet ein a-Element, weil er zum Abschnitt mit den Lernthemen im selben Dokument führt. Wenn die Operation den Zustand ändern sollte, ohne die Seite zu bewegen, sollte der Button überprüft werden. Es werden nur Hintergrundfarbübergänge beim Hover verwendet, und keine dekorativen Bewegungen oder Vergrößerungen sind erforderlich. Der Fokusstatus kann durch eine übliche Umrandung bestätigt werden.

Erstellen Sie Grid-Karten, die Inhalte aufnehmen.

Fügen Sie die folgenden Abschnitte hinzu, um Ihre Kurskarte und Fußzeile zu vervollständigen. Entfernen Sie die Standardränder und Aufzählungszeichen der Liste, lassen Sie jedoch die Strukturen ul und li im HTML bestehen. Wenn sich eine Liste mit list-style: none außerhalb von nav befindet, wird sie möglicherweise im Barrierefreiheitsbaum von Safari nicht als Liste erkannt. Im Beispiel gibt ul role="list" an, um die Listenrolle festzulegen. Diese Bedingung ist auch im MDN-Eintrag zur Barrierefreiheitsbeschreibung zu finden. Die Lesereihenfolge von HTML ändert sich nicht durch die Anordnung der Zeilen und Spalten im Grid.

/* Cards and footer */
.lessons { padding-block: 3rem; }
.lessons h2 { margin-block: 0 1.5rem; }
.card-grid { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem; margin: 0; padding: 0; list-style: none; }
.card-grid > li { min-width: 0; }
.card { height: 100%; padding: 1.5rem; border: 1px solid var(--line); border-radius: .5rem; }
.card h3 { margin-block: 0 .75rem; }
.card p { margin-block: 0; }
.site-footer { padding-block: 2rem; border-top: 1px solid var(--line); }
.site-footer p { margin: 0; }

Die automatische Wiederholung mit auto-fit berechnet, wie viele Spalten hineinpassen, und lässt nach der Platzierung leere Wiederholungs-Tracks zusammenfallen, und minmax() bestimmt die Mindestgröße und die erweiterbare Größe jeder Spalte. Der Minimalwert von min(100%, 16rem) bewirkt, dass die Karte auf diese Breite schrumpft, wenn ihr übergeordnetes Element schmaler als 16rem ist. Der freie Platz wird durch 1fr geteilt, und da es drei tatsächliche Karten gibt, entsteht durch eine größere Breite keine vierte. Siehe MDN repeat-Funktion und minmax-Funktion.

Unter der Bedingung, dass die Textgröße auf oberster Ebene 16px beträgt und die verfügbare Seitenbreite der des Ansichtsfensters entspricht, beträgt die minimale Kartenbreite 256px, der Abstand 16px und die gesamten linken und rechten Ränder 32px. Für zwei Spalten benötigen Sie mindestens 560px Platz und für drei Spalten 832px. Da sich die Breite des Übergangs mit der Scrollleiste, der Elternbreite und der Schriftgröße ändert, merken Sie sie sich nicht anhand des Gerätenamens.

Die Höhe einer Karte von 100% ist der Wert, der die Höhe der Listenelemente in derselben Reihe ausfüllt. Es handelt sich nicht um eine feste Pixelhöhe, sodass die Reihen mit wachsender Beschreibung wachsen können. Um zu verhindern, dass lange Wörter die Größe des Grid-Elements verdrängen, setzen Sie die minimale Breite von li auf 0 und verwenden Sie die Zeilenumbruchregeln der Karte.

Ergänzen Sie Bedingungen für breite Ansichten und reduzierte Bewegung

Fügen Sie diesen Abschnitt am Ende von style.css hinzu. Ab einschließlich 64rem ändert sich der Hintergrund der Einführung in einen Farbverlauf. Das Grid bestimmt weiterhin unabhängig die Anzahl der Karten-Spalten; diese Media-Query legt diese Anzahl nicht fest.

/* Conditional adjustments */
@media (min-width: 64rem) {
  .hero { background: linear-gradient(100deg, var(--surface), #fff); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
}

Unter der Bedingung reduzierter Bewegung ändern wir das Scrollen in sofortige Bewegung und entfernen die weichen Übergänge der Hintergrundfarbe. Die Hover-Farbe darf weiterhin sofort wechseln. Zweck und Fokus des Links und seines Inhalts werden beibehalten. Die Anwendung von bedingten Regeln ist mit den Media Queries und inhaltsabhängige Breakpoints verknüpft, und die Bewegungs- und Zugänglichkeitsprüfung ist mit der Anleitung zu Breite, Zoom und Tastatur bei responsivem CSS verbunden.

Führen Sie das komplette Stylesheet aus

Dies ist eine Datei, die alle schrittweise hinzugefügten Regeln kombiniert. Verwenden Sie diese gesamte Datei, um die Reihenfolge Ihres Codes zu überprüfen oder von vorne zu beginnen. Nachdem Sie sie im selben Ordner wie index.html gespeichert haben, öffnen Sie index.html mit einem Browser und aktualisieren Sie sie.

/* Shared values and base styles */
:root {
  --ink: #183044;
  --accent: #166b92;
  --surface: #eef6fa;
  --line: #c9dbe4;
  --focus: #164f73;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-family: sans-serif; line-height: 1.6; }
a { color: var(--accent); text-underline-offset: .15em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.container { width: min(100% - 2rem, 68rem); margin-inline: auto; }
.container, .card { overflow-wrap: anywhere; }

/* Navigation and header */
.skip-link { position: absolute; left: 1rem; top: -6rem; padding: .5rem; background: white; }
.skip-link:focus { top: 1rem; z-index: 10; }
.site-header { border-bottom: 1px solid var(--line); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem 1.5rem; padding-block: 1rem; }
.site-name { margin: 0; font-weight: 700; }
nav { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Introduction and navigation link */
.hero { padding-block: clamp(3rem, 8vw, 6rem); background: var(--surface); }
.hero h1 { max-width: 18ch; margin-block: 0 1rem;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); line-height: 1.25; }
.hero p { max-width: 50ch; }
.button { display: inline-block; margin-top: .5rem; padding: .7rem 1rem;
  border-radius: .4rem; background: var(--accent); color: white; text-decoration: none;
  transition: background-color 180ms ease; }
.button:hover { background: #104d6a; }

/* Cards and footer */
.lessons { padding-block: 3rem; }
.lessons h2 { margin-block: 0 1.5rem; }
.card-grid { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem; margin: 0; padding: 0; list-style: none; }
.card-grid > li { min-width: 0; }
.card { height: 100%; padding: 1.5rem; border: 1px solid var(--line); border-radius: .5rem; }
.card h3 { margin-block: 0 .75rem; }
.card p { margin-block: 0; }
.site-footer { padding-block: 2rem; border-top: 1px solid var(--line); }
.site-footer p { margin: 0; }

/* Conditional adjustments */
@media (min-width: 64rem) {
  .hero { background: linear-gradient(100deg, var(--surface), #fff); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
}

Werte ändern und Probleme diagnostizieren

1. Reduzieren Sie die Bildschirmbreite auf etwa 390px und vergrößern Sie sie dann wieder, wobei der ursprüngliche Wert beibehalten wird. Bei kleinen Breiten sollte es eine Spalte geben, bei großen Breiten zwei oder drei Spalten. Wenn die oben beschriebenen Bedingungen gleich sind, werden auch die Unterschiede zwischen 559px und 560px sowie 831px und 832px verglichen.
2. Ändern Sie nur 16rem des Kartenrasters auf 20rem. Das Hinzufügen weiterer Spalten auf demselben Bildschirm erfordert mehr Platz. Nach Bestätigung auf 16rem zurücksetzen.
3. Ändern Sie nur die 68rem des Containers auf 50rem. Selbst auf größeren Bildschirmen wird die Gesamtbreite des Inhalts schmaler. Nach Bestätigung auf 68rem zurücksetzen.
4. Ändern Sie es auf eine ausreichend dunkle Farbe mit nur einem anderen Akzent. Prüfen Sie, ob sich die Hintergründe von Link und Schaltfläche zusammen ändern, und setzen Sie ihre ursprünglichen Farben wiederher. Der weiße Schaltflächentext und der Fokusindikator sollten auf dem neuen Hintergrund ebenfalls lesbar sein.
5. Strecken Sie eine Kartenbeschreibung auf mehrere Sätze. Achten Sie darauf, dass der Inhalt beim Erhöhen der Höhe nicht abgeschnitten wird und dass die Höhe der Karten in derselben Reihe organisiert ist. Nach der Übung stellen Sie den ursprünglichen Satz wieder her.
6. Fügen Sie eine englische Zeichenfolge ohne Leerzeichen in die Karte ein. Mit overflow-wrap: anywhere kann diese Zeichenfolge innerhalb der Karte umbrechen; ihr Inhalt bleibt unverändert. Das vorübergehende Entfernen dieser Zeilenumbruchregel kann einen Überlauf verursachen. Nach dem Vergleich werden sowohl Regeln als auch Sätze wiederhergestellt.
7. Bewegen Sie sich mit Tab und Shift+Tab und drücken Sie Enter für jeden Link. Sie sollten in der Lage sein, zur Einführung und zu den Studienthemen zu navigieren, ohne eine Maus zu benötigen.
8. Aktivieren oder emulieren Sie reduzierte Bewegung. Die Linknavigation bleibt erhalten; weiches Scrollen und Farb-Transitions entfallen. Nach der Bestätigung die Wiedergabeeinstellungen auf den Standard zurücksetzen.

Prüfen Sie, dass Navigation, Karten, Fokusindikatoren und Absätze lesbar bleiben, wenn der Browser vergrößert oder die Schriftarteinstellungen geändert werden. Das vorübergehende Vergrößern der Schriftgröße von html in den DevTools testet die rem-basierte Größenanpassung, ist jedoch anders als das Browser-Zoom. Eine erfolgreiche Einstellung stellt die Benutzerfreundlichkeit unter allen Zoom- und Textgrößeneinstellungen nicht sicher.

Wählen Sie das problematische Element in den Entwickler-Tools aus, um die tatsächlich berechnete Breite, den Selektor und die Grid-Spalten zu sehen. Anstatt das Problem zu verschleiern, indem Sie alle Zeilenumbrüche erzwingen oder overflow:hidden auf den Body anwenden, beheben Sie zuerst die Größe und den Inhalt des überlaufenden Elements. Indem Sie den Basiszustand, den Änderungszustand und den Wiederherstellungszustand für jede Anforderung überprüfen, können Sie einen Schritt weiter gehen, als nur den fertigen Code zu kopieren, und ihn auch auf andere Inhalte anwenden.