Właściwości dziedziczne w CSS

Dziedziczenie

W CSS istnieją pewne właściwości, które są dziedziczone od rodziców przez dzieci.

Jeśli dla body ustawisz color: green, to body oraz wszystkie jego dzieci otrzymają zielony kolor.

Nagłówki (h1, h2, h3...), paragrafy i ogólnie tekst będzie na całej stronie zielony. Żeby przerwać ten łańcuch dziedziczenia, musisz w wybranym elemencie HTML nadpisać właściwość color inną wartością, np color: red. Od tego momentu, wybrany element oraz jego dzieci otrzymają nowy kolor.

Zapamiętaj! Ogromna większość właściwości w CSS nie jest dziedziczna!

Jest w tym dużo sensu. Gdyby wszystkie właściwości były dziedziczne, to nie robiłbyś nic innego, jak tylko nadpisywał wartości dla każdego elementu.

Bardziej obrazowy przykład: ustawiasz margin: 10px na elemencie body. Gdyby margin był dziedziczny (na szczęście nie jest), to efekt byłby taki, że wszystkie inne elementy jak nagłówki, paragrafy, linki, zdjęcia, guziki otrzymałyby margines 10px ze wszystkich stron. Świat byłby zdecydowanie gorszym miejscem 🙃.

Wymuszenie dziedziczenia

Jeśli dana właściwość nie jest domyślnie dziedziczna, to istnieje możliwość wymuszenia jej dziedziczenia poprzez wartość inherit.

Przykład z marginesem, który ma domyślną wartość 0, zatem normalnie nie jest dziedziczny:

div {
   margin: inherit;
}

Zastosowanie:

Okazuje się, że wymuszenie dziedziczenia może mieć również sens i zastosowanie dla właściwości (domyślnie) dziedzicznych! 🤯

Weźmy na tapetę linki i ich kolor, gdzie color jest przecież właściwością dziedziczną.

Jeśli nie napiszesz swoich reguł CSS dla linków, to dostaną one zazwyczaj kolor niebieski.

Nie jest to jednak domyślny kolor dla właściwości color. Niebieski kolor został zdefiniowany dla linków w stylach dostarczonych przez przeglądarkę.

Jeśli niebieski kolor nie przypadnie ci do gustu, to możesz zwyczajnie napisać swoją regułę i ustawić dowolny kolor.

a {
   color: pink;
}

Załóżmy jednak, że chcesz, aby kolor dla linków był taki sam jak kolor ich rodzica. A rodzicem raz może być paragraf <p>, innym razem nawigacja <nav> itd. Link ma się zawsze dynamicznie dostosować do rodzica, czyli odziedziczyć po nim kolor.

Jak to zrobić? Bardzo prosto:

a {
   color: inherit;
}

Lista właściwości dziedzicznych w CSS

Pogrubionym czcionką oznaczyłem właściwości, które warto zapamiętać, bo są często używane.

• border-collapse
• border-spacing
• caption-side
• color
• cursor
• direction
• empty-cells
• font-family
• font-size
• font-style
• font-variant
• font-weight
• font-size-adjust
• font-stretch
• font
• letter-spacing
• line-height
• list-style-image
• list-style-position
• list-style-type
• list-style
• orphans
• quotes
• tab-size
• text-align
• text-align-last
• text-indent
• text-justify
• text-shadow
• text-transform
• visibility
• white-space
• widows
• word-break
• word-spacing
• word-wrap