Articles
Einführung in CSS
CSS-Grundlagen

CSS-Grundlagen

Dieser Artikel erklärt die Grundlagen von CSS.

Sie können mehr über CSS-Selektoren, Kombinatoren und Spezifität erfahren.

YouTube Video

HTML/CSS zur Vorschau

css-base.css 
  1body {
  2    font-family: Arial, sans-serif;
  3    line-height: 1.6;
  4    margin: 20px 20px 600px 20px;
  5    background-color: #f4f4f9;
  6    color: #333;
  7}
  8
  9header h1 {
 10    font-size: 24px;
 11    color: #333;
 12    text-align: center;
 13    margin-bottom: 20px;
 14}
 15
 16h2, h3 {
 17    color: #555;
 18}
 19
 20h2 {
 21    font-size: 20px;
 22    border-bottom: 2px solid #ccc;
 23    padding-bottom: 5px;
 24}
 25
 26h3 {
 27    font-size: 18px;
 28    margin-top: 20px;
 29    padding-left: 10px;
 30    border-left: 2px solid #ccc;
 31}
 32
 33h4 {
 34    margin: 0;
 35    margin-left: 10px;
 36    font-size: 14px;
 37}
 38
 39article section p {
 40    margin-left:  40px;
 41}
 42
 43p, pre {
 44    margin: 10px 0;
 45    padding: 0;
 46}
 47
 48ul, ol, dl, menu {
 49    margin: 0;
 50}
 51
 52pre {
 53    background-color: #f0f0f0;
 54    border-left: 4px solid #ccc;
 55    padding: 10px;
 56    overflow-x: auto;
 57}
 58
 59.sample-view {
 60    border: 1px solid #eee;
 61    border-left: 4px solid #eee;
 62    padding: 10px;
 63    overflow-x: auto;
 64}
 65
 66p.sample, .sample {
 67    background-color: #e7f4e9;
 68    padding: 10px;
 69    border-left: 4px solid #7bbd82;
 70    color: #333;
 71}
 72
 73p.sample-error, .sample-error {
 74    background-color: #f4e7e7;
 75    padding: 10px;
 76    border-left: 4px solid lightcoral;
 77    color: #333;
 78}
 79
 80.example {
 81    background-color: #e0f0ff;
 82    padding: 10px;
 83    border-left: 4px solid #4a90e2;
 84    color: #333;
 85}
 86
 87p.sample-warn, .sample-warn {
 88    background-color: #f4f1e7;
 89    padding: 10px;
 90    border-left: 4px solid #bda97b;
 91    color: #333;
 92}
 93
 94code {
 95    background-color: #f4f4f4;
 96    padding: 2px 4px;
 97    border-radius: 4px;
 98    font-family: monospace;
 99}
