Kurs HTML

3.3. Dziedziczenie właściwości CSS

Strona główna > Kurs CSS > Rozdział 3: Kaskadowość, Specyficzność i Dziedziczenie > Dziedziczenie właściwości CSS

Wprowadzenie: Style "spływające" w dół drzewa DOM

Oprócz kaskadowości i specyficzności, kolejnym ważnym mechanizmem wpływającym na ostateczny wygląd elementów jest **dziedziczenie (inheritance)**. Polega ono na tym, że elementy HTML mogą "przejmować" wartości niektórych właściwości CSS od swoich elementów nadrzędnych (rodziców) w drzewie DOM.

Dzięki dziedziczeniu nie musimy jawnie definiować każdej właściwości dla każdego elementu. Możemy na przykład ustawić rodzinę czcionek (font-family) i kolor tekstu (color) dla elementu <body>, a te style zostaną automatycznie zastosowane do większości elementów tekstowych wewnątrz <body>, chyba że zostaną nadpisane przez bardziej specyficzne reguły.

Które właściwości są dziedziczone?

Nie wszystkie właściwości CSS są dziedziczone domyślnie. Dziedziczone są głównie te właściwości, które mają sens w kontekście dziedziczenia i dotyczą wyglądu tekstu lub elementów potomnych:

  • Właściwości związane z tekstem: color, font (i jego składowe jak font-family, font-size, font-weight, font-style), line-height, text-align, text-indent, text-transform, letter-spacing, word-spacing, white-space.
  • Właściwości list: list-style (i jego składowe jak list-style-type, list-style-position, list-style-image).
  • Widoczność: visibility.
  • Kursor: cursor.
  • I kilka innych.

Właściwości, które **nie są dziedziczone** domyślnie, to głównie te związane z modelem pudełkowym (box model), pozycjonowaniem i tłem, ponieważ ich dziedziczenie często nie miałoby sensu lub prowadziłoby do nieoczekiwanych efektów:

  • margin, padding, border
  • width, height
  • background (i jego składowe)
  • position, top, right, bottom, left, z-index
  • display, float, clear
  • overflow
  • I wiele innych.

Dokładną informację o tym, czy dana właściwość jest dziedziczona, można znaleźć w jej dokumentacji (np. na MDN Web Docs).

Jak działa dziedziczenie?

  1. Jeśli dla danej właściwości elementu **nie ma żadnej zdefiniowanej wartości** wynikającej z kaskady (czyli żadna reguła autora, użytkownika ani przeglądarki nie pasuje bezpośrednio do tego elementu i tej właściwości), przeglądarka sprawdza, czy ta właściwość jest dziedziczona.
  2. Jeśli właściwość **jest dziedziczona**, element przejmuje obliczoną wartość tej właściwości od swojego **bezpośredniego rodzica** w drzewie DOM.
  3. Jeśli właściwość **nie jest dziedziczona**, element przyjmuje jej **wartość początkową (initial value)** zdefiniowaną w specyfikacji CSS dla tej właściwości.

Przykład:

<body>
    <div>
        <p>Tekst paragrafu.</p>
    </div>
</body>
body {
  color: blue; /* Dziedziczone */
  border: 1px solid black; /* Niedziedziczone */
}

div {
  /* Brak definicji color i border */
}

W tym przypadku:

  • Element <div> nie ma zdefiniowanego koloru ani obramowania.
  • color jest dziedziczony, więc <div> przejmie color: blue; od <body>.
  • border nie jest dziedziczony, więc <div> nie otrzyma obramowania od <body> (przyjmie wartość początkową, czyli brak obramowania).
  • Element <p> nie ma zdefiniowanego koloru. Ponieważ color jest dziedziczony, przejmie go od swojego rodzica, czyli <div>. A ponieważ <div> odziedziczył color: blue; od <body>, to <p> również będzie miał color: blue;.

Dziedziczenie działa w dół drzewa DOM, przechodząc z rodzica na dziecko, dopóki nie zostanie nadpisane przez bardziej specyficzną regułę lub styl inline.

Sterowanie dziedziczeniem: Wartość inherit

