CSS-Bausteine
Dieses Modul baut dort auf, wo CSS erste Schritte aufgehört hat — jetzt, da Sie mit der Sprache und ihrer Syntax vertraut sind und erste Erfahrungen im Umgang damit gemacht haben, ist es an der Zeit, etwas tiefer einzutauchen. Dieses Modul behandelt die Kaskade und Vererbung, alle verfügbaren Selektortypen, Einheiten, Größenanpassung, das Styling von Hintergründen und Rahmen, Debugging und vieles mehr.
Das Ziel hier ist es, Ihnen ein Werkzeugset für das Schreiben von kompetentem CSS bereitzustellen und Ihnen das notwendige theoretische Verständnis zu vermitteln, bevor Sie zu spezifischeren Disziplinen wie Text-Styling und CSS-Layout übergehen.
Voraussetzungen
Bevor Sie mit diesem Modul beginnen, sollten Sie:
- Grundlegende Vertrautheit mit der Nutzung von Computern haben und das Web passiv nutzen können (d.h. es sich nur ansehen und Inhalte konsumieren).
- Eine grundlegende Arbeitsumgebung eingerichtet haben, wie im Abschnitt Installieren grundlegender Software beschrieben, und ein Verständnis für das Erstellen und Verwalten von Dateien besitzen, wie im Abschnitt Umgang mit Dateien beschrieben.
- Grundlegende Vertrautheit mit HTML haben, wie im Modul Einführung in HTML besprochen.
- Ein Verständnis für die Grundlagen von CSS besitzen, wie im Modul CSS erste Schritte besprochen.
Leitfäden
Dieses Modul enthält die folgenden Artikel, die die grundlegendsten Teile der CSS-Sprache abdecken. Unterwegs finden Sie zahlreiche Übungen, um Ihr Verständnis zu testen.
- CSS-Selektoren
-
Es gibt eine Vielzahl von CSS-Selektoren, die eine fein abgestimmte Präzision beim Auswählen von Elementen zum Stylen ermöglichen. In diesem Artikel und dessen Unterartikeln werden wir die verschiedenen Typen im Detail durchgehen und sehen, wie sie funktionieren. Die Unterartikel sind folgende:
- Kaskade, Spezifität und Vererbung
-
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 gelöst werden.
- Kaskadenebenen
-
Diese Lektion soll Sie in Kaskadenebenen einführen, ein fortgeschritteneres Feature, das auf den grundlegenden Konzepten der CSS-Kaskade und CSS-Spezifität aufbaut.
- Das Box-Modell
-
Alles in CSS hat eine Box um sich herum, und das Verständnis dieser Boxen ist der Schlüssel, um Layouts mit CSS erstellen oder Elemente mit anderen Elementen ausrichten zu können. In dieser Lektion werden wir das CSS Box Model richtig betrachten, damit Sie mit einem Verständnis davon, wie es funktioniert, und der damit zusammenhängenden Terminologie auf komplexere Layout-Aufgaben übergehen können.
- Hintergründe und Rahmen
-
In dieser Lektion werden wir uns einige der kreativen Dinge ansehen, die Sie mit CSS-Hintergründen und Rahmen tun können. Von der Hinzufügung von Verläufen, Hintergrundbildern und abgerundeten Ecken sind Hintergründe und Rahmen die Antwort auf viele Fragen des Stylings in CSS.
- Umgang mit verschiedenen Textrichtungen
-
In den letzten Jahren hat sich CSS weiterentwickelt, um die unterschiedliche Direktionalität von Inhalten besser zu unterstützen, einschließlich von rechts nach links, aber auch von oben nach unten (wie Japanisch) — diese unterschiedlichen Direktionalitäten werden als Schreibmodi bezeichnet. Während Sie Ihr Studium fortsetzen und beginnen, mit Layouts zu arbeiten, wird Ihnen ein Verständnis der Schreibmodi sehr hilfreich sein, daher werden wir sie in diesem Artikel vorstellen.
- Überlaufender Inhalt
-
In dieser Lektion werden wir uns ein weiteres wichtiges Konzept in CSS ansehen — Überlauf. Überlauf ist das, was passiert, wenn zu viel Inhalt vorhanden ist, um bequem in eine Box zu passen. In diesem Leitfaden erfahren Sie, was das ist und wie Sie damit umgehen können.
- CSS-Werte und Einheiten
-
Jede in CSS verwendete Eigenschaft hat einen Wert oder einen Satz von Werten, die für diese Eigenschaft zulässig sind. In dieser Lektion werden wir uns einige der gebräuchlichsten Werte und Einheiten ansehen, die verwendet werden.
- Größenanpassung von Elementen in CSS
-
In den bisherigen Lektionen sind Ihnen einige Möglichkeiten begegnet, Elemente auf einer Webseite mit CSS zu dimensionieren. Das Verständnis, wie groß die verschiedenen Features in Ihrem Design sind, ist wichtig, und in dieser Lektion werden wir die verschiedenen Möglichkeiten zusammenfassen, wie Elemente über CSS eine Größe erhalten, und einige Begriffe zur Größenbestimmung definieren, die Ihnen in Zukunft helfen werden.
- 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 in Bezug auf die Möglichkeit, sie mit CSS zu stylen, etwas anders als normale Boxen. 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.
- Styling von Tabellen
-
Das Styling einer HTML-Tabelle ist nicht die glamouröseste Aufgabe der Welt, aber manchmal müssen wir alle es tun. Dieser Artikel bietet einen Leitfaden, um HTML-Tabellen gut aussehen zu lassen, mit einigen spezifischen Tabell-Styling-Techniken im Fokus.
- Erweiterte Styling-Effekte
-
Dieser Artikel dient als eine Art Trickkiste und bietet eine Einführung in einige interessante erweiterte Styling-Features wie Box-Schatten, Blendmodi und Filter.
- Debugging von CSS
-
Manchmal werden Sie bei der Erstellung von CSS auf ein Problem stoßen, bei dem Ihr CSS nicht das tut, was Sie erwarten. Dieser Artikel gibt Ihnen Anleitungen, wie Sie ein CSS-Problem debuggen können, und zeigt Ihnen, wie Ihnen die in allen modernen Browsern enthaltenen DevTools helfen können, herauszufinden, was vor sich geht.
- Organisieren Ihres CSS
-
Wenn Sie anfangen, 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, die es leicht wartbar machen, und einige der Lösungen, die von anderen verwendet werden, um die Wartbarkeit zu verbessern.
Bewertungen
Die folgenden Bewertungen werden Ihr Verständnis des in den obigen Leitfäden behandelten CSS testen.
- Grundlegendes CSS-Verständnis
-
Diese Bewertung testet Ihr Verständnis der grundlegenden Syntax, Selektoren, Spezifität, des Box-Modells und mehr.
- Erstellung von Briefpapier mit Stil
-
Wenn Sie den richtigen Eindruck machen möchten, kann es ein guter Anfang sein, einen Brief auf schönem Briefpapier zu schreiben. In dieser Bewertung fordern wir Sie heraus, eine Online-Vorlage zu erstellen, um einen solchen Look zu erzielen.
- Eine cool aussehende Box
-
Hier können Sie üben, Hintergrund- und Rahmenstyling zu verwenden, um eine auffällige Box zu erstellen.