100
101span {
102    font-weight: bold;
103}
104
105article {
106    background-color: white;
107    padding: 20px;
108    margin-bottom: 10px;
109    border-radius: 8px;
110    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
111}
112
113section {
114    margin-bottom: 20px;
115}
116
117section div {
118    width: 400px;
119    height: 50px;
120    margin: 20px auto;
121    color: white;
122    display: flex;
123    align-items: center;
124    justify-content: center;
125    font-size: 1.2rem;
126    background-color: lightgray;
127    border: 1px solid #ccc;
128}
129
130header h4 {
131    text-align: right;
132    color: #666;
133    font-size: 0.8em;
134    text-decoration: none;
135}
136
137header + pre {
138    margin: 0;
139    margin-top: -20px;
140    padding-top: 14px;
141    font-size: 0.9em;
142}
143
144header + .sample-view {
145    margin: 0;
146    margin-top: -16px;
147}
148
149.sample-view p {
150    margin: 0;
151    padding: 0;
152}
css-basics.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Basics</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-basics.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Basics</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header><h2>CSS Selectors</h2></header>
 19        <article>
 20            <h3>Universal Selector : *</h3>
 21            <section>
 22                <header><h4>CSS</h4></header>
 23<pre class="sample">
 24* {
 25    font-family:'Courier New', Courier, monospace;
 26}
 27</pre>
 28            </section>
 29        </article>
 30        <article>
 31            <h3>Element Selector</h3>
 32            <section>
 33                <header><h4>CSS</h4></header>
 34<pre class="sample">
 35strong {
 36    color: red;
 37}
 38</pre>
 39                <header><h4>HTML</h4></header>
 40                <pre>This is &lt;strong&gt;sample&lt;/strong&gt; text.</pre>
 41                <header><h4>HTML+CSS</h4></header>
 42                <section class="sample-view">
 43                    This is <strong>sample</strong> text.
 44                </section>
 45            </section>
 46        </article>
 47        <article>
 48            <h3>ID Selector : #</h3>
 49            <section>
 50                <header><h4>CSS</h4></header>
 51<pre class="sample">
 52#example1 {
 53    color: steelblue;
 54}
 55</pre>
 56                <header><h4>HTML</h4></header>
 57                <pre>&lt;span id="example1"&gt;This is sample text.&lt;/span&gt;</pre>
 58                <header><h4>HTML+CSS</h4></header>
 59                <section class="sample-view">
 60                    <span id="example1">This is sample text.</span>
 61                </section>
 62            </section>
 63        </article>
 64        <article>
 65            <h3>Class Selector : .</h3>
 66            <section>
 67                <header><h4>CSS</h4></header>
 68<pre class="sample">
 69.example1 {
 70    background-color: yellow;
 71    font-weight: bold;
 72}
 73</pre>
 74                <header><h4>HTML</h4></header>
 75                <pre>&lt;span class="example1"&gt;This is sample text.&lt;/span&gt;</pre>
 76                <header><h4>HTML+CSS</h4></header>
 77                <section class="sample-view">
 78                <section>
 79                    <span class="example1">This is sample text.</span>
 80                </section>
 81            </section>
 82        </article>
 83        <article>
 84            <h3>Attribute Selector : [property=value]</h3>
 85            <section>
 86                <header><h4>CSS</h4></header>
 87<pre class="sample">
 88a[href="index.html"] {
 89    font-weight: bold;
 90}
 91</pre>
 92                <header><h4>HTML</h4></header>
 93<pre>
 94&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;br&gt;
 95&lt;a href="about.html"&gt;About&lt;/a&gt;
 96</pre>
 97                <header><h4>HTML+CSS</h4></header>
 98                <section class="sample-view">
 99                    <a href="index.html">Home</a><br>
