Dziedziczenie i właściwość all
Pozna Pan/Pani zasady dziedziczenia w CSS oraz używanie właściwości all do resetowania odziedziczonych stylów.
Dziedziczenie i właściwość all to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
Czym jest dziedziczenie
Niektóre właściwości CSS automatycznie przekazują swoją obliczoną wartość elementom potomnym. To właśnie dziedziczenie. Pozwala uniknąć zapisywania tej samej reguły dla każdego elementu komponentu.
Właściwości dziedziczone
Typowo dziedziczone są właściwości typografii i tekstu:
font-family,font-size,font-weight,font-stylecolorline-heightletter-spacingtext-alignvisibility- właściwości niestandardowe CSS
Właściwości niedziedziczone
Typowo NIE są dziedziczone właściwości modelu pudełkowego i układu:
margin,padding,borderwidth,heightbackgrounddisplay,positionbox-shadow,transform
Słowo kluczowe inherit
Wymuś dziedziczenie jawnie za pomocą słowa kluczowego inherit — jest to przydatne w przypadku elementów formularzy, które domyślnie nie dziedziczą czcionki:
<div style="font-family: Georgia, serif; font-size: 20px; color: darkred;">
<input type="text" placeholder="Inherits font/color" />
<button>Button inherits too</button>
<textarea>Inherits</textarea>
<select><option>Option A</option></select>
</div>Słowo kluczowe initial
Słowo kluczowe initial resetuje właściwość do jej początkowej wartości domyślnej przeglądarki, zgodnie ze specyfikacją CSS — z pominięciem dziedziczenia i stylów agenta użytkownika.
<div style="font-size: 30px; color: tomato;">
<p>Normal text inherits large tomato-colored style from its parent.</p>
<p class="reset-text">This text resets to browser defaults (initial) — medium size, black color.</p>
</div>Słowo kluczowe unset
unset działa zależnie od kontekstu:
- dla właściwości dziedziczonych działa jak
inherit - dla właściwości niedziedziczonych działa jak
initial
Skutecznie „czyści” właściwość, przywracając jej naturalny stan.
<div style="color: tomato;">
<p style="margin: 40px;">Normal paragraph — keeps its large margin, inherits tomato color.</p>
<p class="clear-styles" style="margin: 40px;">Unset paragraph — color unset (still inherits tomato), margin unset (resets to 0).</p>
</div>Słowo kluczowe revert
revert przywraca wartość z arkusza stylów agenta użytkownika przeglądarki — odtwarzając domyślny wygląd przeglądarki bez żadnych stylów autora. Jest przydatne w przypadku osadzonych widżetów innych firm.
<div style="color: tomato; font-family: Georgia, serif;">
Ancestor style is tomato serif text.
<div class="widget">This widget uses "all: revert" to fall back to the browser's user-agent defaults, undoing author styles.</div>
</div>Właściwość all
Właściwość all to skrót umożliwiający jednoczesne zastosowanie słowa kluczowego do każdej właściwości CSS, z wyjątkiem direction i unicode-bidi.
<div style="color: tomato; font-family: Georgia, serif; padding: 12px; background: #eee;">
<div class="isolated-widget">all: initial — resets everything to spec defaults</div>
<div class="scoped-component">all: revert — resets to browser UA defaults</div>
</div>Praktyczne zastosowanie all: initial
Użyj all: initial, gdy potrzebujesz utworzyć całkowicie odizolowany komponent, na który nie wpływają style globalne ani style elementu nadrzędnego:
<div style="color: tomato; font-family: Georgia, serif; font-size: 28px;">
Page context — large serif tomato text
<div class="email-template-preview">Email preview — isolated with all: initial, then restyled with Arial 14px.</div>
</div>Wzorzec all: unset
Usuń style przycisku nadane przez przeglądarkę, aby utworzyć niestandardowe przyciski bez znajomości wszystkich odpowiednich właściwości:
<button class="custom-btn">Custom button styled from scratch using all: unset</button>
<button>Default browser button for comparison</button>Dziedziczenie i właściwości niestandardowe
Niestandardowe właściwości CSS są domyślnie dziedziczone. Dzięki temu są tak użyteczne — zmienna ustawiona na :root jest dostępna wszędzie. Użyj @property { inherits: false }, aby właściwość niestandardowa nie była dziedziczona.
Szybkie sprawdzenie
Które słowo kluczowe resetuje właściwość do wartości domyślnej agenta użytkownika przeglądarki, a nie do początkowej wartości określonej w specyfikacji CSS?
Podsumowanie
Właściwości dziedziczone przekazują wartości elementom potomnym, a właściwości niedziedziczone tego nie robią. Słowa kluczowe inherit, initial, unset i revert zapewniają jawną kontrolę. Właściwość all resetuje wszystkie właściwości jednocześnie — jest przydatna w przypadku odizolowanych komponentów i niestandardowych elementów formularzy.
Ucz się CSS dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 40
- Lekcje
- 159
Często zadawane pytania
Czy lekcja „Dziedziczenie i właściwość all” jest bezpłatna?
Tak — pełny tekst „Dziedziczenie i właściwość all” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Dziedziczenie i właściwość all”?
Pozna Pan/Pani zasady dziedziczenia w CSS oraz używanie właściwości all do resetowania odziedziczonych stylów. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Dziedziczenie i właściwość all”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Obliczanie specyficzności: inline style, ID, klasa, element
- Kaskada: źródło i kolejność
- !important: kiedy i dlaczego nie
- Dziedziczenie i właściwość all