CSS: Cascading Style Sheets
Cascading Style Sheets (CSS) ist eine Stylesheet-Sprache, die verwendet wird, um die Darstellung eines Dokuments zu beschreiben, das in HTML oder XML (einschließlich XML-Dialekten wie SVG, MathML oder XHTML) geschrieben ist. CSS beschreibt, wie Elemente auf dem Bildschirm, auf Papier, in Sprachwiedergabe oder auf anderen Medien dargestellt werden sollen.
CSS gehört zu den Kernsprachen des offenen Webs und ist in Webbrowsern gemäß den W3C-Spezifikationen standardisiert. Früher wurde die Entwicklung verschiedener Teile der CSS-Spezifikation synchron durchgeführt, was die Versionierung der neuesten Empfehlungen ermöglichte. Sie haben vielleicht von CSS1, CSS2.1 oder sogar CSS3 gehört. Es wird niemals ein CSS3 oder ein CSS4 geben; vielmehr wird nun alles einfach als „CSS“ bezeichnet, wobei einzelne CSS-Module Versionsnummern haben.
Nach CSS 2.1 nahm der Umfang der Spezifikation erheblich zu und der Fortschritt in den verschiedenen CSS-Modulen begann sich so stark zu unterscheiden, dass es effektiver wurde, Empfehlungen separat pro Modul zu entwickeln und zu veröffentlichen. Anstatt die CSS-Spezifikation zu versionieren, erstellt das W3C nun periodisch einen Snapshot des neuesten stabilen Zustands der CSS-Spezifikation und des Fortschritts einzelner Module. CSS-Module haben jetzt Versionsnummern oder Stufen, wie beispielsweise das CSS Color Module Level 5.
Tutorials für Anfänger
Unsere Kernmodule zum Erlernen der Webentwicklung enthalten moderne, aktuelle Tutorials, die die Grundlagen von CSS abdecken.
- Ihre erste Website: Gestaltung des Inhalts
-
Dieser Artikel bietet eine kurze Einführung in CSS und seine Verwendung, speziell für Personen, die völlig neu in der Webentwicklung sind.
- Grundlagen der CSS-Gestaltung
-
Dieses Modul bietet alle grundlegenden CSS-Konzepte, die Sie benötigen, um die Technologie effektiv zu erlernen, einschließlich Syntax, Funktionen und Techniken.
- CSS Textgestaltung
-
Hier befassen wir uns mit den Grundlagen der CSS-Textgestaltung, einschließlich Schriftart, Fettdruck, Kursivschrift, Zeilen- und Buchstabenabstand sowie Schlagschatten. Am Ende des Moduls betrachten wir das Anwenden benutzerdefinierter Schriftarten auf Ihre Seite sowie das Gestalten von Listen und Links.
- CSS-Layout
-
Dieses Modul behandelt Floats, Positionierung, andere moderne Layout-Tools und den Aufbau responsiver Designs, die sich an verschiedene Geräte, Bildschirmgrößen und Auflösungen anpassen.
Leitfaden
CSS-Leitfäden sind nach Modulen organisiert und helfen Ihnen zu lernen, was Sie mit CSS erreichen können. Stöbern Sie in der vollständigen Liste der CSS-Leitfäden, die Themen wie folgende enthält:
- CSS-Syntax einschließlich Deklarationen und Regelsätze.
- Spezifität, Vererbung und Kaskade
- Verschachtelung, Scoping und Shadow Parts
- Media und Container Queries
- Numerische und textuelle Datentypen
- Box-Modell und Margin Collapse
- Containing Block
- Stapeln und Block-Formatierungskontexte block-formatting
- Eigenschaftswertverarbeitung
- Kurzschrift-Eigenschaften
- Layouts mit flexiblem Kasten, mehreren Spalten und Gitternetz
- Animationen, Übergänge, und Transformationen
Anleitung
- CSS-Layout-Kochbuch
-
Rezepte für gängige Layout-Muster, die Sie möglicherweise in Ihren Webseiten umsetzen müssen. Diese Rezepte liefern Code, den Sie als Ausgangspunkt in Ihren Projekten verwenden können. Diese Rezepte heben auch die verschiedenen Möglichkeiten hervor, wie Layout-Spezifikationen verwendet werden können und welche Entscheidungen Sie als Entwickler treffen können.
Werkzeuge
- Rand-Bild-Generator
-
Generieren Sie CSS-
border-image-Werte. - Radius-Generator für Ränder
-
Generieren Sie CSS-
border-radius-Effekte. - Box-Schatten-Generator
-
Fügen Sie
box-shadow-Effekte zu Ihren CSS-Objekten hinzu. - Farbformat-Konverter
-
Geben Sie eine Farbe ein oder wählen Sie eine und kopieren Sie den entsprechenden Wert in jedes CSS-Farbformat.
- Farbmischer
-
Mischen Sie zwei Farben in jedem Farbraum mit der
color-mix()-Funktion und kopieren Sie die resultierende Farbe in jedem CSS-Farbformat. - Form-Generator
-
Definieren Sie Koordinaten und Syntax für
<basic-shape>-Funktionen.
Sie können auch die folgenden Ressourcen nutzen:
- W3C CSS-Validierungsdienst: Um zu überprüfen, ob Ihr CSS gültig ist. Dies ist ein unverzichtbares Debugging-Tool.
- Firefox-Entwicklerwerkzeuge: Um das Live-CSS einer Seite mit den Inspektor und den Style Editor-Werkzeugen anzuzeigen und zu bearbeiten.
- Web-Developer-Erweiterung: Um Live-CSS auf Webseiten in Firefox zu verfolgen und zu bearbeiten.
Referenz
Durchstöbern Sie die vollständige CSS-Referenz -Dokumentation.
- CSS-Eigenschaften
-
Referenz für alle CSS-Eigenschaften.
- CSS-Selektoren
-
Referenz für CSS-Selektoren, Kombinatoren, Pseudoklassen und Pseudoelemente.
- CSS-At-Regeln
-
Referenz für CSS-At-Regeln einschließlich Media-Queries.
- CSS-Werte
-
Referenz für CSS-Schlüsselwörter, Datentypen und Funktionen.