100                    <a href="about.html">About</a>
101                </section>
102            </section>
103        </article>
104        <article>
105            <h3>Descendant Combinator</h3>
106            <section>
107                <header><h4>CSS</h4></header>
108<pre class="sample">
109span strong {
110    text-decoration: underline;
111}
112</pre>
113                <header><h4>HTML</h4></header>
114                <pre>&lt;span&gt;This is &lt;strong&gt;sample&lt;/strong&gt; text.&lt;/span&gt;</pre>
115                <header><h4>HTML+CSS</h4></header>
116                <section class="sample-view">
117                    <span>This is <strong>sample</strong> text.</span>
118                </section>
119            </section>
120        </article>
121        <article>
122            <h3>Child Combinator : &gt;</h3>
123            <section>
124                <header><h4>CSS</h4></header>
125<pre class="sample">
126span > em {
127    color: blue;
128}
129</pre>
130                <header><h4>HTML</h4></header>
131<pre>
132This is &lt;em&gt;sample&lt;/em&gt; text.&lt;br&gt;
133&lt;span&gt;This is &lt;em&gt;another&lt;/em&gt; text.&lt;/span&gt;&lt;br&gt;
134&lt;span&gt;This text is not &lt;s&gt;&lt;em&gt;blue&lt;/em&gt;&lt;/s&gt; in color.&lt;/span&gt;
135</pre>
136                <header><h4>HTML+CSS</h4></header>
137                <section class="sample-view">
138                    This is <em>sample</em> text.<br>
139                    <span>This is <em>another</em> text.</span><br>
140                    <span>This text is not <s><em>blue</em></s> in color.</span>
141                </section>
142            </section>
143        </article>
144        <article>
145            <h3> Next Sibling combinator : +</h3>
146            <section>
147                <header><h4>CSS</h4></header>
148<pre class="sample">
149br + b {
150    color: green;
151}
152</pre>
153                <header><h4>HTML</h4></header>
154<pre>
155&lt;span&gt;
156    This is &lt;b&gt;first text&lt;/b&gt;.&lt;br&gt;
157    This is &lt;b&gt;second text&lt;/b&gt;.&lt;br&gt;
158    &lt;i&gt;This&lt;/i&gt; is &lt;b&gt;third text&lt;/b&gt;.&lt;br&gt;
159&lt;/span&gt;
160</pre>
161                <header><h4>HTML+CSS</h4></header>
162                <section class="sample-view">
163                    <span>
164                        This is <b>first text</b>.<br>
165                        This is <b>second text</b>.<br>
166                        <i>This</i> is <b>third text</b>.<br>
167                    </span>
168                </section>
169            </section>
170        </article>
171                <article>
172            <h3>Subsequent Sibling Combinator : ~</h3>
173            <section>
174                <header><h4>CSS</h4></header>
175<pre class="sample">
176br ~ b {
177    color: steelblue;
178}
179</pre>
180                <header><h4>HTML</h4></header>
181<pre>
182&lt;span&gt;
183    This is &lt;b&gt;first text&lt;/b&gt;.&lt;br&gt;
184    This is &lt;b&gt;second text&lt;/b&gt;.&lt;br&gt;
185    &lt;i&gt;This&lt;/i&gt; is &lt;b&gt;third text&lt;/b&gt;.&lt;br&gt;
186&lt;/span&gt;
187</pre>
188                <header><h4>HTML+CSS</h4></header>
189                <section class="sample-view">
190                    <span>
191                        This is <b>first text</b>.<br>
192                        This is <b>second text</b>.<br>
193                        <i>This</i> is <b>third text</b>.<br>
194                    </span>
195                </section>
196            </section>
197        </article>
198        <article>
199            <h3>Pseudo Class ":" </h3>
200            <section>
201                <header><h4>CSS</h4></header>
202<pre class="sample">
203a:hover {
204    background-color: lightskyblue;
205}
206</pre>
207                <header><h4>HTML</h4></header>
208<pre>
209    &lt;a href="#"&gt;Click here&lt;/a&gt;&lt;br&gt;
210</pre>
211                <header><h4>HTML+CSS</h4></header>
212                <section class="sample-view">
213                    <a href="#">Click here</a><br>
214                </section>
215            </section>
216        </article>
217        <article>
218            <h3>Pseudo Element "::" </h3>
219            <section>
220                <header><h4>CSS</h4></header>
221<pre class="sample">
222u::before {
223    content: " ** ";
224    color: red;
225    font-weight: bold;
226}
227</pre>
228                <header><h4>HTML</h4></header>
229<pre>
230    &lt;u&gt;Sample Text&lt;/u&gt;
231</pre>
232                <header><h4>HTML+CSS</h4></header>
233                <section class="sample-view">
234                    <u>Sample Text</u>
235                </section>
236            </section>
237        </article>
238    </main>
239
240    <main>
241        <header><h2>Inheritance &amp; Priority of CSS</h2></header>
242        <article>
243            <h3>CSS Specificity Rule</h3>
244            <section>
245                <header><h4>CSS Specificity</h4></header>
246                <section class="example">
247                <ol>
248                    <li><b>Inline Styles</b>: Styles written directly within the HTML element.</li>
249                    <li><b>ID Selectors</b>: e.g., <code>#id</code></li>
250                    <li><b>Class, Attribute Selectors, and Pseudo-classes</b>: e.g., <code>.class</code>, <code>[attribute=value]</code>, <code>:hover</code>, etc.</li>
251                    <li><b>Element Selectors</b>: e.g., <code>div</code>, <code>h1</code>, <code>p</code>, etc.</li>
252                    <li><b>Universal Selector</b>: <code>*</code></li>
253                </ol>
254                </section>
255
256                <header><h4>How Specificity is Calculated</h4></header>
257                <section class="example">
258                <ol>
259                    <li><b>Inline Styles</b>: Always have the highest specificity and are always applied.</li>
260                    <li><b>ID Selectors</b>: Worth 100 points each.</li>
261                    <li><b>Class, Attribute Selectors, and Pseudo-classes</b>: Worth 10 points each.</li>
262                    <li><b>Element Selectors and Pseudo-elements</b>: Worth 1 point each.</li>
263                </ol>
264                </section>
265            </section>
266        </article>
267        <article>
268            <h3>Example of CSS Specificity Rule</h3>
269            <section>
270                <header><h4>CSS</h4></header>
271<pre class="sample">
272/* ID Selector */
273#header {
274    color: blue;
275}
276
277/* Class Selector */
278.header {
279    color: red;
280}
281
282/* Element Selector */
283h1 {
284    color: green;
285}
286</pre>
287            <header><h4>HTML</h4></header>
288            <pre>&lt;h1 id="header" class="header"&gt;Example of CSS Specificity Rule&lt;/h1&gt;</pre>
289            <header><h4>HTML+CSS</h4></header>
290            <section class="sample-view">
291                <h1 id="header" class="header">Example of CSS Specificity Rule</h1>
292            </section>
293        </section>
294    </article>
295    <article>
296        <h3>Using <code>!important</code> in CSS</h3>
297        <section>
298            <header><h4>CSS</h4></header>
299<pre class="sample">
300#important-header {
301    color: blue;
302}
303
304.important-header {
305    color: red !important;
306}
307</pre>
308            <header><h4>HTML</h4></header>
309            <pre>&lt;h1 id="important-header" class="important-header"&gt;Example of &lt;code&gt;!important&lt;/code&gt;&lt;/h1&gt;</pre>
310            <header><h4>HTML+CSS</h4></header>
311            <section class="sample-view">
312                <h1 id="important-header" class="important-header">Example of <code>!important</code></h1>
313            </section>
314        </section>
315    </article>
316    <article>
317        <h3>CSS Inheritance</h3>
318        <section>
319            <header><h4>CSS</h4></header>
320<pre class="sample">
321footer {
322    color: gray;
323}
324
325p {
326    color: black;
327}
328</pre>
329            <header><h4>HTML</h4></header>
330<pre>
331&lt;footer&gt;
332    &lt;p&gt;This paragraph's text will be black.&lt;/p&gt;
333    &lt;span&gt;This text will be gray.&lt;/span&gt;
334&lt;/footer&gt;
335</pre>
336            <header><h4>HTML+CSS</h4></header>
337            <section class="sample-view">
338                <footer>
339                    <p>This paragraph's text will be black.</p>
340                    <span>This text will be gray.</span>
341                </footer>
342            </section>
343        </section>
344    </article>
345    <article>
346        <h3>Cascading Styles</h3>
347        <section>
348            <header><h4>CSS</h4></header>
349<pre class="sample">
350.text {
351    color: red;
352}
353
354.text {
355    color: blue;
356}
357</pre>
358            <header><h4>HTML</h4></header>
359            <pre>&lt;p class="text"&gt;This text will be blue.&lt;/p&gt;</pre>
360            <header><h4>HTML+CSS</h4></header>
361            <section class="sample-view">
362                <p class="text">This text will be blue.</p>
363            </section>
364        </section>
365    </article>
366
367</body>
368</html>