Czasami chcemy **wymusić dziedziczenie** dla właściwości, która domyślnie nie jest dziedziczona. Możemy to zrobić, jawnie ustawiając wartość tej właściwości na słowo kluczowe inherit.

.rodzic {
  border: 2px dashed green;
}

.dziecko {
  /* Wymuszenie dziedziczenia obramowania od rodzica */
  border: inherit; 
}

W tym przykładzie, element z klasą .dziecko otrzyma takie samo obramowanie (2px dashed green), jakie ma jego rodzic z klasą .rodzic, mimo że właściwość border normalnie nie jest dziedziczona.

Wartość inherit można zastosować do **każdej** właściwości CSS.

Istnieją również inne wartości pozwalające kontrolować dziedziczenie i resetowanie wartości (initial, unset, revert), które omówimy w następnej lekcji.

Zadania praktyczne

Zadanie 1 (z rozwiązaniem)

Masz poniższy kod HTML i CSS. Jaki kolor i jakie obramowanie będzie miał element <em>? Uzasadnij.

HTML:

<div class="kontener">
    <p>Zwykły tekst i <em>emfaza</em>.</p>
</div>

CSS:

.kontener {
  color: purple;
  border: 1px solid red;
}

p {
  /* Brak definicji color i border */
}

Rozwiązanie:

Element <em> będzie miał:

  • Kolor: fioletowy (purple). Właściwość color jest dziedziczona. <em> dziedziczy ją od <p>, a <p> dziedziczy ją od <div class="kontener">.
  • Brak obramowania. Właściwość border nie jest dziedziczona. Ani <p>, ani <em> nie dziedziczą obramowania od <div class="kontener">. Przyjmą wartość początkową (brak obramowania).

Zadanie 2 (do samodzielnego wykonania)

Ustaw dla elementu <body> wyrównanie tekstu do środka (text-align: center;). Dodaj do body nagłówek <h1> i paragraf <p>. Czy tekst w nagłówku i paragrafie również będzie wyśrodkowany? Dlaczego?

Zadanie 3 (do samodzielnego wykonania)

Masz element <div class="rodzic" style="background-color: lightblue;"> zawierający <div class="dziecko">. Czy .dziecko odziedziczy kolor tła od .rodzic? Jak możesz sprawić, aby .dziecko miało ten sam kolor tła co .rodzic, używając dziedziczenia?

FAQ - Najczęściej zadawane pytania

Czy dziedziczenie ma niższą wagę niż jakakolwiek reguła CSS?

Tak. Wartość odziedziczona ma najniższy priorytet w kaskadzie. Jakakolwiek wartość zdefiniowana bezpośrednio dla elementu (przez styl inline, regułę autora, użytkownika lub nawet domyślną regułę przeglądarki dla tego elementu) nadpisze wartość odziedziczoną.

Czy mogę "wyłączyć" dziedziczenie?

Nie można bezpośrednio "wyłączyć" dziedziczenia, ale można je skutecznie nadpisać. Jeśli nie chcesz, aby element dziedziczył wartość od rodzica, po prostu zdefiniuj dla niego inną wartość za pomocą reguły CSS. Możesz też użyć wartości specjalnych jak initial lub unset (omówionych w następnej lekcji), aby zresetować wartość do początkowej lub domyślnej.

Dlaczego marginesy i paddingi nie są dziedziczone?

Gdyby marginesy i paddingi były dziedziczone, prowadziłoby to do bardzo nieintuicyjnych i trudnych do kontrolowania efektów. Każdy zagnieżdżony element kumulowałby marginesy/paddingi swoich przodków, co szybko doprowadziłoby do ogromnych odstępów. Model pudełkowy jest zazwyczaj definiowany indywidualnie dla każdego elementu.

Gdzie znajdę listę wszystkich dziedziczonych właściwości?

Najlepszym źródłem jest dokumentacja CSS, na przykład MDN Web Docs (MDN CSS Reference). Każda strona opisująca daną właściwość CSS zawiera sekcję "Formal definition", gdzie podana jest informacja "Inherited: yes" lub "Inherited: no".