INF.03 · HTML i CSS
Typografia — stylowanie tekstu w CSS
Tekst, który da się przeczytać.
- Przewidź efekt
- Zmień i sprawdź
- Zbuduj samodzielnie
Po tej lekcji: Ustawisz hierarchię typograficzną, długość wiersza i odstępy bez zmiany znaczenia HTML.
Zrozum, zanim zapiszesz
font-family to lista krojów z rodziną awaryjną; font-size rozmiar; font-weight grubość. Właściwości font nie zastępują hierarchii h1–h6. line-height: 1.6 jest bez jednostki i skaluje się z rozmiarem fontu. max-width: 65ch ogranicza długość wiersza w przybliżeniu do 65 szerokości znaku 0.
text-align, text-decoration i text-transform dotyczą prezentacji. Uppercase nie zmienia tekstu źródłowego. Nie justuj automatycznie krótkich wierszy; duże przerwy utrudniają czytanie. overflow-wrap: anywhere pomaga długim adresom.
rem odnosi się do rozmiaru fontu elementu html. Ustaw czytelny rozmiar bazowy i sprawdź powiększenie 200% bez utraty treści. Podkreślenie linku pomaga rozpoznać go bez polegania wyłącznie na kolorze.
Przygotuj HTML do tego przykładu
Ten fragment wstaw do body dokumentu z lekcji 1. W head dodaj <link rel="stylesheet" href="style.css">. Kolejny blok zapisz w osobnym pliku style.css, obok index.html.
<main class="artykul"><p class="kategoria">Recenzja</p><h1>Podróż</h1><h2>Pierwsze wrażenie</h2><p>Opisz własną obserwację filmu.</p><h2>Co warto zauważyć?</h2><p>Podaj konkretną scenę i wyjaśnij jej znaczenie.</p><a href="kontakt.html">Napisz do koła filmowego</a></main>Przykład do odtworzenia
body { font-family: Arial, sans-serif; font-size: 1rem; line-height: 1.6; }
.artykul { max-width: 65ch; margin-inline: auto; padding: 1rem; }
h1 { font-size: 2rem; line-height: 1.2; }
h2 { font-size: 1.5rem; }
p { margin-block: 0 1rem; overflow-wrap: anywhere; }
a { text-decoration: underline; }
.kategoria { text-transform: uppercase; letter-spacing: .05em; }Właściwości tekstu
| Zapis | Działanie |
|---|---|
font-family: Arial, sans-serif | Krój i rodzina awaryjna |
font-size: 1rem | Rozmiar względem fontu html |
font-weight: 700 | Grubszy wariant, jeśli font go ma |
font-style: italic | Kursywa |
line-height: 1.6 | Wysokość linii jako mnożnik |
letter-spacing: .05em | Odstęp między literami |
text-align: center | Wyśrodkowanie tekstu |
text-decoration: underline | Podkreślenie |
text-transform: uppercase | Wersaliki bez zmiany źródła |
Sprawdź w działaniu
Złóż czytelny fragment artykułu
Porównaj rozmiar, interlinię i długość wiersza. Zdecyduj, który zestaw nadaje się do dłuższej lektury.
Najpierw przewidź zmianę. Potem wykonaj ją i wyjaśnij różnicę między kodem a efektem.
Ćwiczenie z pomocą · samodzielna praca
Zbuduj samodzielnie — z pomocą, gdy potrzebujesz
Przygotuj artykuł o filmie: h1, dwa h2, trzy akapity i odnośnik. Ustaw font bazowy 1rem, line-height 1.6 i szerokość tekstu do 65ch. Nagłówki mają wyraźną hierarchię. Sprawdź stronę przy powiększeniu 200%.
Akapity są czytelne, odnośnik rozpoznawalny, a po powiększeniu nic nie jest ucięte.
? Potrzebujesz pomocy? Rozwiązuj krok po kroku.
Krok 1 — pokaż podpowiedź
Ogranicz max-width kontenera tekstu, nie wysokość akapitów.
Krok 2 — pokaż podpowiedź
Ustaw line-height bez jednostki.
Krok 3 — pokaż podpowiedź
Powiększ stronę w przeglądarce i sprawdź zawijanie długiego adresu.
Otwórz tylko tyle podpowiedzi, ile potrzebujesz. Po każdym kroku wróć do zadania i sprawdź wynik.
Sprawdź, zanim oddasz
Otwórz plik w przeglądarce i sprawdź, czy kod daje przewidywany wynik. Użyj narzędzi przeglądarki: Elements pokazuje elementy, Styles dopasowane reguły, a Network brakujące zasoby. Sprawdź kod w Nu HTML Checker; przy fragmentach wklej je do pełnego dokumentu z lang, charset, title i body. Komunikaty walidatora nie zastępują próby klawiaturą i kontroli czytelności.
Podsumowanie
Co warto zapamiętać
- Ustawisz hierarchię typograficzną, długość wiersza i odstępy bez zmiany znaczenia HTML.
- Potrafisz wskazać w kodzie przyczynę widocznego efektu.
- Przed oddaniem sprawdzasz wynik w przeglądarce, nie tylko zapis pliku.
Dalej na swoim koncie
Rozgrzewki, quiz i zadania są w biurku ucznia.
Teoria jest otwarta dla wszystkich. Żeby rozwiązywać zadania, zapisywać szkice i widzieć swój postęp, zaloguj się.
Zaloguj się →