CSS font size

{'type': u'plain'}

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!