MDN wants to learn about developers like you: https://www.surveygizmo.com/s3/5171903/MDN-Learn-Section-Survey-Recruiter-Pathway

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

CSS wird genutzt um Websiten zu stylen und das Layout zu erstellen — um zum Beispiel die Farbe, Größe oder Form Ihres Contents zu ändern, Ihre Inhalte in mehrere Spalten einzuteilen, zu animieren oder mit  anderen dekorativen Features auszustatten. Mit diesem Modul gehen Sie Ihren ersten Schritt auf dem Weg zum CSS-Meister, beginnend mit den Grundlagen der Funktionsweise, einschließlich Selektoren und Properties, dem Schreiben von CSS-Regeln, der Anwendung von CSS auf HTML, dem Festlegen von Länge, Farbe und anderen Eigenschaften in CSS, Kaskaden und Vererbung (cascade und inheritance) und schlussendlich dem Debuggen von CSS.

Vorbereitungen

Vor dem Einstieg in dieses Modul sollten Sie:

  1. grundlegend mit der Computernutzung vertraut sein sowie die mit der passiven Benutzung des WWW (z. B. Webseiten ansehen, den Inhalt erfassen ,...)
  2. über eine grundständige Arbeitsumgebung verfügen (Details unter Notwendige Software installieren) und verstehen, wie man Dateien erstellt und verwaltet, siehe unter Dateien nutzen
  3. über eine grundlegende Vertrautheit mit HTML verfügen, wie besprochen im Einführung in HTML-Modul.

Notiz: Wenn Sie an einem Computer/Tablet/Gerät arbeiten, auf welchem Sie nicht die Möglichkeit haben, eigene Dateien zu erstellen, können Sie die (meisten) Code-Beispiele in einem Online-Editor wie JSBin oder Thimble ausprobieren.

Lerneinheiten

Dieses Modul beinhaltet die nachfolgenden Artikel, die Sie durch die gesamte Basistheorie von CSS tragen werden und Ihnen zahlreiche Gelegenheiten geben, sich und Ihre Fähigkeiten zu testen.

Wie CSS funktioniert
In diesem Modul beginnen wir mir theoretischen Grundlagen, betrachten genauer, was CSS ist, wie der Browser HTML in ein DOM umwandelt, wie CSS auf Teile des DOM angewendet wird, einige grundlegende Syntax-Beispiele und welcher Code im CSS unserer Webseite verwendet wird.
CSS Syntax
Anschließend tauchen wir sehr viel detaillierter in die CSS-Syntax ein. Wir erarbeiten, wie properties (Eigenschaften) und ihre values (Werte) zu declarations (Deklarationen) werden, mehrere Deklarationen gemeinsam declaration blocks (Deklarationsblöcke) bilden und wie schlussendlich Deklarationsblöcke und selectors (Selektoren) zu vollständigen CSS rules (CSS-Regeln) werden. Wir runden den Artikel ab, indem wir auf andere CSS-Syntaxeigenschaften blicken wie Kommentare und Leerraum.
Selektoren
Selektoren werden im vorigen Artikel genannt, aber in diesem Guide gehen wir mehr ins Detail und zeigen, welche Selektor-Typen verfügbar sind und wie sie funktionieren.
CSS Values und Units
Es gibt viele CSS-Properties, deren Werte bearbeitet werden können, von numerischen Farbwerten bis hin zu Funktionen, die eine bestimmte Aufgabe erfüllen (beispielsweise ein Hintergrundbild einbetten oder ein Element rotieren lassen. Manche dieser Eigenschaften benötigen die Angabe von konkreten Einheiten — soll Ihre Box 30 Pixel breit sein, oder 30cm oder 30ems? In diesem Guide betrachten wir die eher üblichen Values wie Längen, Farben und einfache Funktionen, erkunden aber auch weniger alltägliche Einheiten wie Grad und sogar einheitslose numerische Werte.
Kaskaden und Vererbung
CSS hat zwei verschiedene, aber zusammenhängende Systeme, um Konflikte zwischen Selektoren aufzulösen (verschiedene Selektoren wählen dieselben Elemente; welcher gewinnt und wird angewendet?) und ineinander verschachtelte Elemente aufzulösen (für einige Style-Eigenschaften der Eltern ergibt es Sinn, sie auf die Kinder zu vererben; für andere nicht). Dieser Artikel betrachtet beide Systeme hinreichend detailliert, um hilfreich aber nicht überfordernd zu sein.
Das Box-Model
Das CSS box model ist die Grundlage von Layout im Web — jedes Element ist als rechteckige Box repräsentiert, wobei der content (Inhalt) der Box, padding (Innenabstand), border (Umrandung) und margin (Außenabstand) wie Schichten einer Zwiebel um jedes Element liegen. Während ein Browser eine Webseite rendert, arbeitet er aus, welche Styles auf den Inhalt jeder Box angewendet werden, wie groß die umgebenden Zwiebelschichten sind und wo die Boxen im Verhältnis zueinander positioniert sind. Um zu verstehen, wie CSS-Layouts erstellt werden, müeen Sie das Box-Modell verstanden haben.
CSS Debugging
Im letzten Artikel dieses Moduls werfen wir einen Blick auf die Grundlagen des CSS-Debugging, einschließlich das Erkunden des CSS, das auf eine Seite angewendet wird, und andere Tools, die Ihnen helfen können, Fehler in Ihrem CSS-Code zu finden.

Aufgaben

Die folgenden Aufgaben werden Ihr Verständnis der CSS-Grundlagen aus den obigen Guides testen.

Fundamentales CSS Verständnis
Diese Aufgabe testet Ihr Verständnis der obigen Guides mit einigen gewissenhaft handgemachten Aufgaben.

Weiterführendes

Intermediate Web Literacy 1: Intro to CSS
Ein exzellenter (englischsprachiger) Mozilla-Grundlagenkurs, der viele der Fähigkeiten aus dem Einführung in CSS-Modul erkundet und testet. Lernen Sie, HTML-Elemente einer Webseite zu stylen, indem Sie CSS-Selektoren, Attribute und Werte benutzen.

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: DiscW0rld, mdnwebdocs-bot, LarsE343, chrisdavidmills
Zuletzt aktualisiert von: DiscW0rld,