Grundlagen der CSS-Gestaltung

Voraussetzungen

Bevor Sie mit diesem Modul beginnen, sollten Sie eine grundlegende Arbeitsumgebung eingerichtet haben (wie im Installieren grundlegender Software beschrieben) und verstehen, wie man Dateien erstellt und verwaltet (wie im Umgang mit Dateien beschrieben). Sie sollten auch mit HTML vertraut sein (arbeiten Sie unser Modul Strukturierung von Inhalten mit HTML durch, falls nicht).

Tutorials und Herausforderungen

Was ist CSS?

CSS ermöglicht es Ihnen, großartig aussehende Webseiten zu erstellen, aber wie funktioniert es im Hintergrund? Dieser Artikel erklärt, was CSS ist, wie die grundlegende Syntax aussieht und wie Ihr Browser CSS auf HTML anwendet, um es zu stylen.

Einstieg in CSS

In diesem Artikel werden wir ein einfaches HTML-Dokument nehmen und CSS darauf anwenden, wobei wir einige praktische Details der Sprache kennenlernen. Wir werden auch die CSS-Syntax-Funktionen überprüfen, die Sie noch nicht betrachtet haben.

Gestaltung einer Biografie-Seite ^{Herausforderung}

In dieser Herausforderung werden Sie eine einfache Biografie-Seite gestalten, wobei einige der in den letzten Lektionen erlernten Fähigkeiten getestet werden, einschließlich der Erstellung von Selektoren, dem Färben von Hintergründen und der Textgestaltung. Wir laden Sie auch ein, einige grundlegende CSS-Funktionen nachzuschlagen, die wir nicht behandelt haben, um Ihre Recherchefähigkeiten zu testen.

Grundlegende CSS-Selektoren

In diesem Artikel werden wir einige grundlegende Selektor-Konzepte wiederholen, einschließlich der grundlegenden Typen-, Klassen- und ID-Selektoren.

Attribut-Selektoren

Wie Sie aus Ihrem HTML-Studium wissen, können Elemente Attribute haben, die weitere Details über das markierte Element angeben. In CSS können Sie Attributselektoren verwenden, um Elemente mit bestimmten Attributen zu markieren. Diese Lektion zeigt Ihnen, wie Sie diese sehr nützlichen Selektoren verwenden.

Pseudo-Klassen und Pseudo-Elemente

Die nächste Gruppe von Selektoren, die wir uns ansehen werden, wird als Pseudo-Klassen und Pseudo-Elemente bezeichnet. Es gibt eine große Anzahl davon, und sie dienen oft sehr spezifischen Zwecken. Sobald Sie wissen, wie man sie verwendet, können Sie die verschiedenen Typen durchsehen, um zu sehen, ob es etwas gibt, das für die Aufgabe funktioniert, die Sie zu erreichen versuchen.

Kombinatoren

Die letzten Selektoren, die wir uns ansehen werden, heißen Kombinatoren. Kombinatoren werden verwendet, um andere Selektoren so zu kombinieren, dass wir Elemente basierend auf ihrer Position im DOM relativ zu anderen Elementen auswählen können (z. B. Kind- oder Geschwisterelement).

Das Box-Modell

Alles in CSS hat eine Box um sich, und das Verständnis dieser Boxen ist der Schlüssel, um komplexere Layouts mit CSS zu erstellen oder Elemente mit anderen Elementen auszurichten. In dieser Lektion werfen wir einen Blick auf das CSS Box-Modell. Sie werden verstehen, wie es funktioniert und welche Begriffe sich darauf beziehen.

Konflikte behandeln

Das Ziel dieser Lektion ist es, Ihr Verständnis einiger der grundlegendsten Konzepte von CSS zu entwickeln — der Kaskade, Spezifität und Vererbung — die bestimmen, wie CSS auf HTML angewendet wird und wie Konflikte zwischen Stil-Erklärungen gelöst werden.

Stil einer Blog-Seite korrigieren ^{Herausforderung}

In dieser Herausforderung geben wir Ihnen ein einfaches Blog-Seitenbeispiel, das teilweise gestaltet ist. Wir benötigen, dass Sie einige Probleme mit dem vorhandenen CSS beheben und einige Stile hinzufügen, um es abzuschließen. Dabei werden wir Ihr Wissen über Selektoren, das Box-Modell und Konflikte/Kaskaden testen.

Werte und Einheiten

CSS-Regeln enthalten Deklarationen, die wiederum aus Eigenschaften und Werten bestehen. Jede in CSS verwendete Eigenschaft hat einen Wertetyp, der beschreibt, welche Art von Werten sie haben darf. In dieser Lektion werden wir uns einige der am häufigsten verwendeten Wertetypen ansehen, was sie sind und wie sie funktionieren.

Elemente in CSS dimensionieren

Es ist wichtig zu verstehen, wie groß die verschiedenen Funktionen in Ihrem Design sein werden. In dieser Lektion werden wir die verschiedenen Möglichkeiten zusammenfassen, wie Elemente ihre Größe über CSS erhalten und einige Begriffe zur Dimensionierung definieren, die Ihnen in Zukunft helfen werden.

