1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
---
title: CSS
slug: Web/CSS
tags:
- CSS
- Design
- Landing
- Layout
- Referenz
translation_of: Web/CSS
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary"><strong>Cascading Style Sheets</strong>, meistens als <strong>CSS</strong> abgekürzt, ist eine Beschreibungssprache, die das Erscheinungsbild einer in {{Glossary("HTML")}} oder {{Glossary("XML")}} formatierten Datei (inklusive verschiedener XML-Sprachen wie <a href="/de/docs/SVG" rel="internal">SVG</a> oder <a class="new " href="/de/docs/XHTML" rel="internal">XHTML</a>) festlegt. CSS beschreibt, wie ein strukturiertes Element am Bildschirm, auf Papier, in Sprache oder anderen Medien dargestellt wird.</span></p>
<p><strong>CSS</strong> ist eine der Kernsprachen des <em>Open Web</em> und basiert auf standardisierten <a class="external" href="http://w3.org/Style/CSS/#specs">W3C-Spezifikationen</a>. 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.</p>
<p>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, <a href="https://www.w3.org/Style/CSS/current-work">Empfehlungen getrennt pro Modul zu entwickeln und zu veröffentlichen</a>.</p>
<section id="sect1">
<ul class="card-grid">
<li><span>CSS-Einführung</span>
<p>Eine <a href="/de/docs/CSS/Getting_Started">Schritt-für-Schritt-Einführung</a> für Anfänger, welche die grundlegenden Informationen enthält.</p>
</li>
<li><span>CSS-Tutorial</span>Unser <a href="/de/docs/Learn/CSS">CSS-Lernbereich</a> enthält eine Vielzahl von Tutorials, die alle Grundlagen behandeln und dich vom Anfänger- zum Profiniveau bringen.</li>
<li><span>CSS-Referenz</span>
<p>Eine <a href="/de/docs/CSS_Referenz" title="CSS Referenz">vollständige Übersicht</a> für erfahrene Webentwickler, die alle Eigenschaften und Konzepte von CSS beschreibt.</p>
</li>
</ul>
<div class="row topicpage-table">
<div class="section">
<h2 class="Documentation" id="Tutorials">Tutorials</h2>
<p>Unser <a href="/de/docs/Learn/CSS">CSS-Lernbereich</a> bietet mehrere Module, die dir CSS von Grund auf beibringen — kein Vorwissen wird benötigt.</p>
<dl>
<dt><a href="/en-US/docs/Learn/CSS/First_steps">Erste Schritte mit CSS</a></dt>
<dd>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.</dd>
<dt><a href="/de/docs/Learn/CSS/Building_blocks">CSS-Bausteine</a></dt>
<dd>Dieses Modul macht weiter, wo <a href="/en-US/docs/Learn/CSS/First_steps">„Erste Schritte mit CSS“</a> 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.</dd>
<dd>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 <a href="/en-US/docs/Learn/CSS/Styling_text">Textgestaltung</a> und <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS-Layout</a> weitergeht.</dd>
<dt><a href="/en-US/docs/Learn/CSS/Styling_text">Textgestaltung</a></dt>
<dd>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.</dd>
<dt><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS-Layout</a></dt>
<dd>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.</dd>
<dt><a href="/en-US/docs/Learn/CSS/Howto">CSS nutzen, um übliche Probleme zu lösen</a></dt>
<dd>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.</dd>
</dl>
</div>
<div class="section">
<h2 id="Referenzen">Referenzen</h2>
<ul>
<li><a href="/de/docs/Web/CSS/CSS_Referenz">CSS-Referenz</a>: Diese ausführliche Referenz für erfahrene Webentwickler beschreibt jede CSS-Eigenschaft und jedes CSS-Konzept.</li>
<li>CSS-Schlüsselkonzepte:
<ul>
<li>Die <a href="/en-US/docs/Web/CSS/Syntax">Syntax und Form der Sprache</a></li>
<li><a href="/de/docs/Web/CSS/Spezifität">Spezifität</a>, <a href="/de/docs/Web/CSS/Vererbung">Vererbung</a> und <a href="/en-US/docs/Web/CSS/Cascade">die Kaskade</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">CSS-Einheiten und -Werte</a></li>
<li><a href="/de/docs/Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell">Boxmodell</a> und <a href="/de/docs/Web/CSS/CSS_Boxmodell/Zusammenfallen_von_Außenabständen_meistern">Zusammenfallen von Außenabständen</a></li>
<li>Der <a href="/en-US/docs/Web/CSS/Containing_block">beinhaltende Block</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Stapel-</a> und <a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">Blockformatierungskontexte</a></li>
<li><a href="/de/docs/Web/CSS/Initialwert">Initial-</a>, <a href="/de/docs/Web/CSS/berechneter_Wert">berechnete</a>, <a href="/en-US/docs/Web/CSS/used_value">genutzte</a> und <a href="/de/docs/Web/CSS/tatsächlicher_Wert">tatsächliche</a> Werte</li>
<li><a href="/en-US/docs/Web/CSS/Shorthand_properties">CSS-Shorthand-Eigenschaften</a></li>
<li><a href="/de/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS-Flexible-Box-Layout</a></li>
<li><a href="/de/docs/Web/CSS/CSS_Grid_Layout">CSS-Grid-Layout</a></li>
<li><a href="/de/docs/Web/CSS/Media_Queries">Media-Queries</a></li>
<li><a href="/de/docs/Web/CSS/animation">Animation</a></li>
</ul>
</li>
</ul>
<h2 id="Kochbuch">Kochbuch</h2>
<p>Das <a href="/en-US/docs/Web/CSS/Layout_cookbook">CSS-Layout-Cookbook</a> 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.</p>
<h2 class="Tools" id="Tools" name="Tools">Werkzeuge für die CSS-Entwicklung</h2>
<ul>
<li>Der <a class="external" href="http://jigsaw.w3.org/css-validator/">W3C-CSS-Validierungsservice</a> überprüft, ob ein angegebenes CSS gültig ist. Der Service unter <a href="//www.OnlineWebCheck.com/">OnlineWebCheck.com</a> macht das gleiche. Dies sind unschätzbare Debuggingtools.</li>
<li>Die „<a href="/de/docs/Tools">Firefox Developer Tools</a>“ erlauben das Live-Ansehen und Bearbeiten des CSS einer Seite über den <a href="/de/docs/Tools/Seiten_Inspektor">Inspektor</a> und den <a href="/de/docs/Tools/Style_Editor">Style-Editor</a>.</li>
<li>Die <a class="link-https" href="https://addons.mozilla.org/de/firefox/addon/web-developer/">Web-Developer-Erweiterung</a> für Firefox erlaubt es ebenfalls, CSS auf beobachteten Seiten live anzusehen.</li>
<li>Die Web-Community hat verschiedene andere <a href="/de/docs/Web/CSS/Tools">CSS-Tools</a> für deine Nutzung erstellt.</li>
</ul>
</div>
</div>
</section>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li><a href="https://wiki.developer.mozilla.org/de/docs/Web/Demos_of_open_web_technologies#CSS">CSS-Demos</a>: Bekomme einen kreativen Boost, indem du Beispiele der neuesten CSS-Technologien in Aktion erkundest.</li>
<li>Websprachen, auf die CSS häufig angewendet wird: <a href="/de/docs/HTML">HTML</a>, <a href="/de/docs/SVG">SVG</a>, <a href="/de/docs/XHTML">XHTML</a> und <a href="/de/docs/XML">XML</a>.</li>
<li>Mozilla-Technologien, die ausgiebig Gebrauch von CSS machen: <a href="/de/Firefox">Firefox</a>, und <a href="/de/docs/Mozilla/Thunderbird">Thunderbird</a>-<a href="/de/docs/Erweiterungen">Erweiterungen</a> und <a href="/de/Add-ons/Themes">-Themes</a>.</li>
<li><a href="//lists.mozilla.org/listinfo/dev-tech-layout">Mozilla-Mailing-Liste</a></li>
<li><a href="//stackoverflow.com/questions/tagged/css">Stack-Overflow-Fragen über CSS</a></li>
</ul>
|
