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
|
---
title: Kaskadierung und Vererbung
slug: Learn/CSS/Building_blocks/Cascade_and_inheritance
translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance
original_slug: Web/Guide/CSS/Getting_started/Kaskadierung_und_vererbung
---
<p>{{ CSSTutorialTOC() }}</p>
<p>{{ previousPage("/de/docs/Web/Guide/CSS/Getting_Started/How_CSS_works", "Wie CSS funktioniert.")}}<span class="seoSummary">Das ist der vierte Abschnitt 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 wie Stylesheets in einer Kaskade interagieren und wie Element den Style von ihren Elternelmenten erben können. Sie werden Vererbung verwenden, um eine Menge von Teilen in Ihrem Beispieldokument in einem Schritt zu verändern.</span></p>
<h2 class="clearLeft" id="Information_Kaskadierung_und_Vererbung">Information: Kaskadierung und Vererbung</h2>
<p>Der schlussendliche Style eines Elements kann an vielen verschiedenen Orten angegeben werden, die auf eine komplexe Art miteinander interagieren. Diese Komplexität macht CSS mächtig. Aber dadurch kann es auch verwirrend und schwer zu debuggen werden.</p>
<p>Drei Hauptquellen von Styleinformationen bilden eine <em>Kaskade</em>. Diese sind:</p>
<ul>
<li>Die standardmäßigen Styles des Webbrowsers für die Markup Language.</li>
<li>Die Styles, die vom Benutzer, der das Dokument liest, angegeben werden.</li>
<li>Die Styles, die vom Autor mit dem Dokument verknüpft worden sind. Diese können an drei verschiedenen Orten angegeben werden:
<ul>
<li>In einer externen Datei: Dieses Tutorial diskutiert hauptsächlich diese Method zur Definition von Styles.</li>
<li>In einer Definition am Anfang des Dokumenst: Diese Methode sollte nur für Styles verwendet werden, die nur von dieser Seite benützt werden.</li>
<li>Auf einem bestimmten Element im Inhalt des Dokument: Das ist die am schwersten wartbare Methode, welche für Tests verwendet werden kann.</li>
</ul>
</li>
</ul>
<p>Der Style des Benutzers verändert den standardmäßigen Style des Webbrowsers. Der Style des Autors des Dokuments verändert dann den Style ein weiteres Mal. In diesem Tutorial sind Sie der Autor des Beispieldokuments und es wird nur mit Stylesheets vom Autor gearbeitet.</p>
<div class="tuto_example">
<div class="tuto_type">Beispiel</div>
<p>Wenn Sie dieses Dokument in einem Webbrowser lesen, kommen Teile des Styles, den Sie sehen, von dem standardmäßigen Style des Webbrowsers für HTML.</p>
<p>Teile vom Style können von angepassten Webbrowsereinstellungen oder von einer angepassten Styledefinitionsdatei stammen. In Firefox können die Einstellungen im Preferences Dialog vorgenommen werden, oder Sie geben Styles in der Datei <code>userContent.css</code> innerhalb Ihres Browserprofils an.</p>
<p>Andere Teile vom Style kommen aus Stylesheets, die vom Wiki-Server mit dem Dokument verlinkt werden.</p>
</div>
<p>Wenn Sie Ihr Beispieldokument in Ihrem Webbrowser öffnen, werden die {{ HTMLElement("strong") }} Elemente mit dickeren Buchstaben als der Rest des Textes dargestellt. Das kommt aus dem standardmäßigen Style des Webbbrowsers für HTML.</p>
<p>Die {{ HTMLElement("strong") }} Elemente sind rot. Das kommt aus Ihrem Beispielstylesheet.</p>
<p>Die {{ HTMLElement("strong") }} Elemente erben auch viele Eigenschaften vom Style des {{ HTMLElement("p") }} Elements, weil sie ein Kindelement davon sind. Auf dieselbe Art erbt das {{ HTMLElement("p") }} Element vom Style des {{ HTMLElement("body") }} Elements.</p>
<p>Für Styles in der Kaskade haben die Stylesheets vom Autor höchste Priorität. Danach folgen die Stylesheets des Benutzers und der standardmäßige Stylesheet vom Webbrowser.</p>
<p>Bei vererbten Styles haben die eigenen Styles von Kindelementen eine höhere Priorität als die von dessen Elternelementen.</p>
<p>Das sind nicht alle Prioritäten, die angwendet werden. Folgende Seiten in diesem Tutorial gehen noch detaillierter darauf ein.</p>
<div class="tuto_details">
<div class="tuto_type">Mehr Details</div>
<p>CSS ermöglicht es auch mit dem Schlüsselwort <code>!important</code> die Styles vom Autor zu überschreiben.</p>
<p>Das bedeutet, dass ein Autor nicht immer genau vorhersehen kann, was genau die Leser sehen werden.</p>
<p>Wenn Sie alle Details über Kaskadierung und Vererbung erfahren wollen, rufen Sie bitte die Seite <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Assigning property values, Cascading, and Inheritance</a> in der CSS Spezifikation auf.</p>
</div>
<h2 id="Aktion_Vererbung_verwenden">Aktion: Vererbung verwenden</h2>
<ol>
<li>Editieren Sie Ihre CSS Datei.</li>
<li>Kopieren Sie die folgende Zeile in Ihre CSS Datei. Es macht dabei keinen Unterschied, ob Sie die Zeile vor oder nach der bereits enthaltenen Zeile einfügen. Es ist aber verständlicher die Zeile oben einzufügen, da das {{ HTMLElement("p") }} Element in Ihrem Dokument das Elternelement vom {{ HTMLElement("strong") }} Element ist:
<pre class="brush:css">p {
color: blue;
text-decoration: underline;
}
</pre>
</li>
<li>Laden Sie die Seite im Webbrowser erneut, damit die Änderung an Ihrem Beispieldokument sehen können. Die unterstreichende Line betrifft den gesamten Text im Absatz und somit auch alle Anfangsbuchstaben. Die {{ HTMLElement("strong") }} Elemente haben den Unterstrich von ihrem Elternknoten {{ HTMLElement("p") }} geerbt.<br>
<p>Die {{ HTMLElement("strong") }} Elemente sind aber immer noch rot. Die rote Farbe gehört zu ihrem eigenen Style und hat somit Priorität gegenüber dem blau des {{ HTMLElement("p") }} Elternelements.</p>
</li>
</ol>
<h2 id="Before" name="Before">Davor</h2>
<h3 id="HTML_Inhalt">HTML Inhalt</h3>
<pre class="brush: html"><p>
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
</pre>
<h3 id="CSS_Inhalt">CSS Inhalt</h3>
<pre class="brush: css">strong {
color:red
}
</pre>
<p>{{ EmbedLiveSample('Before') }}</p>
<h2 id="After" name="After">Danach</h2>
<h3 id="HTML_Inhalt_2">HTML Inhalt</h3>
<pre class="brush: html"><p>
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p></pre>
<h3 id="CSS_Inhalt_2">CSS Inhalt</h3>
<pre class="brush:css" dir="rtl">p {
color:blue;
text-decoration:underline;
}
strong {
color:red;
}</pre>
<p>{{ EmbedLiveSample('After') }}</p>
<p> </p>
<div class="tuto_example">
<div class="tuto_type">Herausforderung</div>
Verändern Sie Ihren Stylesheet, damit nur die roten Buchstaben unterstrichen sind:
<table style="border: 2px outset #36b; padding: 1em;">
<tbody>
<tr>
<td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td>
</tr>
</tbody>
</table>
<div class="tuto_details" id="tutochallenge">
<div class="tuto_type">Mögliche Lösung</div>
<p>Verschieben Sie die Deklaration für die untersteichende Linie aus der Regel für {{ HTMLElement("p") }} in die für {{ HTMLElement("strong") }}. Die resultierende Datei sieht folgendermaßen aus:</p>
<pre class="brush: css">p {
color: blue;
}
strong {
color: red;
text-decoration: underline;
}
</pre>
<p> </p>
<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>
<p> </p>
<h2 id="Was_kommt_als_Nächstes">Was kommt als Nächstes?</h2>
<p>{{ nextPage("/de/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selektoren")}}Ihr Beispielstylesheet definiert Styles für die Tags <code><p></code> und <code><strong></code>, um den Style der entsprechenden Elemente im gesamten Dokument zu verändern. Der nächste Abschnitt beschreibt, wie Sie den Style auf eine noch <a href="/de/docs/Web/Guide/CSS/Getting_Started/Selektoren" title="/de/docs/Web/Guide/CSS/Getting_Started/Selektoren">selektivere Art</a> angeben können.</p>
|