Grundlegende Syntax 

1selector {
2    property: value;
3}

Die Grundstruktur von CSS besteht aus Selektor, Eigenschaft und Wert. Jedes Paar aus Eigenschaften und Werten wird durch ein Semikolon abgeschlossen.

  • Selektor gibt an, auf welches HTML-Element der Stil angewendet wird. In diesem Beispiel werden Stile auf alle <header>-Elemente angewendet.
  • Eigenschaft gibt die Stil-Eigenschaft an, die geändert werden soll, wie z. B. Farbe oder Schriftgröße. Padding und color sind die Eigenschaften in diesem Beispiel.
  • Wert ist der Wert, der der Eigenschaft zugewiesen wird. Zum Beispiel könnte color white oder #9cf sein, und die Randgröße könnte 20px betragen.

Selektoren

CSS-Selektoren sind Muster zum Auswählen von HTML-Elementen. Durch die Verwendung von Selektoren können Sie Stile auf bestimmte Elemente oder Gruppen von Elementen anwenden.

Universalselektor 

1/* Universal Selector : "*" */
2* {
3    font-family:'Courier New', Courier, monospace;
4}
  • * ist ein Universalselektor, der auf alle Elemente angewendet wird.
  • In diesem Beispiel wird die Schriftart für alle Elemente geändert.

Elementselektor 

1/* Element Selector */
2strong {
3    color: red;
4}
  • Ein Element-Selektor ist ein Selektor, der auf spezifische HTML-Tags angewendet wird, indem man den Namen des HTML-Tags schreibt.
  • In diesem Beispiel wird die Textfarbe des <strong>-Elements auf Rot geändert.

ID-Selektor 

