Dziedziczenie stylów CSS

Chcesz, żeby cała strona o dynastii faraonów miała krój Georgia i ciemnobrązowy tekst. Możesz wpisać te same dwie deklaracje osobno dla nagłówków, akapitów, list i linków... albo raz, dla body. Druga droga działa dzięki dziedziczeniu.

Dziedziczenie stylów w CSS (Cascading Style Sheets) jest mechanizmem, który pozwala na przekazywanie wartości właściwości stylów z elementów rodziców na elementy potomne w drzewie DOM (Document Object Model). Dzięki dziedziczeniu możemy tworzyć spójny wygląd strony internetowej, stosując wartości właściwości zdefiniowane na wyższych poziomach hierarchii elementów. Działa to jak w dynastii: faraon przekazuje następcy tytuł i władzę, ale szaty każdy faraon dostaje własne.

Dziedziczenie jest szczególnie przydatne w przypadku właściwości, które są dziedziczone domyślnie. Oznacza to, że wartości tych właściwości zastosowane na elemencie rodzicu zostaną automatycznie odziedziczone przez elementy potomne, chyba że zostaną one nadpisane w regułach stylu dla tych elementów. Przykłady dziedziczonych właściwości to: color (kolor tekstu), font-family (rodzina czcionek), font-size (rozmiar czcionki) czy line-height (interlinia).

Jednak nie wszystkie właściwości są dziedziczone. Niektóre właściwości, takie jak background-color (kolor tła), border (obramowanie) czy padding (odstępy wewnętrzne), nie są dziedziczone automatycznie. W przypadku tych właściwości musimy jawnie określić wartości dla elementów potomnych.

Co się dziedziczy, a co nie?

Prosta zasada: dziedziczą się właściwości tekstu, a nie dziedziczą się właściwości pudełka.

Gdyby ramka się dziedziczyła, każdy akapit w obramowanej sekcji dostałby własną ramkę, a każdy link w akapicie - jeszcze jedną. Dlatego właściwości pudełka zostają przy elemencie, któremu je nadałeś.

Dziedziczenie stylów daje nam możliwość tworzenia spójnego i harmonijnego wyglądu strony internetowej. Możemy zdefiniować ogólne style na poziomie elementów rodziców i mieć pewność, że zostaną one odziedziczone przez elementy potomne, co ułatwia utrzymanie jednolitego wyglądu na całej stronie. Jednocześnie, dzięki możliwości nadpisania dziedziczonych wartości, możemy dostosować wygląd poszczególnych elementów, aby uzyskać pożądane efekty wizualne.

Przykład z body

Aby zrozumieć, jak działa dziedziczenie stylów CSS, rozważmy poniższy przykład:

<body>
  <h1>Przykład dziedziczenia</h1>
  <p>Paragraf z dziedziczonym kolorem i rodziną czcionek, ale z własnym rozmiarem czcionki.</p>
</body>

body {
  font-family: Arial, sans-serif;
  color: blue;
}
p {
  font-size: 20px;
}

W powyższym przykładzie, element <body> ma zdefiniowane style font-family i color. Ponieważ te właściwości są dziedziczone, elementy potomne, takie jak <h1> i <p>, również przyjmują te same wartości dla tych właściwości. Wartości te będą obowiązywać, o ile nie zostaną nadpisane przez inne style zdefiniowane bezpośrednio dla tych elementów.

W przypadku elementu <p>, wartość font-size została zdefiniowana bezpośrednio, a więc nie korzysta z wartości dziedziczonej z elementu rodzica.

Skąd ten kolor? Zapytaj DevTools

Gdy element ma styl, którego nie wpisałeś w jego regule, sprawdź go w narzędziach deweloperskich (F12). W panelu Styles pod regułami samego elementu znajdziesz sekcje "Inherited from body" albo "Inherited from div" - to style odziedziczone od przodków. Właściwości, które się nie dziedziczą, są tam wyszarzone.

Słowa kluczowe inherit i initial

Jeśli chcesz wymusić dziedziczenie właściwości, która domyślnie się nie dziedziczy, użyj słowa kluczowego inherit. Na przykład:

div {
  border: 2px solid gold;
}

p {
  border: inherit;
}

Akapit leżący w <div> przejmie od niego złotą ramkę, choć border domyślnie się nie dziedziczy. Właściwości dziedziczone, takie jak font-size, nie potrzebują inherit - przechodzą na dzieci same.

Działa to także w drugą stronę: słowo initial przywraca właściwości jej wartość początkową z definicji CSS, czyli odcina element od tego, co odziedziczył. Na przykład color: initial daje zwykle czarny tekst, nawet jeśli rodzic jest niebieski.

Praktyka

W edytorze poniżej kolor i krój pisma ustawiono tylko na sekcji .papyrus, a mimo to mają je wszystkie akapity. Zmień kolor w regule .papyrus i zobacz, jak zmienia się cały tekst. Potem usuń deklarację border: inherit z reguły .quote - ramka akapitu zniknie, bo border się nie dziedziczy:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Dziedziczenie stylów</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <section class="papyrus">
    <h2>Księga Umarłych</h2>
    <p>Ten akapit nie ma własnych reguł, a mimo to ma kolor i krój pisma sekcji.</p>
    <p class="quote">Ten akapit dostał ramkę dzięki <code>border: inherit</code>.</p>
  </section>
</body>
</html>

Pamiętaj: dziedziczenie to przekazywanie władzy w dynastii - rodzic oddaje dzieciom kolor i krój pisma, ale ramki, tła i odstępy każdy element musi dostać sam.