CSS: Cascading Style Sheets
Cascading Style Sheets (CSS) ist eine Stylesheet-Sprache, die verwendet wird, um die Präsentation 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 der Sprache oder in anderen Medien gerendert werden sollten.
CSS gehört zu den Kernsprachen des offenen Webs und ist über Webbrowser hinweg gemäß den W3C-Spezifikationen standardisiert. Zuvor erfolgte die Entwicklung verschiedener Teile der CSS-Spezifikation synchron, was die Versionierung der neuesten Empfehlungen ermöglichte. Vielleicht haben Sie von CSS1, CSS2.1 oder sogar CSS3 gehört. Es wird niemals ein CSS3 oder ein CSS4 geben; stattdessen ist alles jetzt einfach "CSS", wobei einzelne CSS-Module Versionsnummern haben.
Nach CSS 2.1 nahm der Umfang der Spezifikation erheblich zu, und der Fortschritt bei 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, macht das W3C nun regelmäßig einen Schnappschuss vom neuesten stabilen Zustand der CSS-Spezifikation und dem Fortschritt einzelner Module. CSS-Module haben jetzt Versionsnummern oder Level, wie zum Beispiel das CSS Color Module Level 5.
Einsteiger-Tutorials
Unsere Kernmodule zum Erlernen der Webentwicklung enthalten moderne, aktuelle Tutorials, die die Grundlagen von CSS abdecken.
- Ihre erste Website: Inhalt gestalten
-
Dieser Artikel bietet eine kurze Einführung in CSS und dessen Verwendung und richtet sich an Personen, die völlig neu in der Webentwicklung sind.
- Grundlagen der CSS-Stilgestaltung
-
Dieses Modul bietet alle CSS-Grundlagen, die Sie benötigen, um die Technologie effektiv zu erlernen, einschließlich Syntax, Funktionen und Techniken.
- CSS-Textgestaltung
-
Hier betrachten wir die CSS-Textgrundlagen, einschließlich der Einstellung von Schriftart, Fettdruck, Kursivschrift, Zeilen- und Buchstabenzwischenraum sowie Schlagschatten. Wir schließen das Modul ab, indem wir das Anwenden benutzerdefinierter Schriftarten auf Ihre Seite und das Gestalten von Listen und Links untersuchen.
- CSS-Layout
-
Dieses Modul betrachtet 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 dabei, zu lernen, was Sie mit CSS erreichen können. Durchsuchen Sie die komplette Liste auf CSS-Leitfaden, die Themen wie die folgenden umfasst:
- CSS-Syntax einschließlich Deklarationen und Regelsätze.
- Spezifität, Vererbung und Cascade
- Verschachtelung, Scoping und Schattelemente
- Media und Container Queries
- Numerische und textuelle Datentypen
- Box-Modell und Randüberschneidung
- Einhaltender Block
- Stapelweise und Block-Formatierung Kontexte
- Eigenschaftswertverarbeitung
- Shorthand-Eigenschaften
- Flexibles Box-Layout, Mehrspaltiges Layout und Rasterlayout
- Animationen, Übergänge und Transformationen
Anleitung
- CSS-Layout-Kochbuch
-
Rezepte für häufige Layoutmuster, die Sie möglicherweise in Ihren Websites umsetzen müssen. Diese Rezepte bieten 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 die Entscheidungen, die Sie als Entwickler treffen können.
Werkzeuge
- Randbild-Generator
-
Erzeugen Sie CSS-
border-image-Werte. - Randradius-Generator
-
Erzeugen Sie CSS-
border-radius-Effekte. - Box-Schatten-Generator
-
Fügen Sie
box-shadow-Effekte zu Ihren CSS-Objekten hinzu. - Farbformatkonverter
-
Geben Sie eine Farbe ein oder wählen Sie sie aus und kopieren Sie den entsprechenden Wert in jedes beliebige CSS-
Farbformat. - Farbmischer
-
Mischen Sie zwei Farben in jedem Farbraum mit der
color-mix()-Funktion und kopieren Sie die resultierende Farbe in jedes 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 unschätzbares Debugging-Tool.
- Firefox-Entwicklerwerkzeuge: Um das Live-CSS einer Seite über die Inspector- und Style Editor-Werkzeuge anzuzeigen und zu bearbeiten.
- Web Developer Erweiterung: Um Live-CSS auf Websites in Firefox zu verfolgen und zu bearbeiten.
Referenz
Durchsuchen Sie die komplette 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.