Grundlegende Informationen zur CSS-Gestaltung

Voraussetzungen

Bevor Sie mit diesem Modul beginnen, sollten Sie eine grundlegende Arbeitsumgebung eingerichtet haben (wie im Abschnitt Installation grundlegender Software beschrieben) und verstehen, wie Sie Dateien erstellen und verwalten (wie im Abschnitt Umgang mit Dateien beschrieben). Sie sollten auch mit HTML vertraut sein (arbeiten Sie unser Modul Inhalte mit HTML strukturieren durch, wenn nicht).

Tutorials und Herausforderungen

Was ist CSS?

CSS ermöglicht Ihnen das Erstellen ansprechender Webseiten, aber wie funktioniert es eigentlich? Dieser Artikel erklärt, was CSS ist, wie die grundlegende Syntax aussieht und wie Ihr Browser CSS auf HTML anwendet, um es zu gestalten.

Einstieg in CSS

In diesem Artikel nehmen wir ein einfaches HTML-Dokument und wenden CSS darauf an, um einige praktische Details der Sprache zu erlernen. Wir werden auch die CSS-Syntax-Funktionen überprüfen, die Sie bisher noch nicht betrachtet haben.

Gestaltung einer Biografie-Seite ^{Herausforderung}

In dieser Herausforderung gestalten Sie eine einfache Biografie-Seite und testen damit einige der Fähigkeiten, die Sie in den letzten Lektionen gelernt haben, einschließlich dem Schreiben von Selektoren, dem Färben von Hintergründen und der Textgestaltung. Wir laden Sie auch ein, einige grundlegende CSS-Funktionen nachzuschlagen, die wir nicht behandelt haben, um Ihre Recherchefähigkeiten zu testen.

Grundlegende CSS-Selektoren

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

Attribut-Selektoren

Wie Sie aus Ihrem HTML-Studium wissen, können Elemente Attribute haben, die zusätzliche Details über das markierte Element liefern. In CSS können Sie Attribut-Selektoren verwenden, um Elemente mit bestimmten Attributen anzusprechen. Diese Lektion zeigt Ihnen, wie Sie diese sehr nützlichen Selektoren verwenden können.

Pseudo-Klassen und Pseudo-Elemente

Die nächsten Selektoren, die wir betrachten werden, werden als Pseudo-Klassen und Pseudo-Elemente bezeichnet. Es gibt viele davon, und sie dienen oft recht spezifischen Zwecken. Sobald Sie wissen, wie man sie verwendet, können Sie durch die unterschiedlichen Typen blättern, um zu sehen, ob es etwas gibt, das für die Aufgabe, die Sie zu erreichen versuchen, nützlich ist.

Kombinatoren

Die letzten Selektoren, die wir uns ansehen werden, 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 Kinder 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 werden wir uns das CSS Box-Modell ansehen. Sie werden ein Verständnis dafür bekommen, wie es funktioniert und die damit verbundene Terminologie.

Umgang mit Konflikten

Das Ziel dieser Lektion ist es, Ihr Verständnis einiger der grundlegendsten Konzepte von CSS zu entwickeln — der Kaskade, Spezifität und Vererbung — die steuern, wie CSS auf HTML angewendet wird und wie Konflikte zwischen Stil-Erklärungen gelöst werden.

Stile einer Blog-Seite korrigieren ^{Herausforderung}

In dieser Herausforderung geben wir Ihnen ein grundlegendes Blog-Seitenbeispiel, das teilweise gestaltet ist. Wir benötigen, dass Sie einige Probleme mit dem vorhandenen CSS beheben und einige Stile hinzufügen, um es zu vervollständigen. Dabei testen wir Ihr Wissen über Selektoren, das Box-Modell und Konflikte/Kaskaden.

Werte und Einheiten

CSS-Regeln enthalten Deklarationen, die 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 uns einige der am häufigsten verwendeten Wertetypen ansehen, was sie sind und wie sie funktionieren.

Elemente in CSS dimensionieren

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

Hintergründe und Rahmen

