Lekce 4 - Text a písmo - Barva a typ písma
V předchozím kvízu, Kvíz - Úvod, selektory a vlastnosti v CSS3, jsme si ověřili nabyté zkušenosti z předchozích lekcí.
V této lekci si ukážeme vlastnosti, které se používají pro úpravu textu. Tyto vlastnosti budeme aplikovat na předem nachystaný text, aby bylo možné vidět výsledky v co nejlepším světle. Textových vlastností je mnoho, tudíž si nejdříve probereme ty, se kterými se setkáme nejčastěji. Další vlastnosti si probereme tak, ať alespoň víme, že existují. Naším cílem v této lekci bude vytvoření ukázkového stylu článku, který se bude líbit nám i návštěvníkům. Chceme přece, aby se text dal pohodlně přečíst a návštěvníci se na náš web rádi vraceli:
Budoucí výsledek.
Vytvoření základu
Pro začátek si vytvoříme HTML soubor a nalinkujeme si k němu CSS soubor, jak jsme se naučili v dřívějších lekcích:
Poté budeme pokračovat nachystáním si struktury článku včetně obsahu, kde použijeme velmi známý Lorem ipsum generátor. Lorem ipsum je generátor náhodných latinských slov, který je využíván v grafickém návrhu pro naplnění textu.
Struktura článku se bude skládat z obalu, ve kterém budou 3 části:
hlavička, obsah a patička.
Všechny tyto části budou v blokových značkách <div>,
kterým přiřadíme konkrétní třídy. V hlavičce bude
nadpis první úrovně (tag <h1>) a doba čtení článku
jako odstavec (tag <p>). V obsahu budou
odstavce s nadpisy druhé úrovně (tag <h2>). A v poslední
řadě bude patička, ve které se budou nacházet odkazy v
tagu <a>, které budou simulovat kategorie článků.
Struktura celého HTML dokumentu bude vypadat následovně:
<!DOCTYPE html> <html lang="cs-cz"> <head> <meta charset="utf-8" /> <title>Titulek stránky</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="clanek-obal"> <div class="clanek-hlavicka"> <h1>Lorem ipsum dolor sit amet, adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna!</h1> <p>3 minuty čtení</p> </div> <div class="clanek-obsah"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation <strong>ullamco laboris nisi ut aliquip ex ea commodo consequat.</strong> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <h2>Lorem ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <h2>Lorem ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="clanek-paticka"> <a href="#">Životní styl</a> <a href="#">Technologie</a> <a href="#">Cestování</a> </div> </div> </body> </html>
Můžeme si všimnout pojmenování tříd, které jasně specifikuje danou
oblast svým názvem. Je tak na první pohled jasné, že vše náleží
článku. Ještě přibyl v prvním odstavci HTML tag
<strong>, který se používá pro zvýraznění textu a
zvýšení priority označených klíčových slov. Tento text
je ve výchozím stylu zvýrazněn tučně, aniž bychom
nějaký styl přidávali.
CSS
Nyní se vrhneme na stylování. Pokaždé si probereme určitou vlastnost se všemi jejími variantami, ukážeme si některé varianty i na ukázce a poté je aplikujeme na náš článek.
Color
Začneme vlastností color, kterou nastavíme barvu písma v
HTML elementu. Syntaxe vlastnosti je následující:
color: hodnota;
Hodnotu barvy můžeme zadat několika způsoby:
- předdefinovanou hodnotou,
- RGB,
- HEX a
- HSL.
Předdefinovaná hodnota
Tato hodnota se zadává slovně. HTML podporuje 140 názvů
barev. Jako příklad si můžeme uvést barvy: Orange,
Gray, Black, ale třeba také
DodgerBlue, MediumSeaGreen a různé další.
Kompletní seznam si můžete lehce najít na internetu. Použití barvy
Tomato je přímočaré:
.definovana-barva { color: Tomato; }
Výsledek si ihned ukážeme:
RGB, RGBA
Hodnota v RGB formátu reprezentuje kombinaci barev
Red (červená), Green (zelená),
Blue (modrá). Hodnoty jsou v rozmezí 0-255,
kdy největší číslo je největší "množství" barvy. U
RGBA je to stejné, pouze zde přibyla jedna vychytávka a tou
je alfa kanál, který znázorňuje průhlednost
barvy. Alfa kanál se od zbytku liší typem své hodnoty, průhlednost
je totiž definovaná jako "procento", tudíž hodnoty jsou zde od
0 do 1 (0 = 0 % (průhledný) a
1 = 100 % (neprůhledný)). Poloviční průhlednost tedy
nastavíme hodnotou 0.5. Syntaxe RGBA zápisu je
následující:
color: rgba(red, green, blue, alfa);
Ukážeme si to zase na malém příkladu:
.rgba { color: rgba(255, 99, 71, 0.5); }
Výsledek:
HEX
Hexadecimální zápis hodnoty u vlastnosti color je v podobném duchu jako
RGB. Před hodnotou je znak hashtagu a dále následuje hodnota:
#rrggbb, rr jako červená,
gg jako zelená a bb jako modrá. Syntaxe je
následující: color: #rrggbb;. Hodnoty jsou v rozmezí 00-ff
(klasická šestnáctková soustava.) Za zmínku k zapamatování určitě
stojí zobrazení bílé #ffffff a zobrazení černé
#000000. Lidé jsou ale líní, tak se nám to trochu zkrátí.
Když máme stejné hodnoty, tak stačí vypsat pouze 3 znaky (od každé barvy
jeden) a CSS si s tím už poradí. Černou bychom teda mohli zapsat jako
#000.
Model HEX podporuje také alfa kanál pro řízení průhlednosti. V tomto
případě je přidáván čtvrtý koeficient, který má rozsah od 00 až FF
(256 hodnot). Syntaxe je pak color: #aarrggbb;, kde
aa je tato hodnota průhlednosti. V tomto případě již není
povoleno použití zkrácené formy zápisu.
A určitě nás ani nemine jeden příklad:
.hex { color: #ff6347; }
HSL, HSLA
HSL zápis reprezentuje Hue (odstín),
Saturation (sytost), Lightness (svítivost).
Syntaxe HSL formátu je následující:
hsl(hue, saturation, lightness);. Hue nabývá
hodnot 0-360 z kruhu (0 je červená, 120 je zelená a 240 je
modrá). Saturation je procentuální hodnota, kde
0% reprezentuje odstín šedé a 100% plnou
barvu. A Lightness je taktéž procentuální hodnota, 0 % je
zde černá, 50 % normální a 100 % je bílá. POZOR! Tyto
procentuální hodnoty se zadávají jako 0-100%. Naopak u HSLA u alfa
kanálu se procentuální hodnota zadává jako desetinné číslo. Jak jsme si
již řekli u RGBA. Ukážeme si to rovnou na příkladu:
.hsla { color: hsla(9, 100%, 64%, 0.5); }
Jako výsledek si uvedeme všechny čtyři odstavce:
Můžeme si všimnout, že jsme všude použili barvu Tomato pouze s jinými zápisy. U RGBA a HSLA jsme přidali i alfa kanál, neboli konkrétně poloviční průhlednost.
Nyní se vrhneme na náš předchystaný článek a doplníme do CSS souboru určitým elementům či třídám barvu písma a poté si vše pro jistotu vysvětlíme:
body { color:#111111; } .clanek-hlavicka p { color:#8c8c8c; } .clanek-obsah { color:#262626; } .clanek-obsah h2 { color:#4a4a4a; } .clanek-paticka a { color:#5c8cff; } .clanek-paticka a:hover { color:#3064e3; }
Tagu <body> jsme přidali trochu méně černou barvu,
jelikož ta úplně černá není vůbec ideální. Dále odstavci v
hlavičce článku (zde je napsaná doba čtení článku) jsme
přiřadili šedou barvu, aby tolik nevyčníval. Pokud tedy chceme přiřadit
vlastnosti pouze odstavci v určité třídě, uděláme to právě takto.
Celkový text bude mít také méně černou barvu, aby tolik neřezal do očí
a nadpisy u textu (<h2>) budou ještě o trochu šedé než
text, aby příliš nevyčnívaly. Jde nám o to, aby se čtenář začetl 
Na závěr jsme přidali lehký
odstín modro-fialové barvy odkazům (<a>) a k jejich
pseudo-elementu :hover jsme přidali trošku tmavší odstín
této barvy. Výsledek si můžeme prohlédnout níže:
Font-family
Barvu písma máme hotovou. Nyní se pustíme do změny fontu textu. Vlastnost font-family nám s tím určitě pomůže. Klasická syntaxe je taková:
font-family: hodnota;
Jako hodnotu můžeme zadat i několik písem. Záleží na klientském počítači, jestli jimi bude disponovat. Pokud písmo nebude umět zobrazit, použije druhé uvedené a tak dále. Je proto dobré na konec dát minimálně jedno generické písmo. Písma oddělujeme čárkami a pokud je název písma na více slov, vložíme ho do uvozovek. V případě in-line stylů (v HTML kódu) použijeme apostrofy.
Dále můžeme využít externích fontů, např. fonty od Googlu a to stáhnutím konkrétního fontu nebo nalinkováním skrze CDN. Externí fonty musí být pokaždé v uvozovkách. Rovnou si to ukážeme i na příkladu. Najdeme si z Google fontů písmo Ubuntu a nalinkujeme jej do hlavičky našeho HTML dokumentu:
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
Do hlavičky v našem HTML dokumentu článku vložíme před CSS soubor link na náš font:
<!DOCTYPE html> <html lang="cs-cz"> <head> <meta charset="utf-8" /> <title>Titulek stránky</title> <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
Nyní máme připojený náš font a můžeme jej použít. Přesuneme se do
CSS souboru a přidáme vlastnost font-family na tag
<body>:
body { font-family: 'Ubuntu', sans-serif; color:#111111; }
Výsledný změněný text můžeme vidět na našem článku:
Pro dnešní lekci to bylo vše
V další lekci, Text a písmo - Velikost, styl, dekorování, výška řádku, budeme pokračovat v problematice textu a písma. Budeme pracovat dále na našem článku za pomocí dalších CSS vlastností.
