Dziedziczenie

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:

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?

animation
Animacje nie są przekazywane dzieciom.
font-size
🎉
color
🎉
text-align
🎉
line-height
🎉

Która wartość zachowuje się jak inherit, chyba że nie ma niczego do dziedziczenia i zachowuje się jak initial?

reset
nieprawidłowa wartość, spróbuj ponownie!
unset
🎉
superset
nieprawidłowa wartość, spróbuj ponownie!

Zasoby