Úvod do HTML a CSS - lekce 5

Podklady ke stažení

V projektu "Adéla na cestách" pokračuj se svým kódem z minulé lekce.

Nemáš-li z nějakého důvodu kód k dispozici, zde je ke stažení náš projekt ve stavu, v jakém jsme ho opustili v minulé lekci: https://czchts.cz/htmlcss05

Podklady tentokrát obsahují i samostatnou testovací stránku na zkoušení různých vlastností textu.

Vlastnosti písma a textu

Text je základním stavebním kamenem každé stránky. CSS nabízí spoustu vlastností, díky kterým můžeme vzhled textu na stránce změnit podle svých potřeb.

Velikost písma (font-size)

Velikost písma nastavujeme pomocí vlastnosti font-size. Jako hodnotu uvádíme číslo včetně jednotky. Nejjednodušší na pochopení jsou asi pixely - jednotka px.

h1 {
   font-size: 80px;
}

Můžeme použít i další jednotky - např. %, em, rem, pt, mm, apod. Jejich podrobný popis lze dohledat na internetu (např. MDN, CSS Tricks).

Výška řádku (line-height)

Výška řádku, nebo také řádkování nebo proklad řádků, nastavuje rozestup mezi jednotlivými řádky textu. CSS vlastnost pro nastavení výšky řádku je line-height. Řádkování lze nastavit na absolutní hodnotu s jednotkou (např. 40px) nebo lze hodnotu uvést bez jednotky, v tom případě se výška řádku spočítá jako násobek tohoto čísla a velikosti písma.

/*
řádkování nastaveno na absolutní hodnotu
rozestup mezi řádku bude přesně 50px
*/
body {
   line-height: 50px;
}  

/*
řádkování nastaveno relativně
rozestup mezi řádku bude vždy jedenapůlkrát velikosti písma
*/
body {
   line-height: 1.5;
}

Pro běžný text se doporučuje, aby řádkování bylo alespoň 1.5 až 1.6. Zlepší se tak čitelnost velkých bloků textu. Pro nadpisy opravdu velkým písmem je někdy vhodné volit řádkování menší, např. 1.2 až 1.4. Konkrétní "nejlepší" hodnota neexistuje, vše samozřejmě záleží také na vybraném písmu a povaze textu.

Tloušťka písma (font-weight)

Tloušťku písma (tučnost) nastavujeme vlastnosti font-weight. Ta může mít hodnotu normal (výchozí, netučné písmo) nebo bold (tučné písmo).

Máme-li k dispozici písmo, které má více řezů (tlouštěk), můžeme jaho hodnotu použít číslo, které odpovídá danému řezů. Přesná označení tlouštěk písma nejsou daná, ale časté značení bývá zhruba takové:

• 100 - thin
• 300 - light
• 400 - regular (normální řez)
• 600 - semibold
• 700 - bold (tučný řez)
• 900 - heavy nebo black

/* odstavec nyní bude tučným písmem */
p {
   font-weight: bold;
}

/*
má-li stránka tento řez písma k dispozici,
odstavec bude tenkým písmem
*/
p {
   font-style: 100;
}

/*
nadpis h1, který ve výchozím stylu bývá tučně,
bude nyní normálním (netučným) písmem
*/
h1 {
   font-weight: normal;
}

Sklon písma (font-style)

Sklon písma nastavujeme vlastností font-style. Ta může nabývat hodnot:

• normal - běžné, neskloněné písmo
• italic - tzv. kurzíva, tj. skloněné písmo, tak jak ho vytvořil autor písma
• oblique - počítačem uměle nakloněné písmo

Rozdíl mezi variantou italic a oblique může být značný. Opravdová kurzíva (italic) bývá obvykle krásné skloněné písmo, hezké na pohled. Falešná kurzíva (oblique) je počítačem skloněné normální písmo, které je obvykle poznat na první pohled, protože "vypadá divně". Vždy se snažíme používat opravdovou kurzívu.

/*
nadpis bude kurzívou
*/
h1 {
   font-style: italic;
}

/*
značka em, který ve výchozím stylu bývá kurzívou,
bude nyní zobrazena normálním (neskloněným) písmem
*/

em {
   font-style: normal;
}

Výběr písma (font-family)