In dieser Lektion werden wir uns einige kreative Dinge ansehen, die Sie mit CSS-Hintergründen und -Rahmen machen können. Von der Hinzufügung von Farbverläufen, Hintergrundbildern bis hin zu abgerundeten Ecken, Hintergründe und Rahmen sind die Antwort auf viele Stylingfragen in CSS.

Herausforderung: Eine Inhalte-Oberfläche dimensionieren und dekorieren ^{Herausforderung}

In dieser Herausforderung erhalten Sie eine leicht gestaltete Seitenstruktur, die eine Inhalte-Oberfläche rendert, mit einer Überschrift oben und einer Schaltflächenleiste unten. Wir möchten, dass Sie den Anweisungen folgen, um diese zu dimensionieren und zu dekorieren, um ein interessantes Layout zu erstellen. Dabei testen wir Ihr Wissen über CSS-Werte und -Einheiten, Dimensionierung sowie Hintergründe und Rahmen.

Überlaufender Inhalt

Überlauf ist das, was passiert, wenn zu viel Inhalt vorhanden ist, um in eine Elementbox zu passen. In dieser Lektion lernen Sie, wie man Überlauf mit CSS verwaltet.

Bilder, Medien und Formularelemente

In diesem Kapitel betrachten wir, wie bestimmte spezielle Elemente in CSS behandelt werden. Bilder, andere Medien und Formularelemente verhalten sich ein wenig anders als normale Boxen, wenn es darum geht, sie mit CSS zu stilisieren. Zu verstehen, was möglich ist und was nicht, kann einige Frustrationen ersparen, und diese Lektion hebt einige der Hauptaspekte hervor, die Sie wissen müssen.

Tabellen gestalten

Das Gestalten einer HTML-Tabelle ist nicht die glamouröseste Aufgabe der Welt, aber manchmal müssen wir es alle tun. Dieser Artikel erklärt, wie man HTML-Tabellen gut aussehen lassen kann, mit einigen hervorgehobenen spezifischen Techniken zur Tabellengestaltung.

CSS debuggen

Dieser Artikel gibt Ihnen Anleitungen, wie man ein CSS-Problem debuggt, und zeigt Ihnen, wie die in allen modernen Browsern enthaltenen DevTools Ihnen helfen können, herauszufinden, was los ist.

Testen Sie Ihre Fähigkeiten

Sie finden "Testen Sie Ihre Fähigkeiten"-Artikel, die zwischen den Tutorial-Artikeln platziert sind, um zu überprüfen, ob Sie die wichtigsten Informationen behalten haben, bevor Sie weitermachen. Wenn Sie alle miteinander erkunden möchten, finden Sie sie unter Testen Sie Ihre Fähigkeiten: CSS-Styling-Grundlagen.

Zusätzliche Tutorials

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

Erweiterte Styling-Effekte

Dieser Artikel dient als Trickkiste und bietet eine Einführung in einige interessante erweiterte Stylingfunktionen wie Box-Schatten, Mischmodi und Filter.

Kaskadenschichten

Diese Lektion zielt darauf ab, Ihnen Kaskadenschichten vorzustellen, ein fortgeschritteneres Feature, das auf den grundlegenden Konzepten der CSS-Kaskade und CSS-Spezifität aufbaut.

Umgang mit unterschiedlichen 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 unterschiedlichen Richtungen werden Schreibmodi genannt. Wenn Sie in Ihrem Studium vorankommen und beginnen, mit Layouts zu arbeiten, wird Ihnen das Verständnis von Schreibmodi sehr hilfreich sein, weshalb wir sie in diesem Artikel vorstellen werden.

CSS organisieren

Wenn Sie anfangen, 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 werfen wir einen kurzen Blick auf einige Best Practices für das 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.

Siehe auch

HTML und CSS lernen, Scrimba ^{MDN-Lernpartner}

Scrimbas HTML und CSS lernen Kurs lehrt Ihnen HTML und CSS durch den Bau und die Bereitstellung von fünf großartigen Projekten, mit interaktiven Lektionen und Herausforderungen, die von erfahrenen Lehrern unterrichtet werden.

Schreiben Sie Ihre ersten CSS-Zeilen!, Scrimba ^{MDN-Lernpartner}

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

• Übersicht: Kernlernmodule
• Weiter