Pouze tento týden sleva až 80 % na e-learning týkající se C# .NET
Využij akce až 80% zdarma při nákupu e-learningu. Více informací .
C# week

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:

Centrování v CSS

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:

Centrování obrázku v CSS

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

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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:

Změna písma webu přes CSS

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:

Nastavení velikosti písma v HTML přes CSS a EM

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:

Stín písma v CSS

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.


 

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

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 1682x (68.04 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

Předchozí článek
Základní CSS selektory a vlastnosti
Všechny články v sekci
Webové stránky krok za krokem
Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
91 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, sushi a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity (6)

 

 

Komentáře
Zobrazit starší komentáře (66)

Avatar
Nikola Tomášková:26.10.2019 19:59

Děkuji, jsem zase o kousek dál! :)

Odpovědět
26.10.2019 19:59
Je čas z nemožného udělat možným.
Avatar
Michal Pelc
Člen
Avatar
Michal Pelc:20.2.2020 18:16

Perfektní- good job

 
Odpovědět
20.2.2020 18:16
Avatar
Gina Jana Dvořáková:1.4.2020 22:54

Nádhera. Vyzkoušela jsem i ten efekt ohně :-) Moc děkuji a pokračuji dále.

 
Odpovědět
1.4.2020 22:54
Avatar
Věra Formánková:22.7.2020 12:56

Myslela jsem si, že CSS je složitější, ale není. Skvělý, moc děkuji :)

 
Odpovědět
22.7.2020 12:56
Avatar
Hana Röderová:8.8.2020 15:58

Všechno luxusně vysvětleno, moc děkuju

 
Odpovědět
8.8.2020 15:58
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Naďa Tomanová:18.11.2020 15:24

Super kurz, největší přednost je, že to je lidsky vysvětleno.

 
Odpovědět
18.11.2020 15:24
Avatar
Yuriy Tretyachenko:17. února 2:09

U text-shadow by bylo dobre zminit, ze se da pridat dva nebo vice stinu, oddelene carkami, napr.:

p {
text-shadow:3px 3px 10px red,-3px -3px 10px yellow;color: #101921;
}

Pak muze to vypadat treba jako tady - http://shadow.clanweb.eu/

 
Odpovědět
17. února 2:09
Avatar
Aleš Masařík:15. května 15:00

Velmi dobré

 
Odpovědět
15. května 15:00
Avatar
Kája Matějková:19. května 14:33

Hezky vysvětleno děkuji

 
Odpovědět
19. května 14:33
Avatar
Katka Mlázovská:28. června 19:17

Podivila jsem se, že se mají třídy pojmenovávat malými písmeny (používám běžně camelCase a vše funguje), ale teď jsem se dočetla, že standard jsou opravdu malá písmena a pomlčky - kvůli čitelnosti:

.navToOneModuleICreated
/* versus */
.nav-to-one-module-i-created

Super tutoriály - DÍKY! :-)

Editováno 28. června 19:19
 
Odpovědět
28. června 19:17
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

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