CSS Layout

Voraussetzungen

Bevor Sie mit diesem Modul beginnen, sollten Sie mit HTML, den grundlegenden Grundlagen von CSS und der CSS-Textgestaltung vertraut sein.

Tutorials und Herausforderungen

Einführung in CSS-Layout

Diese Lektion fasst einige der CSS-Layout-Funktionen zusammen, die wir in vorherigen Modulen bereits angesprochen haben, wie verschiedene display-Werte, und führt einige der Konzepte ein, auf die wir in diesem Modul eingehen werden. Es behandelt auch ausführlich das Konzept des normalen Flusses.

Floats

Ursprünglich zum Einfügen von Bildern in Textblöcke gedacht, wurde die float-Eigenschaft zu einem der am häufigsten verwendeten Werkzeuge zur Erstellung von Mehrspalten-Layouts auf Webseiten. Mit der Einführung von Flexbox und Grid hat sie nun zu ihrem ursprünglichen Zweck zurückgefunden, wie dieser Artikel erklärt.

Positionierung

Die Positionierung ermöglicht es Ihnen, Elemente aus dem normalen Dokumentenfluss zu nehmen und sie anders zu verhalten, zum Beispiel übereinander zu liegen oder immer an derselben Stelle im Browser-Viewport zu bleiben. Dieser Artikel erklärt die verschiedenen position-Werte und deren Nutzung.

Flexbox

Flexbox ist eine eindimensionale Layoutmethode zur Anordnung von Elementen in Zeilen oder Spalten. Elemente passen sich an, um zusätzlichen Raum zu füllen oder schrumpfen, um in kleinere Räume zu passen. Dieser Artikel erklärt alle Grundlagen.

CSS-Grid-Layout

Das CSS-Grid-Layout ist ein zweidimensionales Layoutsystem für das Web. Es ermöglicht Ihnen, Inhalte in Reihen und Spalten zu organisieren und bietet viele Funktionen, um die Erstellung komplexer Layouts zu vereinfachen. Dieser Artikel wird alles erklären, was Sie wissen müssen, um mit dem Grid-Layout zu beginnen.

Grundlegendes Layoutverständnis ^{Herausforderung}

Diese Herausforderung wird Ihr Wissen über die Layout-Funktionen testen, die wir bisher in diesem Modul behandelt haben, nämlich Flexbox, Floats, Grid und Positionierung. Am Ende haben Sie ein Webseiten-Layout mit einer Vielzahl von Techniken entwickelt.

Responsive Design

Mit dem Auftreten vielfältigerer Bildschirmgrößen auf webfähigen Geräten ist das Konzept des responsiven Webdesigns (RWD) entstanden: ein Satz von Praktiken, der es Webseiten ermöglicht, ihr Layout und Erscheinungsbild an verschiedene Bildschirmbreiten, Auflösungen usw. anzupassen. Es ist eine Idee, die die Art und Weise, wie wir für das Web mit mehreren Geräten entwerfen, verändert hat, und in diesem Artikel helfen wir Ihnen, die wichtigsten Techniken zu verstehen, die Sie kennen müssen, um es zu meistern.

Grundlagen von Media Queries

Die CSS Media Query bietet Ihnen eine Möglichkeit, CSS nur dann anzuwenden, wenn die Browser- und Geräteumgebung den von Ihnen angegebenen Regeln entspricht. Media Queries sind ein wesentlicher Bestandteil des responsiven Webdesigns, da sie es Ihnen ermöglichen, unterschiedliche Layouts je nach Größe des Viewports zu erstellen. In dieser Lektion lernen Sie die in Media Queries verwendete Syntax kennen und verwenden sie in einem interaktiven Beispiel, das zeigt, wie ein einfaches Design responsiv gemacht werden kann.

Testen Sie Ihre Fähigkeiten

Sie finden "Testen Sie Ihre Fähigkeiten"-Artikel zwischen den Tutorial-Artikeln, um zu überprüfen, ob Sie die wichtigsten Informationen behalten haben, bevor Sie fortfahren. Wenn Sie alle gleichzeitig erkunden möchten, finden Sie sie aufgelistet unter Testen Sie Ihre Fähigkeiten: CSS-Layout.

Zusätzliche Tutorials

Diese Tutorials gehören nicht zum Lernpfad, sind aber dennoch interessant — Sie sollten diese als zusätzliche Ziele betrachten, die Sie optional studieren können, wenn Sie die wichtigsten Core-Artikel abgeschlossen haben.

Mehrspalten-Layout

Die Mehrspalten-Layout-Spezifikation bietet Ihnen eine Methode, um Inhalte in Spalten anzuordnen, wie Sie es in einer Zeitung sehen könnten. Dieser Artikel erklärt, wie Sie diese Funktion verwenden.

Praktische Positionierungsbeispiele

Dieser Artikel zeigt, wie man einige realistische Beispiele erstellt, um zu veranschaulichen, welche Dinge Sie mit Positionierung tun können.

Veraltete Layout-Methoden

Rastersysteme sind ein sehr häufiges Merkmal in CSS-Layouts, und vor dem CSS-Grid-Layout wurden sie häufig mit Floats oder anderen Layout-Funktionen implementiert. Man stellt sich das Layout als eine bestimmte Anzahl von Spalten vor (z. B. 4, 6 oder 12) und passt dann die Inhalte in diese imaginären Spalten. In diesem Artikel erforschen wir, wie diese älteren Methoden funktionieren, damit Sie verstehen, wie sie verwendet wurden, wenn Sie an einem älteren Projekt arbeiten.

Unterstützung älterer Browser

Besucher Ihrer Website könnten Benutzer sein, die entweder ältere Browser verwenden oder Browser verwenden, die die von Ihnen implementierten CSS-Funktionen nicht unterstützen. Dies ist ein häufiges Szenario im Web, wo ständig neue Funktionen zu CSS hinzugefügt werden. Browser unterscheiden sich in ihrer Unterstützung für diese Funktionen, da unterschiedliche Browser tendenziell die Implementierung unterschiedlicher Funktionen priorisieren. Dieser Artikel erklärt, wie Sie als Webentwickler moderne Webtechniken nutzen können, um sicherzustellen, dass Ihre Website auch für Nutzer mit älterer Technologie zugänglich bleibt.

Siehe auch

CSS Layout Cookbook

Das CSS Layout Cookbook zielt darauf ab, Rezepte für häufige Layoutmuster zusammenzubringen, die Sie möglicherweise auf Ihren Seiten implementieren müssen. Zusätzlich zur Bereitstellung von Code, den Sie als Ausgangspunkt für Ihre Projekte nutzen können, heben diese Rezepte die verschiedenen Möglichkeiten hervor, wie Layout-Spezifikationen verwendet werden können, und die Entscheidungen, die Sie als Entwickler treffen können.

Flexbox lernen und CSS-Grid lernen ^{MDN-Lernpartner}

Diese Kurse von Scrimba bieten interaktive Lektionen, die Ihnen alles beibringen, was Sie über Flexbox und Grid wissen müssen.

• Übersicht: Kernlernmodule
• Weiter