Podcast CSS – 005: Dziedziczenie
Załóżmy, że właśnie napisałeś(-aś) kod CSS, aby elementy wyglądały jak przyciski.
<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;
}
Następnie dodajesz element link do artykułu z treścią,
z wartością class
równą .my-button
. Jest jednak pewien problem,
tekst ma inny kolor niż powinien. Jak do tego doszło?
Niektóre właściwości CSS dziedziczą, jeśli nie określisz dla nich wartości.
W przypadku tego przycisku odziedziczy on parametr color
z tej usługi porównywania cen:
article a {
color: maroon;
}
Z tej lekcji dowiesz się, dlaczego tak się dzieje, jak dziedziczenie jest potężną funkcją, która pomaga pisać mniej arkuszy CSS.
Proces dziedziczenia
Przyjrzyjmy się teraz dziedziczeniu. za pomocą tego fragmentu kodu HTML:
<html>
<body>
<article>
<p>Lorem ipsum dolor sit amet.</p>
</article>
</body>
</html>
Element główny (<html>
) nie będzie niczego dziedziczyć, ponieważ jest pierwszym elementem w dokumencie.
Do elementu HTML dodaj kilka stylów CSS,
i zaczyna spływać po dokumencie w dół.
html {
color: lightslategray;
}
Właściwość color
jest domyślnie dziedziczona przez inne elementy.
Element html
zawiera color: lightslategray
,
dlatego wszystkie elementy, które mogą dziedziczyć kolor, będą miały teraz kolor lightslategray
.
body {
font-size: 1.2em;
}
p {
font-style: italic;
}
Tylko element <p>
będzie zawierać kursywę, ponieważ jest to najgłębszy zagnieżdżony element.
Dziedziczenie przebiega tylko w dół, a nie w dół względem elementów nadrzędnych.
Które właściwości są domyślnie dziedziczone?
Nie wszystkie właściwości CSS są dziedziczone domyślnie, ale jest ich sporo. Oto cała lista właściwości dziedziczonych domyślnie, pobrane z odniesienia W3 do wszystkich właściwości CSS:
- azymut
- border-zwiń,
- border-spacing
- napisy-side
- color [kolor]
- kursor
- kierunek
- puste komórki
- font-family
- font-size
- font-style,
- wariant czcionki
- grubość czcionki
- czcionka
- letter-spacing
- line-height
- list-style-image
- list-style-position
- list-style-type
- list-style
- sierotki
- cytaty
- text-align
- text-indent
- text-transform
- widoczność
- spacja
- wdowy
- word-spacing
Jak działa dziedziczenie
Każdy element HTML ma każdą właściwość CSS zdefiniowaną domyślnie wraz z wartością początkową. Wartość początkowa to właściwość, która nie jest dziedziczona i wyświetlana jako domyślna. jeśli kaskada nie obliczy wartości dla tego elementu.
Właściwości, które mogą być dziedziczone kaskadowo w dół,
a elementy podrzędne otrzymają obliczoną wartość reprezentującą wartość elementu nadrzędnego.
Oznacza to, że jeśli element nadrzędny font-weight
ma wartość bold
, wszystkie elementy podrzędne będą pogrubione.
chyba że ich font-weight
ma ustawioną inną wartość,
lub arkusz stylów klienta użytkownika zawiera wartość font-weight
dla tego elementu.
Bezpośrednie dziedziczenie i kontrolowanie dziedziczenia
Dziedziczenie może wpływać na elementy w nieoczekiwany sposób, więc CSS ma narzędzia, które mogą w tym pomóc.
Słowo kluczowe inherit
Możesz użyć słowa kluczowego inherit
, aby dowolna usługa dziedziczyła obliczoną wartość z elementu nadrzędnego.
Przydatnym sposobem korzystania z tego słowa kluczowego jest tworzenie wyjątków.
strong {
font-weight: 900;
}
Ten fragment kodu CSS ustawia we wszystkich elementach <strong>
wartość font-weight
o wartości 900
,
zamiast domyślnej wartości bold
, która odpowiada wartości font-weight: 700
.
.my-component {
font-weight: 500;
}
Klasa .my-component
ustawia font-weight
na 500
.
Aby utworzyć elementy <strong>
wewnątrz .my-component
również font-weight: 500
, dodaj:
.my-component strong {
font-weight: inherit;
}
Teraz elementy <strong>
wewnątrz .my-component
będą miały font-weight
o wartości 500
.
Możesz ustawić tę wartość,
ale jeśli w przyszłości będziesz używać usługi inherit
oraz usługi porównywania cen .my-component
,
możesz zagwarantować, że Twoje urządzenie <strong>
będzie automatycznie aktualizowane.
Słowo kluczowe initial
Dziedziczenie może powodować problemy z elementami, a initial
zapewnia skuteczną opcję resetowania.
Wiesz już, że każda właściwość w CSS ma wartość domyślną.
Słowo kluczowe initial
przywraca właściwość początkową do wartości domyślnej.
aside strong {
font-weight: initial;
}
Ten fragment spowoduje usunięcie pogrubionej wagi ze wszystkich elementów <strong>
wewnątrz elementu <aside>
. Zamiast tego
normalnej wagi, która jest wartością początkową.
Słowo kluczowe unset
Właściwość unset
działa inaczej, niezależnie od tego, czy jest domyślnie dziedziczona.
Jeśli właściwość jest dziedziczona domyślnie,
słowo kluczowe unset
będzie takie samo jak inherit
.
Jeśli właściwość nie jest domyślnie dziedziczona, wartość słowa kluczowego unset
ma wartość initial
.
Zapamiętanie, które właściwości CSS są domyślnie dziedziczone, może być trudne,
W tym kontekście może pomóc Ci unset
.
Na przykład pole color
jest domyślnie dziedziczone,
, ale margin
nie, więc możesz napisać to:
/* 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;
}
Element margin
został usunięty, a color
wraca do dziedziczonej obliczonej wartości.
Wartości unset
możesz też używać z właściwością all
.
Wracając do powyższego przykładu,
co się stanie, jeśli globalne style p
będą miały kilka dodatkowych właściwości?
Zastosowanie będzie miała tylko reguła ustawiona dla tych elementów: margin
i color
.
/* 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;
}
Jeśli zmienisz regułę aside p
na all: unset
,
nie ma znaczenia, jakie style globalne zostaną zastosowane do p
w przyszłości,
są one zawsze nieskonfigurowane.
aside p {
margin: unset;
color: unset;
all: unset;
}
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o dziedziczeniu
Które z tych właściwości są dziedziczone?
color
line-height
font-size
animation
text-align
Która wartość zachowuje się jak inherit
, chyba że nie ma niczego do dziedziczenia i
zachowuje się jak initial
?
unset
reset
superset