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-Dialekte wie SVG, MathML oder XHTML) geschrieben ist. CSS beschreibt, wie Elemente auf dem Bildschirm, auf Papier, in Sprache oder auf anderen Medien gerendert werden sollen.
CSS gehört zu den Kernsprachen des offenen Webs und ist über Webbrowser hinweg nach W3C-Spezifikationen standardisiert. Zuvor wurde die Entwicklung der verschiedenen Teile der CSS-Spezifikation synchron durchgeführt, was die Versionierung der neuesten Empfehlungen ermöglichte. Sie haben möglicherweise von CSS1, CSS2.1 oder sogar CSS3 gehört. Es wird nie ein CSS3 oder CSS4 geben; stattdessen ist jetzt alles einfach "CSS" mit einzelnen CSS-Modulen, die Versionsnummern haben.
Nach CSS 2.1 hat sich der Umfang der Spezifikation erheblich erweitert, und der Fortschritt bei 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, nimmt das W3C jetzt regelmäßig einen Snapshot des aktuell stabilen Zustands der CSS-Spezifikation und des Fortschritts einzelner Module. CSS-Module haben jetzt Versionsnummern oder Ebenen, wie beispielsweise 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: Styling des Inhalts
-
Dieser Artikel bietet eine kurze Einführung, was CSS ist und wie es verwendet wird, und richtet sich an Personen, die völlig neu in der Webentwicklung sind.
- CSS-Grundlagen des Stylings
-
Dieses Modul bietet Ihnen alle wichtigen Grundlagen von CSS, die Sie benötigen, um die Technologie effektiv zu erlernen, einschließlich Syntax, Funktionen und Techniken.
- CSS-Textstyling
-
Hier betrachten wir die Grundlagen des CSS-Textes, einschließlich der Einstellung von Schriftart, Fettigkeit, Kursivität, Zeilen- und Buchstabenabständen sowie Schlagschatten. Wir schließen das Modul ab, indem wir das Anwenden von benutzerdefinierten Schriften auf Ihre Seite sowie das Stylen von Listen und Links betrachten.
- CSS-Layout
-
Dieses Modul befasst sich mit Floats, Positionierung, anderen modernen Layout-Tools und dem Erstellen von responsiven Designs, die sich an verschiedene Geräte, Bildschirmgrößen und Auflösungen anpassen.
Referenz
Die CSS-Referenz ist eine umfassende Referenz für erfahrene Webentwickler, die jede Eigenschaft und jedes Konzept von CSS beschreibt, einschließlich:
- Der Syntax und Formen der Sprache
- Spezifität, Vererbung und dem Kaskadenmechanismus
- CSS-Selektoren, einschließlich Pseudo-Elemente, Verschachtelung, Scoping und Schatten-Teilen
- CSS-At-Regeln, einschließlich Medien- und Containerabfragen
- CSS-Werte und Einheiten Modul, einschließlich numerischer Datentypen, textueller Datentypen und funktionaler Notationen
- Boxmodell und Margen-Kollaps
- Der enthaltende Block
- Stapelkonte und Block-Formatierung Kontexte
- Initial, berechnet, verwendete, und tatsächliche Werte
- CSS-Kurzform-Eigenschaften
- CSS-Flexbox, Mehrspalten- und Grid-Layout
- Animationen, Übergänge und Transformationen
Kochbuch
Das CSS-Layout-Kochbuch zielt darauf ab, Rezepte für gängige Layoutmuster zu sammeln, Dinge, die Sie möglicherweise auf Ihren Websites implementieren müssen. Neben der Bereitstellung von Code, den Sie als Ausgangspunkt für Ihre Projekte verwenden können, heben diese Rezepte die verschiedenen Möglichkeiten hervor, wie Layout-Spezifikationen verwendet werden können und welche Entscheidungen Sie als Entwickler treffen können.
Werkzeuge für die CSS-Entwicklung
- Sie können den W3C CSS Validation Service verwenden, um zu überprüfen, ob Ihr CSS gültig ist. Dies ist ein unschätzbares Debugging-Tool.
- Firefox Developer Tools ermöglicht es Ihnen, die Live-CSS einer Seite über die Inspector und Style Editor Werkzeuge anzusehen und zu bearbeiten.
- Die Web Developer Extension für Firefox ermöglicht es Ihnen, das Live-CSS auf überwachten Sites zu verfolgen und zu bearbeiten.
Meta-Bugs
- Firefox: Firefox-Bug 1323667