Grundlagen der CSS-Stilgestaltung

Bevor Sie mit diesem Modul beginnen, sollten Sie eine grundlegende Arbeitsumgebung eingerichtet haben (wie im Installieren von Basis-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 Strukturieren von Inhalten mit HTML Modul durch, wenn nicht).

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 gestalten.

Erste Schritte mit CSS

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

Stilgestaltung einer Biografieseite ^{Herausforderung}

In dieser Herausforderung werden Sie eine einfache Biografieseite gestalten, wobei Sie einige der Fähigkeiten testen, die Sie in den letzten Lektionen gelernt haben, einschließlich dem Schreiben von Selektoren und der Textgestaltung.

Grundlegende CSS-Selektoren

In diesem Artikel werden wir einige grundlegende Selektorfunktionen rekapitulieren, einschließlich der grundlegenden Typ-, Klassen- und ID-Selektoren.

Attributselektoren

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

Pseudoklassen und Pseudoelemente

Die nächste Gruppe von Selektoren, die wir uns ansehen werden, sind die sogenannten Pseudoklassen und Pseudoelemente. Es gibt eine große Anzahl dieser und sie dienen oft ganz 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, die Sie erreichen wollen, funktioniert.

Kombinatoren

Die letzten Selektoren, die wir betrachten werden, sind sogenannte Kombinatoren. Kombinatoren werden verwendet, um andere Selektoren zu kombinieren, um Elemente basierend auf ihrer Position im DOM relativ zu anderen Elementen auszuwählen (z.B. Kind oder Geschwister).

Das Box-Modell

Alles in CSS hat eine Box um sich herum, 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 erhalten ein Verständnis dafür, wie es funktioniert und die Terminologie, die sich darauf bezieht.

Konflikte handhaben

Das Ziel dieser Lektion ist es, Ihr Verständnis einiger der grundlegendsten Konzepte von CSS zu entwickeln — dem Kaskadierung-Prinzip, der Spezifität und der Vererbung — die steuern, wie CSS auf HTML angewandt wird und wie Konflikte zwischen Stildeklarationen gelöst werden.

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 zulässig sind. In dieser Lektion werden wir einige der am häufigsten verwendeten Wertetypen untersuchen, was sie sind und wie sie funktionieren.

Elemente in CSS dimensionieren

Zu verstehen, wie groß die verschiedenen Merkmale in Ihrem Design sein werden, ist wichtig. In dieser Lektion werden wir die verschiedenen Wege zusammenfassen, wie Elemente über CSS eine Größe erhalten, und ein paar Begriffe zur Dimensionierung definieren, die Ihnen in Zukunft helfen werden.

Hintergründe und Ränder

In dieser Lektion werden wir uns einige der kreativen Dinge ansehen, die Sie mit CSS-Hintergründen und -Rändern machen können. Von der Erstellung von Verläufen, Hintergrundbildern und abgerundeten Ecken, Hintergründe und Ränder sind die Antwort auf viele Stilfragen in CSS.

Überlaufender Inhalt

Überlauf tritt auf, wenn zu viel Inhalt vorhanden ist, um in eine Box zu passen. In dieser Lektion lernen Sie, wie Sie Überlauf mit CSS handhaben können.

Bilder, Medien und Formularelemente

In dieser Lektion betrachten wir, wie bestimmte spezielle Elemente in CSS behandelt werden. Bilder, andere Medien und Formularelemente verhalten sich in Bezug auf Ihre Fähigkeit, sie mit CSS zu gestalten, ein wenig anders als reguläre Boxen. Zu verstehen, was möglich ist und was nicht, kann Frustrationen ersparen, und diese Lektion wird einige der Hauptdinge hervorheben, die Sie wissen müssen.

Tabellen stilisieren

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

CSS-Debugging

Dieser Artikel wird Ihnen eine Anleitung geben, wie Sie ein CSS-Problem debuggen können, und Ihnen zeigen, wie die DevTools, die in allen modernen Browsern enthalten sind, Ihnen helfen können herauszufinden, was vor sich geht.

Herausforderung: Fundamentales CSS-Verständnis ^{Herausforderung}

Diese Herausforderung beinhaltet eine Reihe von verwandten Übungen, die abgeschlossen werden müssen, um das endgültige Design zu erstellen — eine Visitenkarte/Spielerkarte/soziales Medienprofil.

Herausforderung: Elegantes Briefpapier erstellen ^{Herausforderung}

Wenn Sie den richtigen Eindruck machen wollen, kann das Schreiben eines Briefs auf schönem Briefpapier ein wirklich guter Anfang sein. In dieser Herausforderung werden Sie eine Online-Vorlage erstellen, um ein solches Aussehen zu erreichen.

Herausforderung: Eine ansprechend aussehende Box ^{Herausforderung}

In dieser Herausforderung können Sie mehr Übung darin erhalten, attraktiv aussehende Boxen zu erstellen, indem Sie versuchen, eine auffällige Box zu erstellen.

Diese Tutorials sind nicht Teil des Lernpfads, aber sie sind dennoch interessant — Sie sollten diese als zusätzliche Ziele betrachten, die optional studiert werden können, wenn Sie mit den Hauptartikeln des Kerns fertig sind.

Erweiterte Styling-Effekte

Dieser Artikel wird Ihnen eine Anleitung geben, wie Sie ein CSS-Problem debuggen können, und Ihnen zeigen, wie die DevTools, die in allen modernen Browsern enthalten sind, Ihnen helfen können herauszufinden, was vor sich geht.

Kaskadierungsschichten

Diese Lektion zielt darauf ab, Sie in kaskadierende Ebenen einzuführen, eine fortgeschrittenere Funktion, die auf den grundlegenden Konzepten der CSS-Kaskade und der CSS-Spezifität aufbaut.

Umgang mit verschiedenen Textrichtungen

In den letzten Jahren hat sich CSS weiterentwickelt, um die unterschiedliche Ausrichtung von Inhalten besser zu unterstützen, einschließlich von rechts nach links, aber auch von oben nach unten (wie Japanisch) — diese unterschiedlichen Ausrichtungen werden als Schreibrichtungen bezeichnet. Da 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 vorstellen.

CSS organisieren

Wenn Sie beginnen, an größeren Stylesheets und großen Projekten zu arbeiten, werden Sie feststellen, dass es eine Herausforderung sein kann, eine riesige CSS-Datei zu pflegen. In diesem Artikel werfen wir einen kurzen Blick auf einige bewährte Methoden zum Schreiben Ihres CSS, um es leicht wartbar zu machen, und einige der Lösungen, die Sie bei anderen finden werden, um die Wartbarkeit zu verbessern.

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

Der Lernen Sie HTML und CSS Kurs von Scrimba lehrt HTML und CSS durch das Erstellen und Bereitstellen von fünf großartigen Projekten, mit unterhaltsamen interaktiven Lektionen und Herausforderungen, die von erfahrenen 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