Articles
Einführung in CSS
Vererbung in CSS

Vererbung in CSS

Dieser Artikel erklärt die Vererbung in CSS.

Sie können repräsentative vererbte und nicht vererbte Eigenschaften überprüfen.

YouTube Video

HTML zur Vorschau

css-inheritance.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 Inheritance</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-inheritance.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Inheritance</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header><h2>CSS Inheritance</h2></header>
19        <article>
20            <h3>Example of Inheritance</h3>
21            <section>
22                <p>
23                    Example of P Element.<br>
24                    <span>Example of Span Element</span>
25                </p>
26            </section>
27            <div>
28                Example of Div Element
29            </div>
30            <ul>
31                <li>List Item 1</li>
32                <li>List Item 2</li>
33                <li>List Item 3</li>
34            </ul>
35        </article>
36        <article>
37            <h3>all</h3>
38            <section>
39                <h4>Initial</h4>
40                <div class="all-initial">This is an initial element</div>
41            </section>
42            <section>
43                <h4>Inherit</h4>
44                <div class="parent-inherit">
45                    <div class="all-inherit">This is an inherited element</div>
46                </div>
47            </section>
48            <section>
49                <h4>Unset All</h4>
50                <div class="parent-unset">
51                    <div class="all-unset">This is an unset element</div>
52                </div>
53            </section>
54            <section>
55                <h4>all and !important</h4>
56                <div class="important-style">
57                    <div class="all-with-important">
58                        This is an initial element with !important
59                    </div>
60                </div>
61            </section>
62        </article>
63    </main>
64</body>
65</html>

Vererbung in CSS

In CSS werden einige Eigenschaften automatisch von übergeordneten Elementen an untergeordnete Elemente vererbt. Dies ist ein nützliches Mechanismus, da einmal festgelegte Eigenschaften auch von Kindelementen übernommen werden, wodurch eine wiederholte Einstellung entfällt. Jedoch werden nicht alle Eigenschaften vererbt; einige Eigenschaften werden vererbt, andere wiederum nicht. Beispielsweise werden color und font-family vererbt, aber Boxmodell-Eigenschaften wie margin und padding nicht.

Vererbte Eigenschaften

Vererbbare Eigenschaften sind hauptsächlich diejenigen, die sich auf Text und Schriften beziehen.

Häufig vererbte Eigenschaften

  1. color: Textfarbe
1body {
2    color: black;
3}
  • In diesem Fall haben alle Kindelemente innerhalb des body schwarze Textfarbe.
  1. font-family: Schriftfamilie
1body {
2    font-family: "Times New Roman", cursive;
3}
  • Alle Kindelemente verwenden die Schriftart Arial.
  1. font-size: Textgröße
1body {
2    font-size: 16px;
3}
  • Der gesamte Text innerhalb des body ist standardmäßig 16px groß.
  1. line-height: Zeilenabstand
1p {
2    line-height: 1.5;
3}
  • Text innerhalb eines <p>-Elements wird mit dem 1,5-fachen Zeilenabstand angezeigt, was auch seine Kindelemente beeinflusst.
  1. text-align: Textausrichtung
1div {
2    text-align: center;
3}
  • Text und Inline-Elemente innerhalb eines div-Elements werden zentriert angezeigt.
  1. visibility: Element-Sichtbarkeit
1div {
2    visibility: hidden;
3}
  • visibility ist eine Eigenschaft, die die Sichtbarkeit eines Elements steuert. Wenn auf 'hidden' gesetzt, wird das Element unsichtbar.
  • In diesem Fall werden auch die Kindelemente innerhalb des div ausgeblendet.
  1. list-style: Listentil (Listenmarkierungen für <ul> und <ol>)
1ul {
2    list-style: square;
3}
  • In diesem Fall werden Listenelemente innerhalb des ul-Tags mit quadratischen Markern angezeigt.

Beispiel:

Nicht vererbte Eigenschaften

Eigenschaften, die sich auf Layout und das Boxmodell beziehen, werden normalerweise nicht vererbt. Diese Eigenschaften müssen für jedes Element individuell festgelegt werden.

Allgemeine nicht vererbte Eigenschaften

  1. margin, padding: Äußere und innere Ränder eines Elements
