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

V minulé lekci, Barvy v CSS, jsme si ukázali stylování barvy textu (color) a možnosti zadávání barev.

Dnes se v CSS tutoriálu naučíme centrovat obrázky pomocí třídního selektoru. Dále začneme s CSS vlastnostmi pro změnu fontu písma.

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 obecně 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

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ě). Ideálně bychom názvy tříd neměli vázat ani na konkrétní barvy, protože je můžeme někdy v budoucnu změnit. Např. třída .zluta není vhodný název třídy a dle toho, k čemu na webu slouží, by se mohla jmenovat např. .sleva.

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, čí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

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

V příští lekci, Stylování textu v CSS - Google fonty, velikost fontu a stín, si ukážeme stylování písma pomocí Google fontů a nastavíme velikost a stín písma.

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š.