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:
- Azimut
- Rahmen minimieren
- border-spacing
- Untertitelseite
- Farbe
- cursor
- direction
- leere-Zellen
- font-family
- font-size
- Schriftart
- Schriftvariante
- Schriftstärke
- Schriftart
- letter-spacing
- line-height
- list-style-image
- list-style-position
- list-style-type
- list-style
- Waisen
- Zitate
- Text ausrichten
- Texteinzug
- text-transform
- Sichtbarkeit
- Leerzeichen
- Witwen
- word-spacing
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
line-height
color
text-align
font-size
Welcher Wert verhält sich wie inherit
, es sei denn, es gibt nichts zu übernehmen und
sich dann wie initial
verhält?
unset
reset
superset