Grundlagen der CSS-Gestaltung

Bevor Sie mit diesem Modul beginnen, sollten Sie eine grundlegende Arbeitsumgebung eingerichtet haben (wie im Artikel Installation grundlegender Software beschrieben) und verstehen, wie man Dateien erstellt und verwaltet (wie im Artikel Umgang mit Dateien beschrieben). Sie sollten auch mit HTML vertraut sein (bearbeiten Sie unser Modul Inhalte mit HTML strukturieren, falls nicht).

Was ist CSS?

CSS ermöglicht es Ihnen, ansprechend 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 auf dem Weg lernen. Wir werden auch die CSS-Syntaxelemente überprüfen, die Sie bisher noch nicht gesehen haben.

Stilisierung einer Biografie-Seite ^{Herausforderung}

In dieser Herausforderung werden Sie eine einfache Biografie-Seite gestalten und Ihre Fähigkeiten aus den letzten Lektionen, einschließlich des Schreibens von Selektoren und Textstilisierung, testen.

Grundlegende CSS-Selektoren

In diesem Artikel werden wir einige grundlegende Selektor-Fundamente wiederholen, 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 zum markierten Element liefern. In CSS können Sie Attributselektoren verwenden, um Elemente mit bestimmten Attributen anzusprechen. Diese Lektion zeigt Ihnen, wie Sie diese sehr nützlichen Selektoren verwenden können.

Pseudoklassen und Pseudoelemente

Die nächste Gruppe von Selektoren, die wir betrachten werden, sind Pseudoklassen und Pseudoelemente. Es gibt viele davon, und sie erfüllen oft sehr spezifische Zwecke. 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 möchten, funktioniert.

Kombinatoren

Die letzten Selektoren, die wir uns ansehen werden, heißen Kombinatoren. Kombinatoren werden verwendet, um andere Selektoren in einer Weise zu kombinieren, die es uns erlaubt, Elemente basierend auf ihrer Position im DOM relativ zu anderen Elementen auszuwählen (zum Beispiel Kind oder Geschwister).

Das Box-Modell

Alles in CSS hat einen Rahmen darum, und das Verständnis dieser Rahmen 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 die Terminologie, die sich darauf bezieht.

Konflikte beheben

Das Ziel dieser Lektion ist es, Ihr Verständnis einiger der grundlegendsten Konzepte von CSS zu entwickeln – die Kaskade, die Spezifität und die Vererbung –, die bestimmen, wie CSS auf HTML angewendet 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 ist. In dieser Lektion werfen wir einen Blick auf einige der am häufigsten verwendeten Wertetypen, was sie sind und wie sie funktionieren.

Elemente in CSS dimensionieren

Zu verstehen, wie groß die verschiedenen Features in Ihrem Design sein werden, ist wichtig. In dieser Lektion fassen wir die verschiedenen Möglichkeiten zusammen, wie Elemente über CSS eine Größe erhalten, und definieren einige Begriffe über Größen, die Ihnen in der Zukunft helfen werden.

Hintergründe und Rahmen

In dieser Lektion werfen wir einen Blick auf einige der kreativen Dinge, die Sie mit CSS-Hintergründen und Rahmen tun können. Vom Hinzufügen von Verläufen, Hintergrundbildern und abgerundeten Ecken, Hintergründe und Rahmen sind die Antwort auf viele Styling-Fragen in CSS.

Überlaufender Inhalt

Überlauf ist das, was passiert, wenn zu viel Inhalt in ein Element-Box passt. In dieser Lektion lernen Sie, wie Sie Überlauf mit CSS verwalten.

Bilder, Medien und Formularelemente

In dieser Lektion werfen wir einen Blick darauf, wie bestimmte spezielle Elemente in CSS behandelt werden. Bilder, andere Medien und Formularelemente verhalten sich geringfügig anders als reguläre Boxen in Bezug auf Ihre Fähigkeit, sie mit CSS zu gestalten. Zu verstehen, was möglich ist und was nicht, kann Frustration ersparen, und diese Lektion wird einige der wichtigsten Dinge aufzeigen, die Sie wissen müssen.

Tabellen stilisieren

Eine HTML-Tabelle zu gestalten ist vielleicht nicht die glamouröseste Aufgabe der Welt, aber manchmal muss man es tun. Dieser Artikel erklärt, wie man HTML-Tabellen gut aussehen lässt, wobei einige spezifische Techniken zur Tabellengestaltung hervorgehoben werden.

CSS debuggen

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

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

Diese Herausforderung bietet eine Reihe von zusammenhängenden Übungen, die abgeschlossen werden müssen, um das endgültige Design zu erstellen – eine Visitenkarte/Gamer-Karte/Social-Media-Profil.

Herausforderung: Elegantes Briefpapier erstellen ^{Herausforderung}

Wenn Sie den richtigen Eindruck hinterlassen möchten, kann es ein guter Anfang sein, einen Brief auf schönem Briefpapier zu schreiben. In dieser Herausforderung werden Sie eine Online-Vorlage erstellen, um einen solchen Look zu erreichen.

Herausforderung: Eine cool aussehende Box ^{Herausforderung}

In dieser Herausforderung können Sie Ihre Fähigkeiten im Erstellen cooler Boxen weiter ausüben, indem Sie versuchen, eine auffällige Box zu erstellen.

Diese Tutorials sind nicht Teil des Lernweges, aber dennoch interessant – Sie sollten diese als Stretch-Ziele betrachten, um sie optional zu studieren, wenn Sie mit den Hauptartikeln des Core fertig sind.

Erweiterte Stil-Effekte

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

Kaskadenschichten

Diese Lektion zielt darauf ab, Sie in Kaskadenschichten einzuführen, ein fortgeschrittenes Feature, das 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 Richtung von Inhalten besser zu unterstützen, einschließlich von rechts nach links, aber auch von oben nach unten (wie Japanisch) – diese verschiedenen Richtungen werden als Schreibmodi bezeichnet. Während Sie in Ihrem Studium voranschreiten und anfangen, mit Layouts zu arbeiten, wird es sehr hilfreich sein, ein Verständnis für Schreibmodi zu haben, daher werden wir diese in diesem Artikel vorstellen.

CSS organisieren

Wenn Sie anfangen, größere Stylesheets und große Projekte zu bearbeiten, werden Sie feststellen, dass die Pflege einer riesigen CSS-Datei herausfordernd sein kann. In diesem Artikel werfen wir einen kurzen Blick auf einige bewährte Verfahren zum Schreiben Ihres CSS, um es einfach wartbar zu machen, und auf einige der Lösungen, die von anderen verwendet werden, um die Wartbarkeit zu verbessern.

HTML und CSS lernen, Scrimba ^{MDN Lernpartner}

Scrimbas Kurs HTML und CSS lernen lehrt Ihnen HTML und CSS durch das Erstellen und Bereitstellen von fünf großartigen Projekten, mit unterhaltsamen interaktiven Lektionen und Herausforderungen, die von fachkundigen 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