Grundlagen der CSS-Stilgestaltung

Bevor Sie mit diesem Modul starten, sollten Sie eine grundlegende Arbeitsumgebung eingerichtet haben (wie im Abschnitt Installation grundlegender Software beschrieben) und wissen, wie Sie Dateien erstellen und verwalten (wie im Abschnitt Umgang mit Dateien beschrieben). Sie sollten außerdem mit HTML vertraut sein (arbeiten Sie das Modul Inhalte mit HTML strukturieren durch, falls nicht).

Was ist CSS?

CSS ermöglicht es Ihnen, attraktive 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 simples HTML-Dokument nehmen und CSS darauf anwenden, um einige praktische Details der Sprache kennenzulernen. Wir werden auch CSS-Syntaxfunktionen besprechen, die bisher noch nicht betrachtet wurden.

Gestaltung einer Biographieseite ^{Herausforderung}

In dieser Herausforderung gestalten Sie eine einfache Biographie-Seite und testen dabei einige der Fähigkeiten, die Sie in den letzten Lektionen gelernt haben – unter anderem das Schreiben von Selektoren und Textgestaltung.

Grundlegende CSS-Selektoren

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

Attribut-Selektoren

Wie Sie aus Ihrem HTML-Studium wissen, können Elemente Attribute haben, die weitere Details zu dem markierten Element geben. In CSS können Sie Attribut-Selektoren verwenden, um Elemente mit bestimmten Attributen zu targeten. Diese Lektion zeigt Ihnen, wie Sie diese äußerst nützlichen Selektoren verwenden.

Pseudo-Klassen und Pseudo-Elemente

Die nächste Gruppe von Selektoren, die wir betrachten, 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 verwendet, können Sie die verschiedenen Typen durchsehen, um festzustellen, ob etwas für die jeweilige Aufgabe geeignet ist.

Kombinatoren

Die letzten Selektoren, die wir betrachten, werden Kombinatoren genannt. Kombinatoren werden verwendet, um andere Selektoren zu kombinieren, sodass 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 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 erfahren, wie es funktioniert und welche Terminologie dazu gehört.

Konflikte behandeln

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

Größe von Elementen in CSS

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

Hintergründe und Rahmen

In dieser Lektion werfen wir einen Blick auf einige kreative Möglichkeiten, die Sie mit CSS-Hintergründen und Rahmen umsetzen können. Von Farbverläufen, Hintergrundbildern und abgerundeten Ecken bis hin zu Hintergründen und Rahmen sind dies Antworten auf viele Styling-Fragen in CSS.

Überlaufender Inhalt

Überlauf tritt auf, wenn zu viel Inhalt vorhanden ist, um in eine Elementbox zu passen. In dieser Lektion lernen Sie, wie Sie den Überlauf mithilfe von CSS verwalten können.

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

Tabellen gestalten

Das Styling einer HTML-Tabelle gehört nicht zu den glamourösesten Aufgaben, aber manchmal muss es getan werden. Dieser Artikel erklärt, wie man HTML-Tabellen optisch ansprechender gestaltet, und hebt einige spezifische Techniken zur Tabellengestaltung hervor.

CSS debuggen

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

Herausforderung: Grundlagenverständnis CSS ^{Herausforderung}

Diese Herausforderung beinhaltet eine Reihe verwandter Übungen, die abgeschlossen werden müssen, um das endgültige Design zu erstellen – eine Visitenkarte/Gamer-Karte/soziales Medienprofil.

Herausforderung: Elegantes Briefpapier erstellen ^{Herausforderung}

Wenn Sie einen guten Eindruck machen möchten, kann das Schreiben eines Briefes auf schönem, personalisiertem Briefpapier ein guter Anfang sein. In dieser Herausforderung erstellen Sie eine Online-Vorlage, um einen solchen Look zu erzielen.

Herausforderung: Eine coole Box erstellen ^{Herausforderung}

In dieser Herausforderung üben Sie weiter, coole Boxen zu erstellen, indem Sie versuchen, eine auffällige Box zu gestalten.

Diese Tutorials sind nicht Teil des Lernpfades, aber dennoch interessant – Sie können diese als zusätzliche Lernziele betrachten, die Sie optional studieren können, wenn Sie die Hauptartikel abgeschlossen haben.

Erweiterte Stil-Effekte

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

Kaskadenebenen

Diese Lektion zielt darauf ab, Sie in Kaskadenebenen einzuführen, ein fortgeschrittenes Feature, das auf den grundlegenden Konzepten der CSS-Kaskade und CSS-Spezifität aufbaut.

Umgang mit verschiedenen Schreibrichtungen

In den letzten Jahren hat sich CSS weiterentwickelt, um die Unterstützung unterschiedlicher Schreibrichtungen von Inhalten zu verbessern, einschließlich von rechts nach links und auch von oben nach unten (z. B. Japanisch) – diese unterschiedlichen Ausrichtungen werden als Schreibmodi bezeichnet. Während Sie in Ihrem Studium fortschreiten und mit Layouts arbeiten, wird ein Verständnis von Schreibmodi sehr hilfreich sein; daher stellen wir sie in diesem Artikel vor.

CSS organisieren

Wenn Sie beginnen, an größeren Stylesheets und großen Projekten zu arbeiten, werden Sie feststellen, dass das Verwalten einer riesigen CSS-Datei schwierig sein kann. In diesem Artikel werfen wir einen kurzen Blick auf einige Best Practices zur Erstellung Ihres CSS, um es einfach zu pflegen, sowie auf einige der Lösungen, die Sie bei anderen finden können, um die Wartbarkeit zu verbessern.

Lernen Sie HTML und CSS, Scrimba ^{MDN-Partner für Lerninhalte}

Scrimbas HTML und CSS lernen-Kurs lehrt Ihnen HTML und CSS durch fünf spannende Projekte, die Sie aufbauen und bereitstellen, mit Spaß bringenden interaktiven Lektionen und Herausforderungen von kompetenten Lehrkräften.

Schreiben Sie Ihre ersten Zeilen CSS!, Scrimba ^{MDN-Partner für Lerninhalte}

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

• Übersicht: Kern-Lernmodule
• Weiter