Lekce 8 - Třídní selektor a stylování textu v CSS

V minulé lekci, Základní CSS selektory a vlastnosti, jsme si ukázali použití CSS. Naučili jsme se barvit a zarovnávat text.

Dnes se v CSS tutoriálu naučíme centrovat obrázky pomocí třídního selektoru. Dále si uvedeme CSS vlastnosti pro změnu fontu a velikosti písma a na závěr také stín.

Centrování obrázků v CSS

Na naší stránce máme jeden obrázek. Určitě by vypadalo lépe, kdyby byl obrázek ve středu stránky. Centrování je v CSS poměrně věda a během kurzu se naučíme několik způsobů, jak centrovat různé prvky na stránce.

Vlastnost text-align

Vlastnost text-align již známe, používali jsme ji k centrování textu a také jsme si říkali, že s ní lze centrovat i jiné řádkové elementy. Přesně to teď uděláme.

Obrázek vycentrujeme tak, že ho prvně vložíme do odstavce <p> nebo jiného blokového elementu (my ho v odstavci již máme). Tomuto odstavci pak v CSS přidělíme vlastnost text-align s hodnotou center.

Omezení typového selektoru

My zatím známe jen typový selektor, takže umíme centrovat obsah jen všech odstavců. Pokud bychom do CSS napsali toto:

p {
    text-align: center;
}

Vycentrovali bychom obsah všech odstavců na stránce. Výsledek by vypadal asi takto:

Takové odstavce jsou velmi špatně čitelné. Dnes se naučíme, jak ostylovat jen některé elementy na stránce.

Třídní selektor .

Ne vždy chceme stylovat úplně všechny elementy určitého typu. Z toho důvodu nám CSS nabízí další 2 selektory:

• selektor třídní
• ID selektor.

Třídní selektor funguje tak, že některé elementy na stránce zařadíme pomocí HTML atributu class do nějaké "třídy". Elementy s tímto atributem se potom ostylují podle toho, jaké vlastnosti daná třída v CSS má.

Zkusme si tedy vycentrovat obsah jen určitých odstavců. K tomuto účelu si vytvořme třídu .centrovany. Třídní selektor začíná vždy tečkou a pokračuje názvem třídy. Třídu si můžeme pojmenovat, jak se nám zlíbí, ale měli bychom používat jen malá písmena a pomlčky. Z názvu třídy by mělo být jasné, co dělá (vyhneme se tedy názvům jako .trida15 a podobně).

Definování stylů pro třídu v CSS

Přesuneme se do našeho souboru styl.css a v něm definujeme třídní selektor na třídu s názvem .centrovany. Dále vše funguje stejně, jako u typového selektoru. Dovnitř selektoru vložíme nám známou vlastnost text-align s hodnotou center. Celý náš CSS soubor teď vypadá takto:

h1, h2 {
    text-align: center;
    color: #0a294b;
}

.centrovany {
    text-align: center;
}

Přiřazení třídy vybraným elementům na stránce

Styl máme připravený, teď ho můžeme přiřadit jakýmkoli elementům na stránce. Přejdeme do index.html a náš odstavec s obrázkem zařadíme do třídy .centrovany. Uděláme to přidáním atributu class="centrovany" (zde již tečku nepíšeme):

<p class="centrovany">
    <img src="obrazky/avatar.jpg" alt="Programátor HoBi" width="30%" height="30%" />
</p>

Uložíme a vyzkoušíme. Výsledek:

Obsah ve všech elementech se třídou .centrovany bude nyní zarovnaný na střed. Jak již o text-align bylo řečeno dříve, název je poněkud matoucí. Jedná se o zarovnání obsahu, nikoli pouze textu.

Jeden element můžeme zařadit hned do několika tříd najednou. Jednoduše jejich názvy oddělíme v atributu class mezerou.

Stylování textu v CSS

Nyní si ostylujeme lépe text na naší stránce a zmíníme si k tomu několik CSS vlastností.

Vlastnost font-family - Font písma

Font textu změníme pomocí vlastnosti font-family. Výchozí písmo na webu je starší patkový Times New Roman, který se na web příliš nehodí a používá se spíše v tištěných dokumentech.

Druhů písma (fontů) se na jedné stránce obvykle příliš mnoho nekombinuje, většinou jsou jen 2 - jedno písmo na nadpisy a další na zbytek textu na stránce.

Zkusíme si nastavit pro stránku font Verdana. Dáme ho do typového selektoru body, tím budou mít toto písmo nastavené všechny elementy v těle stránky, pokud neuvedeme jinak. Nadpisům nastavíme písmo Arial.

