Cíle

Vlastnosti písma

Typ písma

Je definován vlastností font-family.

Typ písma je někdy také označován jako tzv. "rodina". Např. Arial, Times New Roman, Courier New, atd. Lze použít i obecnou definici rodiny (pro patkové písmo serif, pro bezpatkové sans-serif, neproporcionální monospace, dekorativní fantasy a skloněné cursive). Jednotlivé názvy rodin, které chceme pro daný prvek použít, zapisujeme oddělené čárkou. Obsahuje-li název rodiny mezeru, je třeba jej uzavřít do uvozovek či apostrofů. Při formátování dokumentu se použije první z uvedených rodin. Není-li v operačním systému nalezena, použije se následující. Není-li v systému nalezena ani jedna z uvedených rodin, použije se výchozí hodnota definovaná prohlížečem. Z uvedeného vyplývá, že je vhodné na první místo zapsat co možná nejkonkrétnější typ písma (např. Arial CE), dále pak obecnější (Arial) a na závěr nejobecnější typ písma, který jsme ochotni akceptovat (sans-serif).

V ukázce vidíte dvě pravidla definující vlastnost font-family.

Úpravou těchto pravidel můžete měnit typ písma nadpisu, či odstavce ve spustitelném náhledu. K dispozici máte např. typy jako Georgia, Verdana, "Courier New", "Comic Sans MS" a další. Použít můžete i libovolný název písma, který najdete ve svém oblíbeném textovém editoru (např. v MS Office Word, OpenOffice Writer, ...)

Styl písma

Je definován vlastností font-style.

Tato vlastnost určuje sklon písma.

Na výběr jsou hodnoty:

normal - neskloněné písmo - výchozí hodnota,

italic a oblique - skloněná písma.

Příklad použití této vlastnosti můžete vidět v ukázce .

Tučnost písma

Je definována vlastností font-weight.

K nastavení této vlastnosti slouží hodnoty:

normal- standardní písmo (výchozí hodnota),

bold - tučné písmo,

bolder - písmo tučnější, než je písmo rodičovského prvku,

lighter - písmo méně tučné, než písmo rodičovského prvku (o rodičovském prvku více v kapitole Kaskáda a dědičnost).

V ukázce je pomocí selektoru body formátována celá stránka tučným písmem. Hodnota lighter pak snižuje tučnost prvků q. Hodnota normal nastavuje standardní písmo u prvků s třídou "pozn".

Velikost písma

Je definována vlastností font-size.

Velikost písma lze nastavit buď pomocí rozměrů (v relativních či absolutních jednotkách) nebo pomocí klíčových slov.

Klíčová slova umožňují nastavení velikosti písma v 7 stupních:

xx-small,

x-small,

small,

medium (výchozí hodnota),

large,

x-large,

xx-large.

Relativně vůči rodičovskému prvku lze nastavit velikost pomocí klíčových slov:

smaller - o stupeň menší,

larger - o stupeň větší.

V ukázce je pomocí selektoru body nastavena pro celý dokument velikost písma 12pt. Nadpis h1 je 1.5x větší, než písmo v prvku body. Nadpis h2 je větší, než písmo v prvku body. Odstavec p je o 10% větší, než velikost písma v prvku body a prvkek s třídou "pozn" je zobrazen extra malým písmem.

Kapitálky

Jsou definovány vlastností font-variant.

Kapitálky jsou druhem písma, které na místo malých písmen používá zmenšená velká písmena.

Jako hodnotu vlastnosti font-variant můžeme použít klíčová slova:

normal - standardní písmena (výchozí hodnota),

small-caps - kapitálky.

Jak vypadají kapitálky můžete vidět po spuštění náhledu v ukázce .

Sdružená vlastnost písma

Je definována vlastností font.

Umožňuje nastavení všech vlastností písma najednou.

Jejími hodnotami jsou hodnoty vlastností:

font-family,

font-style,

font-weight,

font-size,

font-variant,

line-height.

Zapisují se postupně za sebe a oddělují se mezerou. Jako první se uvádí hodnoty vlastností font-style, font-weight a font-variant (v libovolném pořadí). Tyto hodnoty jsou nepovinné. Tzn., že lze uvést jen některé hodnoty nebo žádnou. U hodnot, které nejsou uvedeny, bude použita výchozí hodnota normal (Pozor! Tento fakt znamená, že se pro neuvedené hodnoty nepoužije ani rodičovská, ani dříve definovaná hodnota - viz. kapitola Kaskáda a dědičnost). Dále následuje hodnota vlastnosti font-size. Tato hodnota je již povinná. Za ní je možné zapsat lomítko a hodnotu vlastnosti line-height (viz. studijní článek Vlastnosti textu). Lomítko a hodnota této vlastnosti jsou nepovinné. Jako poslední se uvádí hodnota vlastnosti font-family, která je povinná.

Příklad maximální a minimální možné definice této vlastnosti je uveden v ukázce .

Na nadpisu h1 je demonstrován fakt, že nekompletní definice této vlastnosti zapříčiní nastavení výchozích hodnot u vlastností font-style, font-weight i font-variant. Nadpis h1 tedy nezdědí sklon písma od svého rodičovského prvku body a nebude ani formátován tučným písem, jak je u nadpisů běžné.

Barva písma

Je definována vlastností color.

Hodnotou vlastnosti color je barva zadaná libovolným způsobem (dekadicky, procentuálně, hexadecimálně, či klíčovým slovem - viz. studijní článek Hodnoty). Výchozí hodnota této vlastnosti je definována prohlížečem.

V ukázce je definována pro nadpisy h1, h2, h3 stejná barva. Pro každý nadpis je však hodnota zapsána jiným způsobem. Více o těchto způsobech najdete ve studijním článku Hodnoty.

TIP: Upravujte kód CSS v ukázkách vlevo a po každé úpravě znovu spouštějte náhled. Pomocí takového experimentování nejlépe zjistíte, zda jste výklad pochopili správně.