Dziedziczenie stylów CSS
Co oznacza termin dziedziczenie stylów CSS?
Hierarchia elementówCo oznacza termin dziedziczenie stylów CSS?
- Przywrócenie wartości domyślnej {...: initial}
Jak przywrócić domyślne formatowanie elementów na stronie?
- Wymuszenie dziedziczenia {...: inherit}
W jaki sposób wymusić przywrócenie dziedziczenia stylów CSS?
- Odwołanie wartości {...: unset}
Jak odwołać formatowanie wcześniej przypisane do elementu na stronie?
- Przywrócenie wartości pierwotnej {...: revert}
Jak przywrócić pierwotny wygląd wybranemu elementowi na stronie?
- Resetowanie wszystkich wartości {all}
W jaki sposób zresetować (wyczyścić, usunąć) całe formatowanie wybranemu elementowi na stronie?
PowtórkaCSS
Hierarchia elementów
Co oznacza termin dziedziczenie stylów CSS?
Z drzewem dokumentu związana jest własność dziedziczności stylów. Polega ona na tym, że elementy leżące niżej w hierarchii (potomkowie), jeśli nie zaznaczymy inaczej, dziedziczą (przejmują) atrybuty formatowania, które zostały nadane ich przodkom.
Niestety w niektórych starszych przeglądarkach internetowych zdarzała się błędna interpretacja dziedziczenia stylów. Problemy stwarzały np. elementy tabeli: nawet jeśli zdefiniowaliśmy określoną wielkość czcionki dla elementu wyżej w hierarchii, w Internet Explorerze 5 nie spowoduje to zmiany tej własności w poszczególnych komórkach (TD) ani w tytule tabeli (CAPTION). Natomiast w MSIE 6 wszystko jest w porządku, ale nie w trybie Quirks.
Przykład
To jest akapit koloru zielonego, wewnątrz którego znajduje się: pochylenie oraz podkreślenie, którym nie zostały nadane żadne style, a więc dziedziczą je po przodku, czyli po akapicie (są również zielone).
A to jest pogrubienie, które znajduje się także wewnątrz tego samego akapitu, ale został mu nadany atrybut koloru czcionki (biały) oraz koloru tła (niebieski) i dlatego nie odziedziczył stylu po przodku.
Przywrócenie wartości domyślnej {...: initial}
Jak przywrócić domyślne formatowanie elementów na stronie?
CSS 3
selektor { cecha: initial }Dziedziczenie stylów to bardzo przydatna funkcja w języku CSS. Dzięki niej nie musimy definiować np. koloru tekstu dla każdego elementu strony osobno. Zdarzają się jednak przypadki, kiedy takie zachowanie może nie być dla nas pożądane. Na szczęście istnieje sposób na odwołanie jego efektów dla wybranych sytuacji.
Każda cecha CSS ma określoną wartość domyślną, która zostanie przyjęta, jeśli nie określimy inaczej. Na przykład dla wartości koloru tekstu może to być barwa czarna, a dla koloru tła - biała. Wartości domyślne są przypisywane podczas tzw. procesu inicjalizacji.
Wartości domyślne (inicjalizacja) dla poszczególnych cech CSS możesz sprawdzić w rozdziałach: Komendy CSS 2 oraz Komendy CSS3.
Specjalna wartość initial, którą można przypisać do dowolnej cechy CSS, pozwala przywrócić wartość domyślną bez względu na dziedziczenie stylów.
Jeśli chcesz przywrócić pierwotny wygląd elementowi - tzn. zawsze jaki był przed dołączeniem naszych stylów do dokumentu - sprawdź, czy w takim przypadku bardziej odpowiednie nie będzie użycie wartości revert.
Przykład {...: initial}
To jest akapit koloru zielonego, wewnątrz którego znajduje się: pochylenie oraz podkreślenie, którym nie zostały nadane żadne style, a więc dziedziczą je po przodku, czyli po akapicie (są również zielone).
A to jest pogrubienie, które znajduje się także wewnątrz tego samego akapitu, ale został mu nadany atrybut koloru czcionki oraz koloru tła jako "initial" i dlatego nie odziedziczył stylu po przodku.
Oczywiście w powyższym przykładzie moglibyśmy po prostu ustawić kolor tekstu pogrubienia na czarny, a tło na białe. Jednak warto pamiętać, że nie w każdej sytuacji odpowiadałoby to wartościom domyślnym. Na przykład jeśli użytkownik ustawi ciemny motyw w swoim systemie operacyjnym, domyślnym kolorem tekstu może być biały, a tła - czarny. Dzięki użyciu wartości initial mamy pewność, że tekst wyświetli się w odpowiedni sposób.
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
initial | 1 2008-12-11 | 19 2013-02-19 | 13 2015-11-12 | 15 2013-07-02 | 1.2 2004-02-02 |
Wymuszenie dziedziczenia {...: inherit}
W jaki sposób wymusić przywrócenie dziedziczenia stylów CSS?
selektor { cecha: inherit }Dziedziczenie stylów jest domyślnym zachowaniem w języku CSS. To znaczy nie trzeba nic robić, żeby z niego skorzystać - zostanie ono zastosowane automatycznie. Dopiero kiedy wybranemu elementowi przypiszemy jakiś styl, nie odziedziczy on go po swoich przodkach (czyli znacznikach, wewnątrz których się znajduje).
A co jeśli się rozmyślimy i jednak będziemy chcieli skorzystać z dziedziczenia? Odpowiedź wydaje się oczywista: po prostu wystarczy usunąć ustawiony styl z wybranego elementu i wtedy odziedziczy go on po przodku. Problem w tym, że nie zawsze jest to możliwe. Wyobraźmy sobie, że np. wszystkim znacznikom pogrubienia w akapicie nadaliśmy jakiś kolor. Ale jednocześnie chcielibyśmy zrobić jeden wyjątek: jeśli pogrubienie znajduje się wewnątrz pochylenia, to powinno mieć kolor taki jak cały akapit. Nie możemy zatem w prosty sposób usunąć koloru, bo wtedy utracilibyśmy go dla wszystkich elementów pogrubienia, a nie tylko w tym jednym, o który nam chodzi.
Właśnie na taką okoliczność została stworzona wartość inherit, którą można przypisać do dowolnej cechy CSS. Wymusza ona powrót do standardowego zachowania wynikającego z dziedziczenia stylów.
Przykład {...: inherit}
To jest akapit koloru zielonego. Do jego elementów podrzędnych został przypisany specjalny styl powodujący, że każde pogrubienie, które się znajduje wewnątrz niego, przyjmie atrybut koloru czcionki (biały) oraz koloru tła (niebieski).
Do elementów podrzędnych tego akapitu został jednak przypisany drugi styl. Dzięki niemu jeśli umieścimy pogrubienie wewnątrz pochylenia, jego kolor tekstu oraz tła przyjmą wartość "inherit". Zatem zostaną odziedziczone z akapitu (tekst będzie zielony).
Dla zainteresowanych
Powyższy efekt został uzyskany przy pomocy selektora typu i selektora potomka umieszczonych w arkuszu stylów:
p { color: green; }
p b { color: white; background-color: blue; }
p i b { color: inherit; background-color: inherit; }Przeglądarki
Chrome | Firefox | Edge | Opera | Safari | |
|---|---|---|---|---|---|
inherit | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 4 2000-06-28 | 1 2003-06-23 |
Odwołanie wartości {...: unset}
Jak odwołać formatowanie wcześniej przypisane do elementu na stronie?
CSS 3
selektor { cecha: unset }Nie wszystkie cechy CSS podlegają dziedziczeniu. Wydaje się logiczne, że jeśli ustawimy określony kolor tekstu, to chcemy, aby również każdy z elementów podrzędnych miał właśnie taki kolor. Ale gdybyśmy w ten sposób postąpili np. z obramowaniem, efekt byłby dziwaczny - każdy element podrzędny byłby ujęty w oddzielną ramkę. Z tego właśnie powodu obramowanie jest jedną z cech CSS niepodlegających dziedziczeniu.
W rozdziałach: Komendy CSS 2 oraz Komendy CSS3 możesz sprawdzić, które cechy CSS podlegają, a które nie podlegają dziedziczeniu.
Specjalna wartość unset, którą możemy przypisać do dowolnej cechy CSS, łączy w sobie działanie wcześniej przedstawionych w tym rozdziale technik. Jeżeli przypiszemy ją do cechy CSS, która podlega dziedziczeniu, zachowa się jak w przypadku inherit. W przeciwnym razie działa jak initial. W praktyce oznacza to, że po prostu odwołuje ona wartości wcześniej przypisane do elementu bez względu na to, czy podlegają dziedziczeniu.
Przykład {...: unset}
To jest akapit koloru zielonego. Do jego elementów podrzędnych został przypisany specjalny styl powodujący, że każde pogrubienie, które się znajduje wewnątrz niego, przyjmie atrybut koloru czcionki (biały), koloru tła (niebieski) oraz koloru obramowania (czerwony).
Do elementów podrzędnych tego akapitu został jednak przypisany drugi styl. Dzięki niemu jeśli umieścimy pogrubienie wewnątrz pochylenia, jego kolor tekstu, tła oraz obramowania przyjmą wartość "unset". Zatem kolor tekstu zostanie odziedziczony z akapitu (tekst będzie zielony), natomiast kolor obramowania przyjmie wartość domyślną (taką samą co kolor tekstu - również zielony).
Dla zainteresowanych
Powyższy efekt został uzyskany przy pomocy selektora typu i selektora potomka umieszczonych w arkuszu stylów:
p { color: green; }
p b { color: white; background-color: blue; border-color: red; border-style: solid; }
p i b { color: unset; background-color: unset; border-color: unset; }Przeglądarki
Chrome | Firefox | Edge | Opera | Safari | |
|---|---|---|---|---|---|
unset | 41 2015-03-03 | 27 2014-02-04 | 13 2015-11-12 | 28 2015-03-10 | 9.1 2016-03-21 |
Przywrócenie wartości pierwotnej {...: revert}
Jak przywrócić pierwotny wygląd wybranemu elementowi na stronie?
CSS 3
selektor { cecha: revert }Każda przeglądarka ma wbudowany domyślny arkusz stylów. Dzięki niemu nawet jeśli nie dołączymy żadnych własnych stylów do dokumentu, to np. tekst zawarty w znaczniku B i tak będzie pogrubiony. To bardzo przydatna funkcja, bo przeglądarka w ten sposób załatwia za nas sporo pracy.
Może się jednak zdarzyć, że w naszym arkuszu stylów zmienimy sposób formatowania jakiegoś elementu, ale potem będziemy chcieli przywrócić mu pierwotny wygląd. Oczywiście najprostszym sposobem byłoby po prostu usunięcie wybranych deklaracji z naszych stylów, ale nie zawsze jest to możliwe. Czasem mogłoby to wymagać przebudowania całego arkusza od początku albo po prostu byłoby niewygodne. W takim przypadku pomocna okazuje się specjalna wartość revert, którą można przypisać do dowolnej cechy CSS. Dzięki niej element może w każdej chwili wrócić do swojego pierwotnego wyglądu - tzn. takiego, jak został określony we wbudowanym arkuszu stylów przeglądarki.
Działanie wartości revert może się wydawać nieco podobne do initial. Istnieje jednak zasadnicza różnica: initial zawsze ustawia domyślną wartość wybranej cechy CSS (zobacz sekcje "inicjalizacja" w rozdziałach: Komendy CSS 2 i Komendy CSS3) bez względu na element, do którego zostanie przypisana. Oznacza to, że np. przypisanie stylu "font-weight: initial" do znacznika B spowoduje, że tekst w nim zawarty nie będzie pogrubiony - ponieważ właśnie taka jest wartość domyślna dla własności wagi czcionki. Natomiast użycie w tym przypadku wartości revert przywróci wytłuszczenie tekstu.
Przykład {...: revert}
To jest akapit koloru zielonego. Do jego elementów podrzędnych został przypisany specjalny styl powodujący, że każde pogrubienie, które się znajduje wewnątrz niego, przyjmie atrybut koloru czcionki (biały) oraz koloru tła (niebieski), ale tekst nie będzie wytłuszczony.
Do elementów podrzędnych tego akapitu został jednak przypisany drugi styl. Dzięki niemu jeśli umieścimy pogrubienie wewnątrz pochylenia, jego kolor tekstu oraz tła, a także waga czcionki przyjmą wartość "revert". Zatem kolory zostaną odziedziczone z akapitu (tekst będzie zielony), natomiast sama treść zostanie standardowo wytłuszczona.
Dla zainteresowanych
Powyższy efekt został uzyskany przy pomocy selektora typu i selektora potomka umieszczonych w arkuszu stylów:
p { color: green; }
p b { color: white; background-color: blue; font-weight: normal; }
p i b { color: revert; background-color: revert; font-weight: revert; }Przeglądarki
Chrome | Firefox | Edge | Opera | Safari | |
|---|---|---|---|---|---|
revert | 84 2020-07-27 | 67 2019-05-21 | 84 2020-07-16 | 70 2020-07-27 | 9.1 2016-03-21 |
Resetowanie wszystkich wartości {all}
W jaki sposób zresetować (wyczyścić, usunąć) całe formatowanie wybranemu elementowi na stronie?
CSS 3
selektor { all: wartość }Natomiast jako wartość należy podać:
- initial - przywrócenie wartości domyślnych
- inherit - wymuszenie dziedziczenia wartości
- unset - odwołanie wartości
- revert - przywrócenie wartości pierwotnych
Sposoby przywracania domyślnych wartości bądź domyślnego zachowania, opisane wcześniej w tym rozdziale, mogą się okazać bardzo pomocne. Jednak w niektórych sytuacjach mają poważną wadę: trzeba je przypisywać oddzielnie do każdej cechy CSS. Problem ten rozwiązuje specjalna właściwość all, która pozwala za jednym zamachem zrobić to dla wszystkich cech CSS wybranego elementu na stronie. Wyjątkiem są jedynie własności: direction (kierunek tekstu) i unicode-bidi (algorytm dwukierunkowego tekstu), których wartości nie zostaną zmienione. Ale tak naprawdę zwykle w ogóle nie zaleca się ich używać w języku CSS, ponieważ mają one swoje odpowiedniki w języku HTML.
Jednym z przykładowych zastosowań tej własności może być tworzenie widżetów, które często są dostarczane przez podmioty zewnętrzne do wstawienia na swojej stronie. Ponieważ elementy takie są osadzane w wielu różnych serwisach, nie ma możliwości efektywnie dopasować ich wyglądu do każdej strony. Dlatego ich twórcy najczęściej projektują jakiś jeden uniwersalny wygląd i dążą do tego, aby wszędzie wyglądały tak samo. Może w tym pomóc ustawienie na elemencie najbardziej nadrzędnym widżetu deklaracji "all: initial", która zresetuje wszystkie cechy CSS do ich wartości domyślnych. Trzeba jednak pamiętać o dwóch sprawach:
- Zresetowane zostaną naprawdę wszystkie wartości. To oznacza m.in., że nawet element DIV przyjmie sposób wyświetlania inline, ponieważ właśnie to stanowi wartość domyślną.
- Nie zostaną zresetowane wartości przypisane do elementów podrzędnych. Jeśli nie były wprost odziedziczone, to trzeba je resetować osobno.
Przykład {all}
Ten akapit ma zresetowane wszystkie style do wartości domyślnych, ponieważ została mu przypisana deklaracja "all: initial".
A to jest pogrubienie, które znajduje się wewnątrz tego akapitu. Odziedziczyło ono zresetowany rodzaj czcionki. Ale jej waga nie została zmieniona - tekst nadal jest wizualnie wytłuszczony - ponieważ zostało to oddzielne przypisane do tego elementu.
Przeglądarki
Chrome | Firefox | Edge | Opera | Safari | |
|---|---|---|---|---|---|
all: wartość | 37 2014-08-26 | 27 2014-02-04 | 79 2020-01-15 | 24 2014-09-02 | 9.1 2016-03-21 |
Powtórka
Sprawdź, czy pamiętasz, za co odpowiadają poniższe fragmenty kodu źródłowego CSS. W razie wątpliwości kliknij odnośnik "Zobacz więcej..." pod wybraną grupą przykładów.