Do CSS tedy přidejme typový selektor body a upravme ten na nadpisy:

body {
    font-family: Verdana;
}

h1, h2, h3, h4, h5, h6 {
    text-align: center;
    color: #0a294b;
    font-family: Arial;
}

Ke stylu nadpisů jsme do selektoru přidali i další 4. Kdybychom je náhodou použili, tak aby vypadaly jako ostatní.

Výsledek na naší stránce vypadá nyní takto:

Web safe fonty

S fonty je samozřejmě problém v tom, že když použijeme nějaký, který máme v počítači jen my, ostatním, kteří toto písmo nemají, se web zobrazí výchozím fontem. Z toho důvodu se buď určité písmo ke stránce připojí (což si hned ukážeme), nebo se použije jeden z fontů, které jsou na většině počítačů. Na webech se nejčastěji používají tyto fonty (i když např. na Linuxu je třeba nějaké doinstalovat):

• Arial
• Times New Roman
• Verdana
• Georgia
• Comic Sans MS
• Arial Black
• Impact
• Lucida Console
• Tahoma

Google fonts

Jistě jste si všimli, že moderní webové stránky využívají velice často jiné fonty než ty, které jsme zmínili výše. Pokud budete chtít svůj web ozvláštnit, můžete použít font z externího zdroje. Skvělým pomocníkem jsou Google Fonts. Ukážeme si tedy práci s nimi a nainstalujeme si pěkný font Poppins.

Způsoby vložení fontu

Možností, jak přidat nový font z externího zdroje jako jsou Google fonts, je několik:

• Můžeme jej importovat pomocí speciálního pravidla @import v CSS
• Můžeme na něj odkázat pomocí <link> v hlavičce HTML souboru
• Můžeme si font stáhnout přímo k nám na web a pracovat s ním podobně jako například s obrázky.

Odkazovat na externí zdroje může být lákavě jednoduché. Dobrá praktika ovšem je spoléhat se u ostrých webů co nejméně na ostatní stránky. Nemusí se to zdát pravděpodobné, ale v minulosti se již několikrát stalo, že i Google měl několikahodinový výpadek nebo byl přetížený.

My tedy zvolíme třetí variantu a font si stáhneme. Ukážeme si i variantu s odkazem na Google fonts.

Vyhledání fontu

Na Google Fonts vyhledáme a zvolíme font Poppins. Budeme potřebovat velikosti Regular pro text a Extra Bold pro nadpisy.

Google Fonts nám automaticky vygeneruje kód jak pro pravidlo @import, tak pro element <link> v případě, že bychom se přece jen chtěli na dané soubory pouze odkázat.

Import fontu do naší stránky

Pokud bychom se rozhodli na font jen odkázat, stačilo by na začátek našeho CSS souboru přidat jediný řádek:

@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];800&display=swap');

A nyní bychom mohli již font "Poppins" používat.

Stažení fontu do složky

My ale půjdeme jistější cestou a font si stáhneme. Varianty fontu si můžete stáhnout zvlášť když odscrollujete dolů nebo jako celou rodinu fontu tlačítkem Download Family nahoře.

Pro fonty vytvoříme ve složce s naším webem podsložku fonty/:

Tam rozbalíme soubory z archivu .zip. Měli bychom tam mít především zmíněné soubory Poppins-ExtraBold.ttf a Poppins-Regular.ttf:

Přidání fontů do CSS pomocí @font-face

Nyní si do našeho CSS souboru přidáme další kód a to na úplný začátek. Pomocí speciálního pravidla font-face si definujeme nový font s názvem Poppins, abychom jej mohli používat při stylování:

@font-face {
    font-family: Poppins;
    src: url(fonty/Poppins-Regular.ttf);
    font-weight: normal;
}
@font-face {
    font-family: Poppins;
    src: url(fonty/Poppins-ExtraBold.ttf);
    font-weight: bold;
}

Nejdůležitějšími vlastnostmi tohoto pravidla jsou:

• font-family k určení názvu fontu, kterým se na tento font budeme odkazovat,
• src s cestou k souboru se samotným fontem. Cesty k souborům zapisujeme v CSS pomocí funkce url().
• Tloušťka písma, pro jakou se má font z odkazovaného souboru použít, kterou definujeme vlastností font-weight. Jak můžeme vidět, jeden námi definovaný font může podporovat několik tlouštěk. Více se o tomto pravidlu dočtete v českém CSS 3 manuálu.

Elementům nastavujeme tloušťku písma taktéž pomocí vlastnosti font-weight.