Pro výběr písma (fontu) slouží vlastnost font-family. Jako hodnotu uvádíme přesný název písma. Má-li písmo v názvu mezeru, musíme název uzavřít do uvozovek.

/* nadpis bude písmem Georgia */
h1 {
   font-family: Georgia;
}

/* název písma s mezerami - musíme použít uvozovky */
h2 {
   font-family: "Helvetica Neue";
}

Pro případ, že vybraný font není na počítači návštěvníka stránek k dispozici, můžeme uvést více názvů oddělených čárkou. Prohlížeč se pokusí najít a použít písma v pořadí, v jakém jsou uvedena.

Seznam je obvykle vhodné zakončit tzv. generickým fontem. Generický font je název určité skupiny písem, které mají nějakou společnou charakteristiku. Není tak zaručeno použití konkrétního písma, ale na každém počítači (dle operačního systému) se použije výchozí písmo dané kategorie.

• sans-serif - bezpatkové písmo
• serif - patkové písmo
• monospace - neproporcionální písmo se stejně širokými znaky
• cursive - vypadá jako rukou psané
• fantasy - dekorativní písmo

/*
prohlížeč se pokusí použít písma v daném pořadí,
nebude-li žádné k dispozici, použije alespoň
nějaký bezpatkový (sans-serif) font
*/
body {
   font-family: Raleway, Arial, Helvetica, sans-serif;
}

/*
generický font lze použít i samostatně
nejde nám o konkrétní písmo, chceme prostě nějaký patkový (serif) font
*/
h1 {
   font-family: serif;
}

Zarovnání textu

Pro zarovnání textu slouží vlastnost text-align. Můžeme nastavit hodnoty:

• left - zarovnání doleva, jde o výchozí hodnotu a obvykle ji není třeba nastavovat
• right - zarovnání doprava
• center - zarovnání na střed
• justify - zarovnání do bloku

Máme-li text napsaný velkým písmem nebo obsahuje-li dlouhá slova, může zarovnání do bloku způsobovat v textu nehezké mezery. Prohlížeče totiž neumí na koncích řádků dělit slova a počítač musí zarovnání zároveň k pravému i levému okraji řešit tak, že mezi slova umístí velké mezery, které pak zhoršují čitelnost. V takovém případě je lepší se zarovnání do bloku vyhnout.

/* nadpis bude vycentrován na stránce */
h1 {
   text-align: center;
}

/* v buňce tabulky je text zarovnaný doprava */
td {
   text-align: right;
}

/* všechny odstavece jsou zarovnané do bloku */
p {
   text-align: justify;
}

Dědění CSS vlastností

Některé vlastnosti se v CSS dědí z rodiče na potomka. Týká se to i většiny vlastností týkajících se textu. Pokud například chceme nastavit stejný typ písma pro celou stránku, stačí nám nastavit příslušné vlastnosti značce <body>, která je rodičem všech ostatních prvků na stránce.

body {
   color: red;
   font-family: 'Raleway', sans-serif;
   font-size: 20px;
   line-height: 1.5;
   text-align: center;
}

Použijeme-li tento CSS kód (viz. výše), bude veškerý text na stránce červenou barvou, písmem Raleway, výchozí velikost písma bude 20px, řádkování 1.5 a vše na stránce bude zarovnané na střed.

Dědění se přeruší ve chvíli, kdy nějakému vnořenému prvku (potomek značky <body>) nastavíme některou z uvedených vlastností specificky. V tom případě dostane specificky nastavená hodnota přednost před hodnotou zděděnou.

Ve výchozím stylu prohlížeče jsou velikosti písma např. pro nadpisy nastaveny jako násobky základní velikosti textu, takže změníme-li velikost písma pro značku <body>, přepočítají se i velikosti nadpisů (nezdědí tedy konkrétní hodnotu). Např. velikost nadpisu <h1> je standardně nadefinována jako dvojnásobek základní velikosti textu.

Kontrolní otázky

• Jak nastavujeme velikost písma?
• Jaké jsou dva způsoby nastavení řádkování?
• Jak se pomocí CSS dělá tučné písmo a kurzíva?
• Jak se nastavuje v CSS font?
• Co je to generický font a proč ho chceme vždy použít?
• Jak nastavíme vlastnosti písma pro celou stránku najednou?

‍