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:

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 - Text a 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.
Stáhnout
Staženo 1621x (68.04 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS
Komentáře


Zobrazeno 10 zpráv z 73. Zobrazit vše