Za pomocą CSS możemy zmieniać rozmiar tekstu.
Już widzicie, patrząc na nagłówki i akapity,
że przeglądarka zapewnia, domyślnie,
różne style i wielkości dla różnych elementów.
To jest rozmiar tekstu,
a nagłówki każdego poziomu są większe.
Czasami chcemy zmienić czcionkę.
Korzystamy z własności „font-size” (rozmiar czcionki).
Na przykład:
Co zrobić, by cały tekst na stronie był trochę mniejszy?
Idziemy do znacznika „style”
i dodajemy regułę CSS do znacznika „body”.
Wewnątrz dołożymy własność „font-size” (rozmiar czcionki).
Jaka powinna być wartość?
Jak mierzymy czcionki?
To bardzo dobre pytanie.
Jest co najmniej 10 jednostek,
które obsługuje CSS dla tej własności.
Zacznijmy od jednostki, którą znacie: od pikseli.
Stosowaliśmy ją, decydując o wielkości obrazów.
Będziemy jej często używać w CSS.
Spróbujmy 11 pikseli.
Ha! Wszystko zmalało.
Nawet nagłówki.
Ale dlaczego?
Nie powinny mieć tylu pikseli, ile określiła wcześniej przeglądarka?
Nie.
Domyślny styl nagłówków nie jest określany w pikselach.
Tu używa się innej jednostki, „em”.
To jednostka względna,
uzależniająca wielkość nagłówka od rozmiaru czcionki w treści.
Pokażę, o co chodzi.
Przejdźmy do reguły stylu „h2”
i dodajmy własność „font-size”.
Nie będę myśleć o wielkości w pikselach, tylko względnie.
Jak, proporcjonalnie, większy ma być nagłówek „h2” od tekstu?
Może dwukrotnie?
Napiszemy więc „2em”.
Przeglądarka obliczyła
rozmiar w pikselach.
Wie, że czcionka tekstu ma 11 pikseli.
Zaznaczyliśmy, że „h2” ma być dwukrotnie większe,
więc teraz wszystkie „h2” mają 22 piksele wysokości.
Jeśli zmienimy rozmiar czcionki tekstu do 12 pikseli,
jak duże będą nagłówki „h2”?
Zgadza się, 24 piksele.
A jeśli zmienimy rozmiar czcionki „h2” do 1,5 em?
Teraz „h2” będzie miało 12 razy 1,5,
czyli 18 pikseli.
Możemy też określić rozmiar „h2” w pikselach, jak dla „body”.
Zadziała to tak samo.
Róbcie, jak wam wygodniej.
Jak wspomniałam, są też inne jednostki
oprócz pikseli i em.
Te są najpopularniejsze,
ale, by wiedzieć więcej,
obejrzyjcie nasze materiały
lub poszukajcie innych w sieci.
Pora poszaleć z rozmiarem czcionki!