Grundlagen der CSS-Stilgestaltung

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

Was ist CSS?

CSS ermöglicht es Ihnen, großartig aussehende Webseiten zu erstellen, aber wie funktioniert es unter der Haube? 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 erlernen. Wir werden auch die CSS-Syntaxfunktionen überprüfen, die Sie noch nicht angesehen haben.

Styling einer Biografie-Seite ^{Herausforderung}

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

Grundlegende CSS-Selektoren

In diesem Artikel werden wir einige grundlegende Selektorfundamente 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 zielen. Diese Lektion zeigt Ihnen, wie Sie diese sehr nützlichen Selektoren verwenden.

Pseudo-Klassen und Pseudo-Elemente

Die nächste Auswahl 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 recht spezifischen Zwecken. Sobald Sie wissen, wie man sie benutzt, können Sie die verschiedenen Typen durchgehen, um zu sehen, ob es etwas gibt, das für die Aufgabe, die Sie erreichen möchten, geeignet ist.

Kombinatoren

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

Das Box-Modell

Alles in CSS hat eine Box darum, und das Verständnis dieser Boxen ist entscheidend, um komplexere Layouts mit CSS zu erstellen oder Artikel mit anderen Artikeln auszurichten. In dieser Lektion werden wir das CSS-Boxmodell untersuchen. Sie werden verstehen, wie es funktioniert, und die Terminologie, die sich darauf bezieht.

Konflikte handhaben

Das Ziel dieser Lektion ist es, Ihr Verständnis für einige der grundlegendsten Konzepte von CSS zu entwickeln — die Kaskade, Spezifität und Vererbung — die steuern, 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 sie haben darf. 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 Funktionen Ihres Designs sein werden, ist wichtig. In dieser Lektion werden wir die verschiedenen Methoden zusammenfassen, wie Elemente über CSS eine Größe erhalten, und einige Begriffe über die Größenbestimmung definieren, die Ihnen in Zukunft helfen werden.

Hintergründe und Ränder

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

Überflussinhalt

Überfluss ist das, was passiert, wenn zu viel Inhalt vorhanden ist, um in eine Element-Box zu passen. In dieser Lektion lernen Sie, wie man den Überfluss mit CSS verwaltet.

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 ein wenig anders als reguläre Boxen in Bezug auf Ihre Fähigkeit, sie mit CSS zu stylen. Zu verstehen, was möglich ist und was nicht, kann einige Frustrationen ersparen, und diese Lektion wird einige der wichtigsten Dinge hervorheben, die Sie wissen müssen.

Tabellen gestalten

Die Gestaltung 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 spezifischen Stiltechniken für Tabellen.

Debuggen von CSS

Dieser Artikel gibt Ihnen Anleitung, 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: Grundlagen des CSS-Verständnisses ^{Herausforderung}

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

Herausforderung: Erstellung von schönen Geschäftspapieren ^{Herausforderung}

Wenn Sie den richtigen Eindruck machen wollen, kann es ein wirklich guter Start sein, einen Brief auf schönem Geschäftspapier zu schreiben. In dieser Herausforderung erstellen Sie eine Online-Vorlage, um ein solches Aussehen zu erreichen.

Herausforderung: Eine cool aussehende Box ^{Herausforderung}

In dieser Herausforderung werden Sie etwas mehr Übung darin bekommen, cool aussehende Boxen zu erstellen, indem Sie versuchen, eine auffällige Box zu gestalten.

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

Fortgeschrittene Styling-Effekte

Dieser Artikel gibt Ihnen Anleitung, 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 hat zum Ziel, Sie in Kaskadenschichten einzuführen, eine fortgeschrittenere Funktion, die auf den grundlegenden Konzepten der CSS-Kaskade und CSS-Spezifität aufbaut.

Umgang mit unterschiedlichen Schreibrichtungen

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 unterschiedlichen Richtungen werden Schreibmodi genannt. Während Sie in Ihrem Studium voranschreiten und beginnen, mit Layouts zu arbeiten, wird Ihnen ein Verständnis der Schreibmodi 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 es eine Herausforderung sein kann, eine riesige CSS-Datei zu pflegen. In diesem Artikel werden wir einen kurzen Blick auf einige Best Practices für das Schreiben Ihres CSS werfen, um es leicht wartbar zu machen, und einige der Lösungen, die Sie bei anderen finden werden, die helfen, die Wartbarkeit zu verbessern.

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

Der Kurs "Learn HTML and CSS" von Scrimba lehrt Ihnen HTML und CSS durch den Bau und die Bereitstellung 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