Hintergründe und Rahmen

In dieser Lektion werden wir uns einige der kreativen Dinge ansehen, die man mit CSS-Hintergründen und Rahmen machen kann. Von der Hinzufügung von Verläufen, Hintergrundbildern und abgerundeten Ecken — Hintergründe und Rahmen sind die Antwort auf viele Styling-Fragen in CSS.

Herausforderung: Größe und Dekoration eines Inhaltsfensters ^{Herausforderung}

In dieser Herausforderung erhalten Sie eine leicht gestaltete Seitenstruktur, die ein Inhaltsfenster rendert, mit einer Überschrift oben und einer Schaltflächenleiste unten. Wir möchten, dass Sie den Anweisungen folgen, um die Größe festzulegen und es zu dekorieren, um ein interessantes Layout zu erzeugen. Dabei testen wir Ihr Wissen über CSS-Werte und -Einheiten, Größenanpassung sowie Hintergründe und Rahmen.

Überlaufende Inhalte

Überlauf ist das, was passiert, wenn zu viel Inhalt vorhanden ist, um in ein Elementfeld zu passen. In dieser Lektion lernen Sie, wie Sie Überlauf mithilfe von CSS verwalten können.

Bilder, Medien und Formularelemente

In dieser Lektion werden wir uns ansehen, wie bestimmte spezielle Elemente in CSS behandelt werden. Bilder, andere Medien und Formularelemente verhalten sich in Bezug auf Ihre Styling-Möglichkeiten mit CSS etwas anders als normale Boxen. Zu verstehen, was möglich ist und was nicht, kann Frustration ersparen, und diese Lektion wird einige der Hauptsachen hervorheben, die Sie wissen müssen.

Tabellen stylen

Das Stylen einer HTML-Tabelle ist nicht die glamouröseste Aufgabe der Welt, aber manchmal müssen wir es alle tun. Dieser Artikel erklärt, wie man HTML-Tabellen gut aussehen lässt, mit einigen spezifischen Tabellen-Styling-Techniken, die hervorgehoben werden.

CSS debuggen

Dieser Artikel gibt Ihnen Anleitungen, wie Sie ein CSS-Problem debuggen können, und zeigt Ihnen, wie die in allen modernen Browsern enthaltenen DevTools Ihnen helfen können, herauszufinden, was vor sich geht.

Testen Sie Ihre Fähigkeiten

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

Zusätzliche Tutorials

Diese Tutorials sind nicht Teil des Lernpfads, aber sie sind dennoch interessant — Sie sollten diese als erweiterte Ziele betrachten, um sie optional zu studieren, wenn Sie mit den Hauptartikeln des Kerns fertig sind.

Erweiterte Stil-Effekte

Dieser Artikel fungiert als eine Sammlung von Tricks und bietet eine Einführung in einige interessante erweiterte Stilfunktionen wie Boxschatten, Mischmodi und Filter.

Kaskadenebenen

Diese Lektion soll Sie in Kaskadenebenen einführen, eine fortgeschrittenere Funktion, die auf den grundlegenden Konzepten der CSS-Kaskade und CSS-Spezifität aufbaut.

Umgang mit verschiedenen Textrichtungen

In den letzten Jahren hat sich CSS weiterentwickelt, um besser verschiedene Inhaltsrichtungen zu unterstützen, einschließlich von rechts nach links, aber auch von oben nach unten (wie Japanisch) — diese unterschiedlichen Richtungen werden als Schreibrichtungen bezeichnet. Während Sie in Ihrem Studium voranschreiten und beginnen, mit Layouts zu arbeiten, wird Ihnen ein Verständnis der Schreibrichtungen sehr hilfreich sein, daher werden wir sie in diesem Artikel einführen.

Organisieren von CSS

Wenn Sie beginnen, an größeren Stylesheets und großen Projekten zu arbeiten, werden Sie feststellen, dass die Wartung einer riesigen CSS-Datei eine Herausforderung sein kann. In diesem Artikel werden wir einen kurzen Blick auf einige bewährte Praktiken werfen, um Ihr CSS so zu schreiben, dass es leicht wartbar ist, und einige der Lösungen betrachten, die andere verwenden, um die Wartbarkeit zu verbessern.

Siehe auch

Lernen Sie HTML und CSS, Scrimba ^{MDN-Lernpartner}

Der Learn HTML and CSS-Kurs von Scrimba lehrt Ihnen HTML und CSS durch den Aufbau und die Bereitstellung von fünf großartigen Projekten, mit unterhaltsamen interaktiven Lektionen und Herausforderungen, die von sachkundigen Lehrern unterrichtet werden.

Schreiben Sie Ihre ersten Zeilen CSS!, Scrimba ^{MDN-Lernpartner}

Diese interaktive Lektion bietet eine nützliche Einführung in die CSS-Syntax.

• Übersicht: Kernlernmodule
• Weiter