Tutorials
Cascading Style Sheets, meistens als CSS abgekürzt, ist eine Beschreibungssprache, die das Erscheinungsbild einer in HTML oder XML formatierten Datei (inklusive verschiedener XML-Sprachen wie SVG oder XHTML) festlegt. CSS beschreibt, wie ein strukturiertes Element am Bildschirm, auf Papier, in Sprache oder anderen Medien dargestellt wird.
CSS ist eine der Kernsprachen des Open Web und basiert auf standardisierten W3C-Spezifikationen. Vorher wurden die verschieden Tiele der CSS-Spezifikation synchron entwickelt, was die Versionierung der letzten Empfehlung ermöglichte. Du hast vielleicht von CSS1, CSS2.1 und CSS3 gehört. CSS4 wurde jedoch nie eine offizielle Version.
Seit CSS3 wuchs der Umfang der Spezifikation beträchtlich und der Fortschritt an den verschiedenen CSS-Modulen begann, so sehr abzuweichen, dass es effizienter wurde, Empfehlungen getrennt pro Modul zu entwickeln und zu veröffentlichen.
- CSS-Einführung
Eine Schritt-für-Schritt-Einführung für Anfänger, welche die grundlegenden Informationen enthält.
- CSS-TutorialUnser CSS-Lernbereich enthält eine Vielzahl von Tutorials, die alle Grundlagen behandeln und dich vom Anfänger- zum Profiniveau bringen.
- CSS-Referenz
Eine vollständige Übersicht für erfahrene Webentwickler, die alle Eigenschaften und Konzepte von CSS beschreibt.
Unser CSS-Lernbereich bietet mehrere Module, die dir CSS von Grund auf beibringen — kein Vorwissen wird benötigt.
- Erste Schritte mit CSS
- CSS (für englisch „Cascading Style Sheets“) wird zur Gestaltung und zum Layout von Webseiten verwendet — zum Beispiel, um Schriftart, Farbe, Größe und Abstand des Inhalts zu verändern, ihn in mehrere Spalten aufzuteilen oder Animationen und andere dekorative Merkmale hinzuzufügen. Dieses Modul stellt einen sanften Anfang auf deinem Weg zur Beherrschung von CSS bereit, mit den Grundlagen, wie es funktioniert, wie die Syntax aussieht, und wie du anfangen kannst, es zu nutzen, um Gestaltung zu HTML hinzuzufügen.
- CSS-Bausteine
- Dieses Modul macht weiter, wo „Erste Schritte mit CSS“ aufgehört hat — jetzt, wo du mit der Sprache und ihrer Syntax vertraut geworden bist und etwas grundlegende Erfahrung gesammelt hast, ist es Zeit, ein bisschen tiefer einzutauchen. Dieses Modul beschäftigt sich mit der Kaskade und Vererbung, allen verfügbaren Selektorarten, Einheiten, Festlegung von Größen, Gestaltung des Hintergrunds und der Kanten, Debugging, und vielem mehr.
- Das Ziel ist hier, dir eine Werkzeugsammlung zum Schreiben kompetenten CSS-Codes bereitzustellen und dir zu helfen, die grundlegende Theorie zu verstehen, bevor es mit spezifischeren Themen wie Textgestaltung und CSS-Layout weitergeht.
- Textgestaltung
- Nach der Behandlung der Grundlagen der Sprache CSS ist das nächste Thema, auf das du dich konzentrierst, Text zu gestalten — eines der gewöhnlichsten Dinge, die du mit CSS tun wirst. Hier sehen wir uns die Grundlagen der Textgestaltung an, zum Beispiel das Verändern der Schriftart, Schriftdicke, Kursivschrift, Zeilen- und Buchstabenabstand, Schlagschatten und andere Textmerkmale. Wir runden das Modul ab, indem wir uns das Anwenden eigener Schriften auf die Seite und die Gestaltung von Listen und Links anschauen.
- CSS-Layout
- An dieser Stelle haben wir uns bereits die CSS-Grundlagen, Textgestaltung und, wie Boxen, in denen sich dein Inhalt befindet, gestaltet und manipuliert werden können, angeschaut. Jetzt ist es an der Zeit, sich anzusehen, wie Boxen in Bezug auf den Ansichtsbereich und einander am richtigen Ort platziert werden. Wir haben die notwendigen Voraussetzungen behandelt, weshalb wir jetzt tief ins CSS-Layout eintauchen können, indem wir uns verschiedene Bildschirmeinstellungen, moderne Layoutwerkzeuge wie Flexbox, CSS-Grids und Positionierung und ein paar der alten Methoden, über die du vielleicht noch etwas wissen möchtest, anschauen.
- CSS nutzen, um übliche Probleme zu lösen
- Dieses Modul beinhaltet Links zu Inhaltsabschnitten, die erklären, wie CSS genutzt werden kann, um sehr gewöhnliche Probleme beim Erstellen einer Webseite zu lösen.
Referenzen
- CSS-Referenz: Diese ausführliche Referenz für erfahrene Webentwickler beschreibt jede CSS-Eigenschaft und jedes CSS-Konzept.
- CSS-Schlüsselkonzepte:
- Die Syntax und Form der Sprache
- Spezifität, Vererbung und die Kaskade
- CSS-Einheiten und -Werte
- Boxmodell und Zusammenfallen von Außenabständen
- Der beinhaltende Block
- Stapel- und Blockformatierungskontexte
- Initial-, berechnete, genutzte und tatsächliche Werte
- CSS-Shorthand-Eigenschaften
- CSS-Flexible-Box-Layout
- CSS-Grid-Layout
- Media-Queries
- Animation
Kochbuch
Das CSS-Layout-Cookbook versucht, Rezepte für übliche Layoutmuster zusammenzubringen, Dinge, die du in deiner Seite implementieren müssen könntest. Zusätzlich zur Bereitstellung von Code, den du als Anfangspunkt in deinen Projekten nutzen kannst, heben diese Rezepte die verschieden Möglichkeiten, wie Layoutspezifikationen genutzt werden können, und die Entscheidungen, die du als Entwickler treffen kannst, hervor.
Werkzeuge für die CSS-Entwicklung
- Der W3C-CSS-Validierungsservice überprüft, ob ein angegebenes CSS gültig ist. Der Service unter OnlineWebCheck.com macht das gleiche. Dies sind unschätzbare Debuggingtools.
- Die „Firefox Developer Tools“ erlauben das Live-Ansehen und Bearbeiten des CSS einer Seite über den Inspektor und den Style-Editor.
- Die Web-Developer-Erweiterung für Firefox erlaubt es ebenfalls, CSS auf beobachteten Seiten live anzusehen.
- Die Web-Community hat verschiedene andere CSS-Tools für deine Nutzung erstellt.
Siehe auch
- CSS-Demos: Bekomme einen kreativen Boost, indem du Beispiele der neuesten CSS-Technologien in Aktion erkundest.
- Websprachen, auf die CSS häufig angewendet wird: HTML, SVG, XHTML und XML.
- Mozilla-Technologien, die ausgiebig Gebrauch von CSS machen: Firefox, und Thunderbird-Erweiterungen und -Themes.
- Mozilla-Mailing-Liste
- Stack-Overflow-Fragen über CSS