1/* ID Selector : "#" */
2#example1 {
3    color: steelblue;
4}
  • # ist ein ID-Selektor, der zum Auswählen von Elementen nach ID verwendet wird.
  • IDs sind eindeutig, daher kann es auf einer einzelnen Seite nur ein Element mit derselben ID geben.

Klassenselektor 

1/* Class Selector : "." */
2.example1 {
3    background-color: yellow;
4    font-weight: bold;
5}
  • . ist ein Klassen-Selektor, der zum Auswählen von Elementen nach Klasse verwendet wird.
  • Fügen Sie eine Klassen-Attribut zu HTML-Elementen hinzu, um Stile auf Elemente dieser Klasse anzuwenden.

Attributselektor 

1/* Attribute Selector : [property=value] */
2a[href="index.html"] {
3    font-weight: bold;
4}
  • [href="index.html"] ist ein Attribut-Selektor, der Elemente mit einem bestimmten Attribut auswählt.
  • In diesem Beispiel wird der Text des <a>-Elements mit einem href-Attributwert von index.html fett dargestellt.

Kombinator

Kombinatoren werden verwendet, um mehrere Selektoren zu kombinieren und Elemente mit spezifischen Beziehungen auszuwählen. Während ein Selektor Elemente einzeln auswählt, definiert ein Kombinator strukturelle Beziehungen zwischen Elementen.

Nachkommenkombinator 

1/* Descendant Combinator : " " */
2span strong {
3    text-decoration: underline;
4}
  • Ein Nachfahr-Kombinator wendet Stile auf alle spezifischen Elemente innerhalb eines bestimmten Elements an.
  • In diesem Beispiel wird eine Unterstreichung auf <strong>-Elemente innerhalb von <span>-Elementen angewendet.

Kindkombinator 

1/* Child Combinator : ">" */
2span > em {
3    color: blue;
4}
  • Das >-Zeichen zwischen span und em wird als Kinderkombinator verwendet. In diesem Beispiel werden Stile nur auf <em>-Elemente angewendet, die direkte Kinder von <span>-Elementen sind. Im dritten Zeilen-Beispiel wird der Stil nicht angewendet, da sich ein <s>-Tag zwischen den <span>- und <em>-Tags befindet.

Benachbarter Geschwisterkombinator 

1/* Next Sibling combinator */
2br + b {
3    color: green;
4}
  • Der benachbarte Geschwisterkombiator mit dem + Zeichen wendet Stile auf ein Geschwisterelement an, das unmittelbar nach einem bestimmten Element erscheint.
  • In diesem Beispiel wird die Textfarbe nur dann grün, wenn ein <b>-Tag direkt nach einem <br>-Tag erscheint.

Allgemeiner Geschwisterkombinator 

1/* Subsequent Sibling Combinator */
2br ~ b {
3    color: steelblue;
4}
  • Der allgemeine Geschwisterkombiator mit dem ~ Zeichen wählt alle Geschwisterelemente aus, die nach einem bestimmten Element erscheinen.
  • In diesem Beispiel wird die Textfarbe aller <b>-Tags, die nach einem <br>-Tag erscheinen, ein Blauton sein.

Pseudo-Klassen 

1/* Pseudo Class : ":" */
2a:hover {
3    background-color: lightskyblue;
4}
  • : wird verwendet, um Pseudo-Klassen auszuwählen.
  • Details zu Pseudo-Klassen werden in einem anderen Artikel erklärt.

Pseudo-Elemente 

1/* Pseudo Element : "::" */
2u::before {
3    content: " ** ";
4    color: red;
5    font-weight: bold;
6}
  • :: wird verwendet, um Pseudo-Elemente auszuwählen.
  • Details zu Pseudo-Elementen werden ebenfalls in einem anderen Artikel erklärt.

CSS-Spezifität

Die Priorität in CSS ist entscheidend, um zu verstehen, wie CSS funktioniert, und um unerwartete Stil-Anwendungen zu verhindern. Die CSS-Priorität bestimmt, welche Regel am stärksten ist, wenn mehrere CSS-Regeln auf dasselbe Element angewendet werden. Die Priorität von CSS wird hauptsächlich durch die folgenden Faktoren bestimmt:.

  1. Inline-Stile: Stile, die direkt innerhalb von HTML geschrieben sind
  2. ID-Selektoren ：#id
  3. Klassen, Attributselektoren, Pseudoklassen ：.class, [attribute=value], :hover, etc
  4. Elementselektoren ：div, h1, p, etc
  5. Universalselektor ：*