Nastavení fontu webu

A jsme ve finále Nyní můžeme font "Poppins" používat. V selektoru body jej konečně nastavíme celému webu:

body {
    font-family: "Poppins";
}

A nezapomeňme vymazat font-family: Arial; ze selektorů nadpisů. Celý náš soubor styl.css nyní vypadá takto:

@font-face {
    font-family: Poppins;
    src: url(fonty/Poppins-Regular.ttf);
    font-weight: normal;
}

@font-face {
    font-family: Poppins;
    src: url(fonty/Poppins-ExtraBold.ttf);
    font-weight: bold;
}

body {
    font: 14px "Poppins";
    color: #414042;
}

h1, h2, h3, h4, h5, h6 {
    text-align: center;
    color: #0a294b;
}

.centrovany {
    text-align: center;
}

A naše stránka nyní vypadá takto:

Ve výchozím stavu mají nadpisy nastavenou tloušťku na bold a odstavce na normal. Využíváme zde tedy obě varianty našeho fontu Poppins.

Vlastnost font-size - Velikost písma

Velikost písma nastavujeme pomocí vlastnosti font-size. Podobně jako u barev máme několik možností, jak velikost zadat. Jsou to zejména:

1. pixely
2. em
3. rem

1. Pixely

První možností je zadat velikost textu v pixelech. Nastavme všemu textu v <body> velikost písma 14 pixelů:

body {
    font-family: "Poppins";
    font-size: 14px;
    color: #414042;
}

Výhoda je, že font bude všude stejně velký, což se hodí zejména pro nastavení hlavního písma pro celé <body>. Přidali jsme ještě barvu písma (vlastnost color).

2. em

Druhým způsobem, jak velikost zadat, jsou tzv. jednotky em. Hodnota zadaná pomocí em označuje, kolikrát je písmo větší než velikost písmena "M" současného písma. Jedná se tedy o jednotku relativní. Výhodné je všude používat em, jelikož když se rozhodneme pro větší písmo naší stránky, změníme jen písmo pro <body> a všechna další písma se nám zvětší sama. Nastavme si nadpis <h2> o něco větší, na hodnotu 1.7em (tedy o 70% větší, než současný text):

h2 {
    font-size: 1.7em;
}

A výsledek na naší stránce:

Všimněte si, že děláme opravdu jen malé změny. Není důvod, proč dělat nadpisy křiklavě červené a dvoumetrové.

Nastavení velikosti a fontu písma se většinou spojuje do jedné CSS vlastnosti font. Místo:

font-family: "Poppins";
font-size: 14px;

Tedy můžeme napsat:

font: 14px "Poppins";

3. jednotky rem

Jednotka rem funguje úplně stejně jako em, ovšem bere se relativně k velikosti písmene M ve fontu elementu <html>. Nezáleží tedy, kde je daný element vložený, styluje se vždy podle toho stejného elementu.

Vlastnost text-shadow - Stín písma

Písmu můžeme velmi jednoduše přidat stín pomocí CSS vlastnosti text-shadow. Ukažme si to například na našich nadpisech (později můžeme tuto vlastnost zase odebrat):

text-shadow: 3px 3px 7px #666666;

Parametry jsou:

• První 2 parametry jsou pozice stínu. Říkáme, že leží 3 pixely napravo od textu a 3px dole.
• Třetí parametr je rozostření, čím vyšší hodnota, tím je text rozostřenější. Při hodnotě 1px je ostrý.
• Posledním parametrem je barva, zde šedá.

Výsledek:

Stínů může mít písmo i více než jen jeden. Definice více stínů píšeme taktéž do vlastnosti text-shadow, akorát je oddělujeme čárkou. Zkusme si písmu přidat ještě druhý světlemodrý stín:

text-shadow: 2px 2px 0 #88abd1, 3px 3px 7px #666666;

Platí, že později zadaný stín se vykreslí hlouběji než dříve zadaný stín. Světlemodrý stín se tedy vykreslí nad původním stínem, protože je zapsaný dříve:

U písma se toho dá stylovat opravdu mnoho. To nejzákladnější jsme si ukázali, kompletní popis naleznete jako vždy ve zdejším CSS 3 kurzu - Text a písmo.

Nezapomeňte vložit link na styl.css do všech html podstránek, jinak se vám na nich styly nezobrazí.

Web je opět v příloze ke stažení.

V příští lekci, Layout a pozadí v HTML, začneme pracovat na layoutu, tedy rozložení stránky na navigační menu, obsahovou část a patičku.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.