Übernahme

CSS-Podcast – 005: Übernahme

Angenommen, Sie haben CSS geschrieben, damit Elemente wie eine Schaltfläche aussehen.

<a href="http://example.com" class="my-button">I am a button link</a>

.my-button {
  display: inline-block;
  padding: 1rem 2rem;
  text-decoration: none;
  background: pink;
  font: inherit;
  text-align: center;
}

Dann fügen Sie einem Artikel ein Link-Element hinzu, mit dem class-Wert .my-button. Es gibt jedoch ein Problem, der Text nicht die gewünschte Farbe hat. Wie kam es dazu?

Einige CSS-Eigenschaften werden übernommen, wenn Sie keinen Wert für sie angeben. Bei dieser Schaltfläche wurde das color von diesem CSS übernommen:

article a {
  color: maroon;
}

In dieser Lektion erfahren Sie, warum das passiert und dass Vererbung eine leistungsstarke Funktion ist, mit der Sie weniger CSS schreiben können.

Übernahmevorgang

Sehen wir uns an, wie Vererbung funktioniert. mit diesem HTML-Snippet:

<html>
  <body>
    <article>
      <p>Lorem ipsum dolor sit amet.</p>
    </article>
  </body>
</html>

Das Stammelement (<html>) übernimmt nichts, da es das erste Element im Dokument ist. Fügen Sie CSS in das HTML-Element ein, und das Dokument wird kaskadiert.

html {
  color: lightslategray;
}

Die Eigenschaft color wird standardmäßig von anderen Elementen übernommen. Das html-Element hat color: lightslategray, Daher haben alle Elemente, die die Farbe übernehmen können, jetzt die Farbe lightslategray.

body {
  font-size: 1.2em;
}

p {
  font-style: italic;
}

Nur das <p> enthält kursiven Text, da dies das tiefste verschachtelte Element ist. Die Übernahme verläuft nur nach unten, nicht wieder nach oben zu den übergeordneten Elementen.

Welche Eigenschaften werden standardmäßig übernommen?

Nicht alle CSS-Eigenschaften werden standardmäßig übernommen. aber es gibt noch viele andere. Hier ist die gesamte Liste der Eigenschaften, die standardmäßig übernommen werden. aus der W3-Referenz aller CSS-Eigenschaften entnommen:

Funktionsweise der Übernahme

Für jedes HTML-Element ist jede CSS-Eigenschaft standardmäßig mit einem Anfangswert definiert. Ein Anfangswert ist eine Eigenschaft, die nicht übernommen wird und als Standardeinstellung angezeigt wird. wenn die Kaskade keinen Wert für dieses Element berechnet.

Eigenschaften, die übernommen werden können, werden nach unten kaskadiert, und untergeordnete Elemente erhalten einen berechneten Wert, der den Wert des übergeordneten Elements darstellt. Das bedeutet, wenn für ein übergeordnetes Element font-weight auf bold gesetzt ist, werden alle untergeordneten Elemente fett formatiert, es sei denn, font-weight ist auf einen anderen Wert festgelegt, oder das User-Agent-Stylesheet einen Wert für font-weight für dieses Element hat.

Übernahme explizit übernehmen und steuern

Die Vererbung kann sich auf unerwartete Weise auf Elemente auswirken. Daher hat CSS Tools, die Ihnen dabei helfen.

Das Keyword inherit

Mit dem Schlüsselwort inherit können Sie festlegen, dass für jedes Attribut der berechnete Wert des übergeordneten Elements übernommen wird. Dieses Schlüsselwort kann nützlich sein, indem Ausnahmen erstellt werden.

strong {
  font-weight: 900;
}

Mit diesem CSS-Snippet wird für alle <strong>-Elemente ein font-weight von 900 festgelegt. anstelle des Standardwerts bold. Dies entspricht font-weight: 700.

.my-component {
  font-weight: 500;
}

Die Klasse .my-component legt font-weight stattdessen auf 500 fest. Um die <strong>-Elemente in .my-component auch font-weight: 500 zu machen, fügen Sie Folgendes hinzu:

.my-component strong {
  font-weight: inherit;
}

Jetzt haben die <strong>-Elemente in .my-component den font-weight-Wert 500.

Sie können diesen Wert explizit festlegen, Wenn Sie jedoch inherit verwenden und sich das Preisvergleichsportal von .my-component in Zukunft ändert, können Sie garantieren, dass Ihr <strong> automatisch auf dem neuesten Stand ist.

Das Keyword initial

Die Übernahme kann zu Problemen mit Ihren Elementen führen. initial bietet Ihnen außerdem eine leistungsstarke Option zum Zurücksetzen.

Sie haben bereits gelernt, dass jedes Attribut in CSS einen Standardwert hat. Mit dem Schlüsselwort initial wird eine Eigenschaft auf diesen anfänglichen Standardwert zurückgesetzt.

aside strong {
  font-weight: initial;
}

Mit diesem Snippet wird die fett formatierte Schriftart aus allen <strong>-Elementen innerhalb eines <aside>-Elements entfernt. und sie auf eine normale Gewichtung setzen, also den Ausgangswert.

Das Keyword unset

Die Eigenschaft unset verhält sich anders, wenn eine Eigenschaft standardmäßig übernommen wird oder nicht. Wenn eine Eigenschaft standardmäßig übernommen wird, Das Keyword unset ist mit inherit identisch. Wenn die Eigenschaft nicht standardmäßig übernommen wird, hat das Schlüsselwort unset den Wert initial.

Es kann schwierig sein, sich zu merken, welche CSS-Eigenschaften standardmäßig unset kann in diesem Zusammenhang hilfreich sein. Beispielsweise wird color standardmäßig übernommen, margin jedoch nicht. Sie können also Folgendes schreiben:

/* Global color styles for paragraph in authored CSS */
p {
  margin-top: 2em;
  color: goldenrod;
}

/* The p needs to be reset in asides, so you can use unset */
aside p {
  margin: unset;
  color: unset;
}

Jetzt wird margin entfernt und color wird wieder zum übernommenen berechneten Wert.

Du kannst den unset-Wert auch mit dem Attribut all verwenden. Kehren wir zum obigen Beispiel zurück. Was passiert, wenn die globalen p-Stile zusätzliche Eigenschaften erhalten? Nur die Regel, die für margin und color festgelegt wurde, wird angewendet.

/* Global color styles for paragraph in authored CSS */
p {
    margin-top: 2em;
    color: goldenrod;
    padding: 2em;
    border: 1px solid;
}

/* Not all properties are accounted for anymore */
aside p {
    margin: unset;
    color: unset;
}

Wenn Sie die Regel aside p stattdessen in all: unset ändern, gilt Folgendes: welche globalen Stile in Zukunft auf p angewendet werden, sind sie immer nicht festgelegt.

aside p {
    margin: unset;
    color: unset;
    all: unset;
}

Wissen testen

Testen Sie Ihr Wissen über Vererbung

Welche der folgenden Eigenschaften sind vererbbar?

animation
Animationen werden nicht an Kinder weitergegeben.
font-size
🎉
color
🎉
text-align
🎉
line-height
🎉

Welcher Wert verhält sich wie inherit, es sei denn, es gibt nichts zu übernehmen und sich dann wie initial verhält?

reset
Kein gültiger Wert. Versuchen Sie es erneut.
unset
🎉
superset
Kein gültiger Wert. Versuchen Sie es erneut.

Ressourcen