1div {
2    margin: 10px;
3    padding: 20px;
4}
  • Selbst wenn Sie äußere oder innere Ränder für ein div-Element festlegen, beeinflusst dies nicht dessen Kindelemente.
  1. border: Elementumrandung
1div {
2    border: 1px solid black;
3}
  • Selbst wenn ein Rahmen für ein Elternelement festgelegt ist, beeinflusst dies nicht die Kindelemente.
  1. width, height: Elementbreite und -höhe
1div {
2    width: 100px;
3    height: 50px;
4}
  • Die Breite und Höhe eines Elternelements beeinflussen nicht automatisch die Kindelemente.
  1. background: Hintergrundstil
1body {
2    background-color: lightblue;
3}
  • Die Hintergrundfarbe, die auf dem body-Element festgelegt ist, wirkt sich nicht direkt auf die Kindelemente aus. Wenn ein Kindelement jedoch einen transparenten Hintergrund hat, kann die Hintergrundfarbe des Elternelements durchscheinen.

Beispiel:

Vererbungskontrolle

Die Vererbung kann durch die Schlüsselwörter inherit, initial oder unset gesteuert werden.

  • Wenn Sie die Vererbung aktivieren möchten: Sie können die Vererbung explizit mit dem Schlüsselwort inherit erzwingen.
1div {
2    color: inherit;  /* Inherit the color from its parent element */
3}
  • Wenn Sie keine Vererbung wünschen: Sie können die Eigenschaft mit den Schlüsselwörtern initial oder unset auf ihren Anfangswert zurücksetzen.
1p {
2    color: initial;  /* Reset the color to its initial/default value */
3}

Beispiel:

Die all-Eigenschaft

Die all-Eigenschaft ist eine Eigenschaft, die nahezu alle CSS-Eigenschaften, einschließlich der vererbbaren, für ein bestimmtes Element auf einmal zurücksetzen kann. Insbesondere können Sie die folgenden drei Schlüsselwörter verwenden, um die Eigenschaften eines Elements festzulegen:.

  • initial: Setzt alle Eigenschaften auf ihre Anfangswerte zurück.
  • inherit: Erbt alle Eigenschaften vom Elternelement.
  • unset: Erbt die Eigenschaft, wenn sie vererbbar ist, ansonsten wird sie auf ihren Anfangswert zurückgesetzt.

all ist sehr nützlich, wenn Sie mehrere Eigenschaften auf einmal zurücksetzen oder festlegen möchten, anstatt nur bestimmte Eigenschaften einzeln zu definieren.

Beispiel für das Zurücksetzen auf Anfangswerte 

1.all-initial {
2    all: initial;
3    background-color: lightskyblue;
4}

  • Wenn Sie alle zuvor festgelegten Stile für ein bestimmtes Element zurücksetzen und es in seinen Anfangszustand zurückversetzen möchten, verwenden Sie all: initial wie folgt.

  • In diesem Beispiel werden alle Eigenschaften des <div>-Elements mit der Klasse .all-initial auf die Standardanfangswerte des Browsers zurückgesetzt.

Beispiel für Vererbung 

 1.parent-inherit {
 2    color: blue;
 3    font-size: 20px;
 4    border: 1px solid blue;
 5}
 6
 7.all-inherit {
 8    all: inherit;
 9    background-color: lightskyblue;
10}
  • Durch die Verwendung von all: inherit erben alle Eigenschaften vom Elternelement.
  • In diesem Beispiel erben Elemente mit der Klasse .all-inherit alle Eigenschaften, wie color und font-size, vom Elternelement.

Beispiel zur Bestimmung des Anfangswertes oder der Vererbung basierend auf Bedingungen 

 1.parent-unset {
 2    color: blue;
 3}
 4
 5.all-unset {
 6    font-weight: bold;
 7}
 8
 9.all-unset {
10    all: unset;
11}
  • Die Verwendung von all: unset bewirkt, dass Eigenschaften, wenn möglich, vererbt werden; andernfalls werden sie auf ihre Anfangswerte zurückgesetzt.
  • In diesem Fall wird color vererbt, während font-weight auf seinen Anfangswert, typischerweise normal, zurückgesetzt wird.

