Grundlagen der CSS-Styling

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

Was ist CSS?

CSS ermöglicht es Ihnen, großartig aussehende Webseiten zu erstellen, aber wie funktioniert das 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.

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 lernen. Wir werden auch die CSS-Syntax-Funktionen überprüfen, die Sie bisher noch nicht betrachtet haben.

Styling einer Biografie-Seite ^{Herausforderung}

In dieser Herausforderung werden Sie eine einfache Biografie-Seite gestalten und einige der Fähigkeiten testen, die Sie in den letzten Lektionen gelernt haben, einschließlich des Schreibens von Selektoren und der Textgestaltung.

Grundlegende CSS-Selektoren

In diesem Artikel werden wir einige Grundlagen der Selektoren wiederholen, einschließlich der grundlegenden Typ-, Klassen- und ID-Selektoren.

Attributselektoren

Wie Sie aus Ihrer HTML-Studie 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 betrachten werden, sind Pseudoklassen und Pseudoelemente. Es gibt eine große Anzahl von ihnen, und sie haben oft ganz spezifische Zwecke. Sobald Sie wissen, wie man sie verwendet, können Sie die verschiedenen Typen durchsuchen, 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 so zu kombinieren, dass wir Elemente basierend auf ihrer Position im DOM relativ zu anderen Elementen auswählen können (zum Beispiel Kind- oder Geschwisterelemente).

Das Box-Modell

Alles in CSS hat eine Box um sich herum, und das Verständnis dieser Boxen ist der Schlüssel, um mit CSS komplexere Layouts zu erstellen oder Elemente an anderen Elementen auszurichten. In dieser Lektion werden wir uns das CSS-Boxmodell Box model ansehen. Sie werden ein Verständnis dafür bekommen, wie es funktioniert und welche Terminologie dazu gehört.

Konflikte handhaben

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 kontrollieren, 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 erlaubt ist. In dieser Lektion werden wir einige der am häufigsten verwendeten Werttypen ansehen, was sie sind und wie sie funktionieren.

Elemente in CSS skalieren

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

Hintergründe und Rahmen

In dieser Lektion werden wir uns einige der kreativen Dinge ansehen, die Sie mit CSS-Hintergründen und Rahmen machen können. Vom Hinzufügen von Verläufen, Hintergrundbildern und abgerundeten Ecken, Hintergründe und Rahmen sind die Antwort auf viele Stylingfragen in CSS.

Überfüllte Inhalte

Überlauf ist das, was passiert, wenn es zu viele Inhalte gibt, um in ein Elementfeld zu passen. In dieser Lektion werden Sie lernen, wie Sie den Überlauf mit 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 im Hinblick auf die Möglichkeit, sie mit CSS zu gestalten, ein wenig anders als normale Boxen. Zu verstehen, was möglich ist und was nicht, kann einige Frustrationen ersparen, und diese Lektion hebt einige der Hauptsachen hervor, die Sie wissen müssen.

Tabellen stylen

Das Styling einer HTML-Tabelle ist nicht der glamouröseste Job 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 Tabellenstilisierung.

CSS debuggen

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

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

Diese Herausforderung bietet eine Reihe zusammenhängender Übungen, die abgeschlossen werden müssen, um das endgültige Design zu erstellen – eine Visitenkarte/Spielerkarte/soziales Medienprofil.

Herausforderung: Stilvolles Briefpapier erstellen ^{Herausforderung}

Wenn Sie den richtigen Eindruck hinterlassen möchten, kann das Schreiben eines Briefes auf schönem Briefpapier ein sehr guter Anfang sein. In dieser Herausforderung werden Sie eine Online-Vorlage erstellen, um solch ein Aussehen zu erzielen.

Herausforderung: Eine cool aussehende Box ^{Herausforderung}

In dieser Herausforderung werden Sie mehr Übung im Erstellen von cool aussehenden Boxen bekommen, indem Sie versuchen, eine auffällige Box zu erstellen.

Diese Tutorials sind nicht Teil des Lernpfads, aber sie sind trotzdem interessant – Sie sollten diese als Stretch-Ziele betrachten, die Sie optional studieren können, wenn Sie mit den Hauptartikeln des Kerns fertig sind.

Erweiterte Stileffekte

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

Kaskadenschichten

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

Textausrichtungen handhaben

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 Richtungen werden als Schreibmodi bezeichnet. Während Sie in Ihrem Studium fortschreiten und beginnen, mit Layout zu arbeiten, wird ein Verständnis der Schreibmodi sehr hilfreich für Sie sein, daher werden wir sie in diesem Artikel einführen.

CSS organisieren

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

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

Der HTML und CSS lernen-Kurs von Scrimba lehrt Ihnen 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 Curriculum-Partner}

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

• Übersicht: Kernlernmodule
• Weiter