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 wurde. CSS beschreibt, wie Elemente auf dem Bildschirm, auf Papier, in Sprache oder in anderen Medien dargestellt werden sollen.
CSS gehört zu den Kernsprachen des offenen Webs und ist gemäß den W3C-Spezifikationen in Webbrowsern standardisiert. Früher wurde die Entwicklung der verschiedenen Teile der CSS-Spezifikation synchron durchgeführt, was eine Versionsbildung der neuesten Empfehlungen ermöglichte. Sie haben möglicherweise von CSS1, CSS2.1 oder sogar CSS3 gehört. Es wird niemals ein CSS3 oder CSS4 geben; vielmehr ist jetzt alles einfach "CSS" mit individuellen CSS-Modulen, die Versionsnummern haben.
Nach CSS 2.1 wurde 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 getrennt pro Modul zu entwickeln und zu veröffentlichen. Anstatt die CSS-Spezifikation zu versionieren, nimmt das W3C nun regelmäßig einen Schnappschuss des aktuellen stabilen Zustands der CSS-Spezifikation und des Fortschritts der einzelnen Module. CSS-Module haben nun Versionsnummern oder Stufen, wie z.B. das CSS Color Module Level 5.
Anfängerkurse
- Ihre erste Website: Gestaltung der Inhalte
-
Dieser Artikel bietet eine kurze Einführung in CSS und dessen Verwendung, speziell für diejenigen, die völlig neu im Web-Entwicklungsbereich sind.
- CSS-Grundlagen der Gestaltung
-
Unser Lernen Sie Web-Entwicklung-Abschnittsmodul zu den CSS-Grundlagen vermittelt fundamentale CSS-Kenntnisse von Grund auf.
- CSS-Textgestaltung
-
Hier betrachten wir die Grundlagen, einschließlich Schriftartsetzungen, Fett- und Kursivschrift, Zeilen- und Buchstabenzwischenräume, Schlagschatten und andere Textmerkmale. Wir schließen das Modul mit der Anwendung von benutzerdefinierten Schriftarten auf Ihre Seite und der Gestaltung von Listen und Links ab.
- CSS-Layout
-
Jetzt ist es an der Zeit, zu verstehen, wie Sie Ihre Boxen korrekt in Bezug aufeinander und auf das Browser-Viewport layouten. Dieses Modul behandelt Floats, Positionierungen, andere moderne Layout-Tools und den Aufbau responsiver 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 und beschreibt jede Eigenschaft und jedes Konzept von CSS, einschließlich:
- Die Syntax und Formen der Sprache
- Spezifität, Vererbung und die Kaskade
- CSS-Selektoren, einschließlich Pseudo-Elemente, Verschachtelung, Scoping und Schatten-Teile
- CSS-Regeln, einschließlich Media- und Containment- Abfragen
- CSS-Werte und Einheiten Modul, einschließlich numerischer Datentypen, textlicher Datentypen und funktionale Notationen
- Box-Modell und Rand-Kollaps
- Der beinhaltende Block
- Stapeln und Blockformatierungs- Kontexte
- Initiale, berechnete, genutzte und tatsächliche Werte
- CSS-Kurzschreibweise-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 Layout-Muster zu sammeln, die Sie möglicherweise in Ihren Webseiten umsetzen müssen. Zusätzlich zu bereitgestelltem Code, den Sie als Ausgangspunkt in Ihren Projekten verwenden können, heben diese Rezepte die verschiedenen Möglichkeiten hervor, wie Layout-Spezifikationen genutzt 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 Inspektor und Stil-Editor Werkzeuge anzusehen und zu bearbeiten.
- Die Web Developer Erweiterung für Firefox ermöglicht es Ihnen, Live-CSS auf überwachten Seiten zu verfolgen und zu bearbeiten.
Meta-Bugs
- Firefox: Firefox Bug 1323667