CSS: Cascading Stylesheets
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) verfasst ist. CSS beschreibt, wie Elemente auf dem Bildschirm, auf Papier, in Sprache oder auf anderen Medien dargestellt werden sollen.
CSS gehört zu den Kernsprachen des offenen Webs und ist über Webbrowser hinweg gemäß W3C-Spezifikationen standardisiert. Früher wurde die Entwicklung der verschiedenen 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 ist jetzt alles einfach "CSS" mit individuellen 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, erstellt das W3C nun in regelmäßigen Abständen einen Snapshot des aktuellen stabilen Zustands der CSS-Spezifikation und des Fortschritts der einzelnen Module. CSS-Module haben jetzt Versionsnummern oder Ebenen, wie das CSS Color Module Level 5.
Einsteiger-Tutorials
- Ihre erste Website: Inhalte stylen
-
Dieser Artikel bietet einen kurzen Überblick darüber, was CSS ist und wie Sie es verwenden können, und richtet sich an Personen, die völlig neu im Bereich der Webentwicklung sind.
- Grundlagen der CSS-Stylings
-
Unser Leitfaden zur Webentwicklung Abschnittsmodul zu den CSS-Grundlagen lehrt die grundlegenden Konzepte von CSS von Grund auf.
- CSS-Textstyling
-
Hier befassen wir uns mit grundlegenden Konzepten wie der Einstellung von Schriftart, Fett, Kursiv, Zeilen- und Buchstabenabstand, Schlagschatten und anderen Textmerkmalen. Wir beenden das Modul, indem wir betrachten, wie benutzerdefinierte Schriftarten auf Ihre Seite angewendet und Listen und Links gestylt werden.
- CSS-Layout
-
Jetzt ist es an der Zeit zu betrachten, wie Sie Ihre Kästchen im Verhältnis zueinander und zum Browser-Ansichtsfenster korrekt anordnen. 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 die Kaskade
- CSS-Selektoren, einschließlich Pseudo-Elementen, Verschachtelung, Scoping und Schatten-Teile
- CSS-At-Regeln, einschließlich Media-Abfragen und Container-Abfragen
- CSS-Werte und -Einheiten Modul, einschließlich numerischer Datentypen, textueller Datentypen und funktionaler Notationen
- Box-Modell und Rand-Zusammenfall
- Der Einschlussblock
- Stacking und Block-Formatierungskontexte
- Initial-, berechnete, verwendete und tatsächliche Werte
- CSS-Kurzschreibweise-Eigenschaften
- CSS-Flexbox, Mehrspaltenlayout und Grid-Layout
- Animationen, Übergänge und Transformen
Kochbuch
Das CSS-Layout-Kochbuch zielt darauf ab, Rezepte für gängige Layout-Muster zusammenzustellen, die Sie möglicherweise in Ihren Websites implementieren müssen. Zusätzlich zur 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 die Entscheidungen, die 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 unverzichtbares Debugging-Tool.
- Firefox Developer Tools ermöglichen das Anzeigen und Bearbeiten von CSS in Echtzeit über die Inspector- und Style Editor-Werkzeuge.
- Die Web Developer Extension für Firefox ermöglicht das Verfolgen und Bearbeiten von Live-CSS auf beobachteten Websites.
Meta-Bugs
- Firefox: Firefox Bug 1323667