unslug de: move

2 files changed, 279 insertions, 0 deletions

diff --git a/files/de/learn/css/first_steps/how_css_is_structured/index.html b/files/de/learn/css/first_steps/how_css_is_structured/index.html
new file mode 100644
index 0000000000..4c16c3e18d
--- /dev/null
+++ b/files/de/learn/css/first_steps/how_css_is_structured/index.html
@@ -0,0 +1,166 @@
+---
+title: Lesbares CSS
+slug: Web/Guide/CSS/Getting_started/Lesbares_CSS
+translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable
+translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/de/docs/Web/Guide/CSS/Getting_Started/Selektoren", "Selektoren")}}<span class="seoSummary">Das ist der sechste Teil des <a href="/de/docs/Web/Guide/CSS/Getting_Started" title="/de/docs/Web/Guide/CSS/Getting_Started">CSS Getting Started</a> Tutorials. Er erklärt den Stil und die Grammatik der CSS Sprache selbst. Sie ändern das Layout Ihrer CSS Datei, damit sie lesbarer wird.</span></p>
+
+<h2 class="clearLeft" id="Information_Lesbares_CSS">Information: Lesbares CSS</h2>
+
+<p>Sie können Leerstellen und Kommentare in Ihren Stylesheets einfügen, um sie lesbarer zu machen. Wenn verschiedene Selektoren dasselbe Element nur auf verschiedene Arten auswählen und deren Regeln darauf angewendet werden, können Sie diese Selektoren im Stylesheet nacheinander gruppieren.</p>
+
+<h3 id="Leerstellen">Leerstellen</h3>
+
+<p>Leerstellen können Leerzeichen, Tabs und Leerzeilen sein. Sie können Leerstellen in Ihren Stylesheets einfügen, um sie lesbarer zu machen.</p>
+
+<p>Im Kontext eines Seitenlayouts und -zusammenstellung sind <strong>Leerstellen</strong> die Teile einer Seite, die frei bleiben: Seitenränder, Zwischenräume und Platz zwischen Spalten und beschriebene Zeilen.</p>
+
+<p>Ihre CSS Datei aus den Beispielen hat momentan eine Regel pro Zeile und fast nur das Minimum von Leerstellen. In einem komplexen Stylesheet würde diese Layout schwer zu lesen und somit auch schwer zu warten sein.</p>
+
+<p>Das gewählte Layout ist normalerweise eine persönliche Vorliebe. Doch wenn Ihre Stylesheets Teil eines gemeinsammen Projekts sind, könnten diese Projekte eigene Konventionen für das Layout haben.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Beispiele</div>
+
+<p>Einige Personen mögen das kompakte Layout, das wir bis jetzt verwendet haben, in dem eine Zeile nur geteilt wird, wenn sie sonst sehr lange sein würde:</p>
+
+<pre class="brush: css">.carrot {color: orange; text-decoration: underline; font-style: italic;}
+</pre>
+
+<p>Einige Personen bevorzugen, wenn pro Zeile ein Property-Wert-Paar steht:</p>
+
+<pre class="brush: css">.carrot
+{
+color: orange;
+text-decoration: underline;
+font-style: italic;
+}
+</pre>
+
+<p>Einige Personen verwenden dann auch Einzüge — zwei oder vier Leerzeichen oder ein Tab sind gebräuchlich:</p>
+
+<pre class="brush: css">.carrot {
+  color: orange;
+  text-decoration: underline;
+  font-style: italic;
+}
+</pre>
+
+<p>Einige Personen richten alles vertikal an (aber solche Layouts sind schwer zu warten):</p>
+
+<pre class="brush: css">.carrot
+    {
+    color           : orange;
+    text-decoration : underline;
+    font-style      : italic;
+    }
+</pre>
+
+<p>Einige Personen verwenden verschieden viele Leerzeichen, um die Lesbarkeit zu verbessern.</p>
+
+<pre class="brush: css">.vegetable         { color: green; min-height:  5px; min-width:  5px }
+.vegetable.carrot  { color: orange;    height: 90px;     width: 10px }
+.vegetable.spinach { color: darkgreen; height: 30px;     width: 30px }
+</pre>
+</div>
+
+<p>Einige Personen verwenden Tabs für das Layout, während andere nur Leerzeichen verwenden.</p>
+
+<h3 id="Kommentare">Kommentare</h3>
+
+<p>Kommentare in CSS beginnen mit <code>/*</code> und enden mit <code>*/</code>.</p>
+
+<p>Sie können Kommentare in Stylesheets für Anmerkungen verwenden oder auch Teile vorübergehend für Testzwecke <em>auskommentieren</em>.</p>
+
+<p>Um Teile eines Stylesheets auszukommentieren, platzieren Sie diesen Teil in einem Kommentar, damit der Webbrowser ihn nicht auswertet. Seien Sie mit dem Start und dem Ende eines Kommentars vorsichtig. Der Rest des Stylesheets muss weiterhin eine korrekte Syntax haben.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Beispiel</div>
+
+<pre class="brush: css">/* style for initial letter C in first paragraph */
+.carrot {
+  color:            orange;
+  text-decoration:  underline;
+  font-style:       italic;
+  }
+</pre>
+</div>
+
+<h3 id="Gruppierte_Selektoren">Gruppierte Selektoren</h3>
+
+<p>Wenn mehrere Elemente denselben Style haben, können Sie eine Gruppe von Selektoren getrennt mit einem Komma spezifizieren. Die Deklaration wird dann auf alle selektierten Elemente angewendet.</p>
+
+<p>An einer anderen Stelle in Ihrem Stylesheet können Sie einen einzelnen Selektor erneut spezifizieren, um zusätzlich individuelle Regeln dazu anzugeben.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Beispiel</div>
+
+<p>Diese Regel macht {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }} und {{ HTMLElement("h3") }} Elemente in derselben Farbe.</p>
+
+<p>Es ist angenehm die Farbe an nur einer Stelle zu spezifizieren, denn dann kann sie später einfacher verändert werden.</p>
+
+<pre class="brush: css">/* color for headings */
+h1, h2, h3 {color: navy;}
+</pre>
+</div>
+
+<h2 id="Aktion_Kommentare_hinzufügen_und_das_Layout_verbessern">Aktion: Kommentare hinzufügen und das Layout verbessern</h2>
+
+<ol>
+ <li>Bearbeiten Sie Ihre CSS Datei und schreiben Sie die folgenden Regeln hinein (in beliebiger Reihenfolge):
+  <pre class="brush: css">strong {color: red;}
+.carrot {color: orange;}
+.spinach {color: green;}
+#first {font-style: italic;}
+p {color: blue;}
+</pre>
+ </li>
+ <li>Machen Sie den Stylesheet lesbaren, in dem sie die Regeln in eine für Sie logische Reihenfolge bringen und Sie Ihrer Meinung nach sinnvolle Leerstellen und Kommentare einfügen.</li>
+ <li>Speichern Sie die Datei und aktualisieren Sie Ihren Webbrowser, um sicherzustellen, dass Ihre Änderungen keinen Einfluss auf die Anwendung des Stylesheets haben:
+  <table style="border: 2px outset #36b; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ol>
+
+<div class="tuto_details">
+<div class="tuto_type">Herausforderung</div>
+
+<p>Kommentiere Sie nur Teile Ihres Stylesheets aus, damit nur der allererste Buchstabe in Ihrem Dokument rot ist:</p>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 1em;">
+ <tbody>
+  <tr>
+   <td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+  </tr>
+  <tr>
+   <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>(Es gibt mehrere Wege dies zu erreichen.)</p>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Mögliche Lösung</div>
+Eine mögliche Lösung wäre das Auskommentieren der Regel <code>.carrot</code>:
+
+<pre class="brush: css">/*.carrot {
+  color: orange;
+}*/</pre>
+<a class="hideAnswer" href="#challenge">Lösung ausblenden</a></div>
+<a href="#tutochallenge" title="Eine mögliche Lösung für die Herausforderung darstellen">Sehen Sie sich die Lösung an.</a></div>
+
+<h2 id="Was_kommt_als_Nächstes">Was kommt als Nächstes?</h2>
+
+<p>{{ nextPage("/de/docs/Web/Guide/CSS/Getting_Started/Textstyles", "Textstyles") }}Ihr Beispiel-Stylesheet verwendet kursiven und unterstrichenen Text. Die nächste Seite beschreibt weitere Wege, um <a href="/de/docs/Web/Guide/CSS/Getting_Started/Textstyles" title="/de/docs/Web/Guide/CSS/Getting_Started/Textstyles">das Aussehen von Text</a> in Ihrem Dokument zu spezifizieren<strong>.</strong></p>
diff --git a/files/de/learn/css/first_steps/how_css_works/index.html b/files/de/learn/css/first_steps/how_css_works/index.html
new file mode 100644
index 0000000000..0641d048e4
--- /dev/null
+++ b/files/de/learn/css/first_steps/how_css_works/index.html
@@ -0,0 +1,113 @@
+---
+title: Was ist CSS
+slug: Web/Guide/CSS/Getting_started/Was_ist_CSS
+translation_of: Learn/CSS/First_steps/How_CSS_works
+translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS
+---
+<div>{{CSSTutorialTOC}}</div>
+
+<p>{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started", "Einführung")}} <span class="seoSummary">Das erste Kapitel von <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en/CSS/Getting Started">CSS für Einsteiger</a> erklärt kurz CSS. Sie werden in den nächsten Kapiteln ein simples Dokument zum Üben erstellen.</span></p>
+
+<h2 class="clearLeft" id="Was_ist_CSS">Was ist CSS</h2>
+
+<p>Cascading Style Sheets (<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> für "gestufte Gestaltungsbögen") ist eine Sprache, die definiert wie Dokumente dem Benutzer präsentiert werden.</p>
+
+<p>Ein <em>Dokument</em> ist eine Ansammlung von Informationen (Texte, Bilder, …), die mit einer <em>Auszeichnungssprache</em> <em>(Markup Language)</em> strukturiert werden. In der Auszeichnungssprache wird angegeben, dass ein Text beispielsweise als Überschrift oder als Link dargestellt werden soll. Es wird jedoch NICHT angegeben, WIE eine Überschrift oder ein Link dargestellt werden sollen. Das genau macht CSS.</p>
+
+<p>Ein solches Dokument einem Benutzer zu <em>präsentieren</em> bedeutet, es in einer lesbaren Form darzustellen. Browser wie Firefox, Chrome oder Internet Explorer sind dafür entworfen, Dokumente visuell zu präsentieren. Beispielsweise auf einem Computer Monitor, Beamer oder Drucker.</p>
+
+<div class="tuto_example">
+<p><strong>Beispiele</strong></p>
+
+<ul>
+ <li>Eine Webseite, wie diese hier, ist ein Dokument.<br>
+  Die Information, die Sie auf einer Webseite sehen können, ist normalerweise mit der Auszeichnungssprache HTML (HyperText Markup Language) geschrieben.</li>
+ <li>Auch Dialoge in einer Anwendung - auch Dialogfenster genannt - sind oft Dokumente. Solche Dialoge können auch mit einer Auszeichnugssprache, wie XUL (XML User Interface Language für XML Benutzeroberflächensprache), strukturiert sein. XML oder XUL sind also Beispiele für andere Auszeichungssprachen.</li>
+</ul>
+</div>
+
+<p>In dieser Anleitung gibt es Boxen mit der Beschriftung <strong>Weitere Details</strong>, wie sie unten zu sehen ist. Solche Boxen stellen weiterführende Informationen und Links zu einem Thema bereit. Lesen Sie sie, folgen Sie den Links oder überspringen Sie diese Boxen und lesen Sie sie später.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">Weitere Details</div>
+
+<p>Ein Dokument ist nicht dasselbe wie eine Datei. Sie können aber selbstverständlich ein Dokument als Datei abspeichern.</p>
+
+<p><span style="line-height: 1.5;">Das Dokument, das Sie gerade lesen, ist nicht als Datei gespeichert. Wenn Ihr Browser diese Seite anfragt, durchsucht der Server eine Datenbank und generiert dieses Dokument indem er Teile daraus aus mehreren, verschiedenen Dateien zusammensetzt.</span></p>
+
+<p><span style="line-height: 1.5;">Sie werden dennoch in diesem Tutorial mit Dokumenten arbeiten, die in Dateien gespeichert sind.</span></p>
+
+<p>Weiterführende Infromationen über Dokumente und Auszeichnungssprachen finden Sie hier:</p>
+
+<table style="background-color: inherit; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a></td>
+   <td>für Webseiten</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/XML" title="/en-US/docs/XML">XML</a></td>
+   <td>allgemein für strukturierte Dokumente</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/SVG" title="/en-US/docs/Web/SVG">SVG</a></td>
+   <td>für Grafiken</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a></td>
+   <td>für Userinterfaces in Mozilla</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Im Teil II dieses Tutorials werden Sie Beispiele für diese Auszeichnungssprachen sehen.</p>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">Weitere Details</div>
+
+<p>In korrekter CSS-Terminologie wird das Programm, das ein Dokument darstellt <em>user agent (UA)</em> genannt. Ein Browser ist nur eine Art eines UA. CSS ist nicht nur für Browser oder Präsentationen interessant, aber im Teil I dieses Tutorials werden Sie nur mit CSS in einem Browser arbeiten.</p>
+
+<p>Für korrekte Definitionen der CSS-Terminologie sehen Sie unter <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Definitions</a> in der CSS Spezifikation des World Wide Web Consortium (W3C) nach. Das ist eine internationale Gemeinschaft, die offene Standards für das Web definiert.</p>
+</div>
+
+<h2 id="Action_Ein_Dokument_erstellen">Action: Ein Dokument erstellen</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;/head&gt;
+
+  &lt;body&gt;
+    &lt;p&gt;
+      &lt;strong&gt;C&lt;/strong&gt;ascading
+      &lt;strong&gt;S&lt;/strong&gt;tyle
+      &lt;strong&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>{{ LiveSampleLink('Action_Ein_Dokument_erstellen', 'Schauen Sie sich die Demo an') }}</p>
+
+<ol>
+ <li>Erstellen Sie einen neuen Ordner irgendwo auf Ihrem Computer, um die Übungen für dieses Tutorial abzuspeichern.</li>
+ <li>Öffnen Sie einen Texteditor und erstellen Sie eine neue Textdatei. Diese Datei wird das Dokument für die nächsten Übungen enthalten.</li>
+ <li>Kopieren Sie den folgenden HTML-Code in Ihre Datei, und speichern Sie diese unter dem Namen <code>doc1.html</code></li>
+ <li>Öffnen Sie in Ihrem Browser ein neues Fenster oder einen neuen Tab und dann öffnen Sie darin die Datei, die Sie gerade gespeichert haben. Sie sollten dann folgenden Text mit fetten Anfangsbuchstaben sehen:</li>
+</ol>
+
+<table style="border: 2px outset #3366bb; padding: 1em;">
+ <tbody>
+  <tr>
+   <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Möglicherweise sieht der Text in Ihrem Browser etwas anders aus als hier dargestellt. Das liegt daran, dass manche der Einstellungen in Ihrem Browser anders sein können, als wir sie hier verwendet haben. Das tut aber vorerst nichts zur Sache.</p>
+
+<h2 id="Was_nun">Was nun?</h2>
+
+<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Wofür CSS?")}}Ihr Dokument verwendet vorerst noch kein CSS. Im <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS">nächsten Abschnitt</a> werden Sie CSS verwenden um die Darstellung Ihres Dokumentes zu verändern.</p>