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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
|
---
title: Lesbares CSS
slug: Web/Guide/CSS/Getting_started/Lesbares_CSS
translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable
---
<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>
|