Beziehung mit Spezifität (Priorität) 

1.all-with-important {
2    color: red !important;
3    background-color: lightskyblue;
4}
5
6.all-with-important {
7    all: initial;
8}

  • Die all-Eigenschaft ist ein leistungsstarker Mechanismus zum Zurücksetzen, wird jedoch von der CSS-Spezifität beeinflusst. Wenn ein bestimmtes Element starke Stilvorgaben hat, kann die all-Eigenschaft diese Stile möglicherweise nicht überschreiben. Beispielsweise können Eigenschaften, die mit !important festgelegt sind, nicht beeinflusst werden.

  • In diesem Beispiel wird die Eigenschaft color nicht zurückgesetzt, selbst wenn Sie versuchen, den Stil mit all: initial zurückzusetzen, da die Spezifikation color: red !important gilt.

Block-Elemente und Inline-Elemente

Block-Elemente

  • Beispiel: <div>, <p>, <h1> 〜 <h6>, <ul>, <li>, <section>
  • Eigenschaften:
    • Sie erscheinen immer in einer neuen Zeile und dehnen sich aus, um die gesamte Breite ihres Elternelements auszufüllen.
    • Die Breite (width) und Höhe (height) können frei eingestellt werden.
    • Ränder (margin) und Abstände (padding) können in alle Richtungen festgelegt werden und wirken sich auf alle Seiten aus.
1div {
2    width: 80%;  /* Set the width to 80% of its parent element's width */
3    padding: 20px;  /* Add a padding of 20 pixels on all sides */
4    margin: 10px 0; /* Add a margin of 10 pixels top and bottom, 0 pixels left and right */
5}

Inline-Elemente

  • Beispiel: <span>, <a>, <strong>, <em>, <img>, <label>
  • Eigenschaften:
    • Sie erscheinen neben anderen Inline-Elementen in derselben Zeile.
    • Die Breite (width) und Höhe (height) können nicht direkt festgelegt werden (es sei denn, display: block wird angewendet).
    • Das Festlegen von vertikalen Rändern (margin) oder Abständen (padding) hat eine begrenzte Wirkung (horizontale Ränder und Abstände sind wirksam).
1a {
2    padding: 5px;  /* Padding for inline elements */
3    margin-right: 10px;  /* Set margin to the right */
4    color: blue;
5}

Unterschiede zwischen Block-Elementen und Inline-Elementen

  • Breiten- und Höheneinstellungen:

    • Block-Level-Elemente: Breite und Höhe können eingestellt werden.
    • Inline-Elemente: Breite und Höhe können in der Regel nicht eingestellt werden.

  • Rand und Innenabstand:

    • Block-Level-Elemente: Rand und Abstand werden auf alle Seiten angewendet.
    • Inline-Elemente: Rand und Abstand an der Ober- und Unterseite sind unwirksam oder haben eine begrenzte Wirkung.

  • Layout-Methode:

    • Block-Level-Elemente: Automatisch in einer neuen Zeile angeordnet.
    • Inline-Elemente: In derselben Zeile mit anderen Inline-Elementen ausgerichtet.

Wie Sie sehen können, gibt es Unterschiede darin, wie CSS-Stile auf Block-Elemente und Inline-Elemente angewendet werden. Bei Block-Elementen werden layoutbezogene CSS-Eigenschaften wie Breite, Höhe, Rand und Abstand wie angegeben angewendet. Im Gegensatz dazu können bei Inline-Elementen Layout-bezogene CSS-Eigenschaften wie Breite, Höhe, Rand oder Abstand möglicherweise nicht angewendet werden oder nur eingeschränkt wirksam sein.

CSS-Verarbeitung von Block-Elementen und Inline-Elementen 

1span {
2    display: block;  /* Display the span element as a block-level element */
3    width: 100px;
4    height: 50px;
5}

Indem jedoch die display-Eigenschaft auf block oder inline-block gesetzt wird, können Sie die Stile wie Breite und Höhe für Inline-Elemente anpassen, als wären sie Block-Elemente.

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

CSS-GrundlagenDetails zu Attributselektoren in CSS