Je höher in der Liste, desto höher die Priorität, und je weiter unten, desto niedriger die Priorität.

Wie man Spezifität berechnet

Die CSS-Priorität wird berechnet, indem das 'Gewicht' jedes Selektors quantifiziert wird. Das Gewicht jedes Selektors wird wie folgt dargestellt:.

  1. Inline-Stile: Inline-Stile sind am stärksten und haben immer Vorrang.
  2. ID-Selektoren: Ein ID-Selektor entspricht '100 Punkten'.
  3. Klassen-, Attributselektoren, Pseudo-Klassen: Diese entsprechen '10 Punkten'.
  4. Elementselektoren, Pseudo-Elemente: Diese entsprechen '1 Punkt'.

Die Regel mit der höchsten Punktzahl wird angewendet.

Beispiel: 

 1/* ID Selector */
 2#header {
 3    color: blue;
 4}
 5
 6/* Class Selector */
 7.header {
 8    color: red;
 9}
10
11/* Element Selector */
12h1 {
13    color: green;
14}
1<h1 id="header" class="header">Example of CSS Specificity Rule</h1>

Hier hat das <h1>-Tag drei verschiedene Stile angewendet:

  • h1-Elementselektor (1 Punkt)
  • .header-Klassenselektor (10 Punkte)
  • #header ID-Selektor (100 Punkte)

In diesem Fall wird color: blue angewendet, da der ID-Selektor die höchste Priorität hat.

Priorität mit !important überschreiben

Verwenden Sie !important, wenn Sie einen Stil erzwingen und die üblichen Prioritäten ignorieren möchten. !important hat den stärksten Einfluss auf alle Regeln und überschreibt alles andere.

Beispiel: 

1#important-header {
2    color: blue;
3}
4
5.important-header {
6    color: red !important;
7}
1<h1 id="important-header" class="important-header">Example of <code>!important</code></h1>
  • Hier wird color: red !important; angegeben, daher hat color: red Vorrang.

Vererbung und Priorität

CSS kann Stile von übergeordneten Elementen an untergeordnete Elemente vererben. Zum Beispiel werden Eigenschaften wie color und font-family standardmäßig vererbt. Wenn jedoch ein bestimmtes untergeordnetes Element direkt gestylt wird, hat der direkt angewendete Stil Vorrang vor den vererbten Stilen.

Beispiel: 

1footer {
2    color: gray;
3}
4
5p {
6    color: black;
7}
1<footer>
2    <p>This paragraph's text will be black.</p>
3    <span>This text will be gray.</span>
4</footer>
  • Hier wird color: gray; auf das footer-Tag angewendet, aber da color: black; explizit für das p-Element festgelegt ist, wird der Text des p-Elements in Schwarz angezeigt. Unterdessen erbt das span-Element die color-Eigenschaft vom footer und erscheint in Grau.

CSS-Kaskade und Priorität

Wie der Name 'Cascading Style Sheets (CSS)' andeutet, 'kaskadieren' die Stile. Das bedeutet, dass bei mehreren Stylesheets oder Regeln die zuletzt definierte Regel Vorrang hat. Wenn die Prioritäten gleich sind, wird der später geschriebene Stil angewendet.

Beispiel: 

1.text {
2    color: red;
3}
4
5.text {
6    color: blue;
7}
1<p class="text">This text will be blue.</p>
  • Hier wird color: blue; später definiert, daher wird der Text in Blau angezeigt.

Zusammenfassung

Die Vorrangregelung von CSS wird durch Algorithmen wie Spezifität bestimmt, aber hier haben wir nur die grundlegenden Teile betrachtet.

Die Grundregeln sind wie folgt:

  • Inline-Stile haben immer die höchste Priorität.
  • ID-Selektoren sind mächtig und haben Vorrang vor Klassen und Tags.
  • Klassenselektoren und Pseudoklassen haben ein mittleres Maß an Vorrang.
  • Tag-Selektoren und Pseudoelemente haben das niedrigste Maß an Vorrang.
  • !important setzt die normale Vorrangregelung außer Kraft und erzwingt die Anwendung des Stils.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

Vererbung in CSS