CSS Academy · Lekcja

Resetowanie i normalizacja CSS

Usuną Państwo niespójne domyślne style przeglądarek za pomocą resetów CSS i arkuszy normalizujących.

Resetowanie i normalizacja CSS 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.

Problem: niespójne wartości domyślne przeglądarek

Każda przeglądarka ma wbudowany arkusz stylów klienta użytkownika z domyślnymi stylami nagłówków, marginesów, dopełnień, list i elementów formularzy. Te wartości domyślne różnią się między przeglądarkami, co prowadzi do niespójnego wyglądu.

Reset CSS

Reset CSS usuwa wszystkie domyślne style przeglądarki, zapewniając pustą bazę. Słynny reset Erica Meyera ustawia marginesy, dopełnienia i wiele właściwości na zero lub none.

<h1>Title</h1>
<p>Paragraph with reset margins.</p>
<ul><li>Item</li><li>Item</li></ul>
<ol><li>Step</li><li>Step</li></ol>

Normalizacja CSS

Normalize.css stosuje inne podejście: zamiast usuwać wszystkie wartości domyślne, ujednolica je w przeglądarkach i naprawia znane błędy, zachowując przydatne wartości domyślne, takie jak rozmiary nagłówków.

Kompromisy między resetem a normalizacją

Porównanie:

Reset: pusta baza, samodzielne zdefiniowanie wszystkiego, więcej pracy
Normalizacja: spójna baza z zachowanymi przydatnymi wartościami domyślnymi, mniej własnego kodu

Nowoczesny reset CSS

Popularny nowoczesny reset autorstwa Josha Comeau koncentruje się na najbardziej istotnych wartościach domyślnych:

<h1>Reset Demo</h1><h2>Sub</h2><h3>Sub</h3><h4>Sub</h4><h5>Sub</h5><h6>Sub</h6>
<p>Body text with smooth font rendering.</p>
<picture><img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='120'><rect width='300' height='120' fill='%234f8fdb'/></svg>" alt="demo" /></picture>
<video controls></video>
<canvas></canvas>
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="20" r="18" fill="tomato"/></svg>

Obrazy jako elementy blokowe

Ustawienie dla obrazów display: block usuwa domyślną lukę w wierszu (spowodowaną przez line-height) u dołu obrazów znajdujących się w kontenerach:

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='160'><rect width='400' height='160' fill='%23ff6347'/></svg>" alt="block image" />

Wzorzec resetowania list

Podczas stylizowania niestandardowej nawigacji lub list interfejsu należy usunąć znaczniki listy i wcięcie:

<ul class="nav-list"><li>Home</li><li>Shop</li><li>About</li></ul>

Resetowanie elementów formularzy

Elementy formularzy (input, button, textarea) w wielu przeglądarkach domyślnie nie dziedziczą czcionki. Często stosuje się następujące rozwiązanie:

<input type="text" placeholder="Name" />
<button>Submit</button>
<textarea placeholder="Message"></textarea>
<select><option>Choice A</option></select>

Preflight w Tailwind

Tailwind CSS zawiera własny reset o nazwie Preflight, oparty na modern-normalize. Jeśli używają Państwo Tailwind, reset jest już stosowany automatycznie.

Gdzie umieścić reset

Arkusz stylów resetu lub normalizacji należy zawsze umieszczać jako pierwszy, przed stylami komponentów i narzędzi. Kolejność kaskady sprawia, że Państwa style nadpisują reset bez konfliktów specyficzności.

Kwestie dotyczące własnego resetu

Zamiast dołączać pełny reset zewnętrznego autorstwa, warto utworzyć własny, minimalny reset dopasowany do projektu. Należy uwzględnić tylko potrzebne reguły, aby zachować mały rozmiar CSS.

<p>Base font-size and line-height set on the root element affect the whole page.</p>

Szybkie sprawdzenie

Jaka jest najważniejsza różnica między resetem CSS a normalizacją CSS?

Podsumowanie

Domyślne style przeglądarek są niespójne. Reset CSS usuwa wszystkie wartości domyślne, a normalize.css je ujednolica. Nowoczesne resety koncentrują się na najważniejszych regułach, takich jak box-sizing: border-box, maksymalna szerokość obrazów i dziedziczenie czcionek przez elementy formularzy. Reset należy zawsze ładować jako pierwszy.

Często zadawane pytania

Czy lekcja „Resetowanie i normalizacja CSS” jest bezpłatna?

Tak — pełny tekst „Resetowanie i normalizacja CSS” 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 „Resetowanie i normalizacja CSS”?

Usuną Państwo niespójne domyślne style przeglądarek za pomocą resetów CSS i arkuszy normalizujących. Ć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 „Resetowanie i normalizacja CSS”?

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

← Powrót do CSS Academy