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 vlastnosti ke změně fontu a velikosti písma a na závěr také stín.

Centrování obrázků

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 seriálu se naučíme několik způsobů, jak centrovat různé prvky na stránce. Obrázek vycentrujeme tak, že ho vložíme do odstavce (v odstavci ho již máme) a odstavci v CSS přidělíme vlastnost text-align s hodnotou center. Problém je, že zatím známe jen typový selektor a 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: selektory třídní a ID selektory. Třídní selektor funguje tak, že některé elementy na stránce zařadíme pomocí 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řídu si můžeme pojmenovat jak se nám zlíbí, ale musíme 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ě).

Přesuňme se do styl.css a v něm definujme třídní selektor na třídu centrovany. Třídní selektor začíná vždy tečkou a pokračuje názvem třídy. Dále funguje stejně, jako selektor typový. Dovnitř selektoru vložíme nám známou vlastnost text-align s hodnotou center.

h1, h2 {
    text-align: center;
}

.centrovany {
    text-align: center;
}

Nyní přejděme do index.html a náš odstavec s obrázkem zařaďme do třídy centrovaný. Uděláme to pomocí atributu class:

<p class="centrovany">
    <img src="obrazky/avatar.png" alt="Programátor HoBi" />
</p>

Poukládáme a vyzkoušíme. Výsledek:

Obsah ve všech elementech se třídou centrovany bude nyní zarovnaný na střed. Pokud vám přijde zavádějící, že obrázek reaguje na vlastnost text-align, máte pravdu. Název je poněkud matoucí, jedná se o zarovnání obsahu, nikoli textu. Element můžeme zařadit hned do několika tříd najednou, jednoduše jejich názvy oddělíme v atributu class mezerou. Většinou jich ale příliš nebývá.

Stylování textu

Ostylujme lépe text na naší stránce a zmiňme si k tomu několik CSS vlastností.

Font písma

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

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

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ž zatím neumíme), 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

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

Do CSS tedy přidejme typový selektor na 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ů jsem do selektoru přidal i další 4, kdybychom je náhodou použili, tak aby vypadaly jako ostatní.

Výsledek:

Velikost písma

Velikost písma nastavujeme pomocí vlastnosti font-size. Podobně jako u barev máme několik možností, jak velikost zadat. Uveďme si základní 2.

Pixely

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

font-size: 14px;

Výhoda je, že font bude všude stejně velký. To je výhodné zejména pro nastavení hlavního písma pro celé body.

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 v 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;
}

Výsledek:

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: Verdana;
font-size: 14px;

Tedy můžeme napsat:

font: 14px Verdana;

Stín písma

Písmu můžeme velmi jednoduše přidat stín pomocí CSS vlastnosti text-shadow. Dejme trochu stínu pod naše nadpisy:

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

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:

Se stínem se toho dá dělat poměrně hodně, když jich přidáte několik a nabarvíte, lze udělat např. efekt ohně. Budu se vás snažit vždy takto navádět na různé vychytávky, kdyby vás něco zaujalo

U písma se toho dá stylovat opravdu plno, to nejzákladnější jsme si ukázali, kompletní popis naleznete jako vždy ve zdejším českém CSS 3 manuálu - Písmo.

Web je zase 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.