Válí se ti projekty v šuplíku? Dostaň je mezi lidi a získej cool tričko a body na profi IT kurzy v soutěži ITnetwork summer 2017!
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

8. díl - Třídní selektor a stylování textu v CSS

HTML a CSS Statický web Třídní selektor a stylování textu v CSS American English version English version

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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 budeme s CSS v tutoriálu pokračovat.

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

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í vlasnosti 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 selektrou 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:

Nstavení 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 3x 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

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.

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. Web je jako vždy v příloze ke stažení.


 

Stáhnout

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

 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
49 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Miniatura
Všechny články v sekci
Webové stránky krok za krokem
Miniatura
Následující článek
Layout a pozadí v HTML
Aktivity (3)

 

 

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

Avatar
Dominik Blaško:25.11.2016 19:28

aha uz som pochopil... dikes

 
Odpovědět 25.11.2016 19:28
Avatar
Richard Luko
Člen
Avatar
Richard Luko:15. ledna 20:49

Ďakujem za tunajšie tutorialy.
Tieto posledné dve som si musel prečítať 4X aby som ich pochopil a vedel využiť, ale podarilo sa.
HTML mi problémy nerobilo, nejaké skúsenosti som mal už z časov minulých, pri tomto CSS som už musel začať aj tuhšie premýšľat.
Jedna vec mi však nie je jasná, ( študujem zároveň aj z jednej inej zahraničnej stránky ) aký je rozdiel medzi class a id ?
Ďakujem

Odpovědět 15. ledna 20:49
S Bohom je všetko možné
Avatar
Richard Luko
Člen
Avatar
Odpovídá na Richard Luko
Richard Luko:23. ledna 16:04

Takže odpoviem si sám a verím, že v budúcnosti to môže pomôcť ešte niekomu ďalšiemu.
Najzásadnejší rozdiel je v tom, že class môže byť používaný s niekoľkými rôznymi elementmi v rámci jedného dokumentu pri ktorých sa prejaví jeho hodnota, zatiaľ čo id je špecifické a unikátne pre jeden daný element. Na každý element môže byť použitých viac tried (class), avšak každý element može mať iba jedno unikátne id. Nemôže mať viacero elementov v rámci jedného dokumentu rovnaké id.

Príklad: Ak použijeme napr. triedu(class) "xyz" všetky elementy pri ktorých je táto trieda(class) sa zmenia podľa toho čo je v tejto triede(class) nadefinované.

Ak použijeme id "xyz" zmení sa len jeden konkrétny element s týmto unikíáne nadefinovaným id. ( keďže každý element, môže mať iba jedno unikátne id )

Je aj pomerne dôležité povedať, že ak by sme priradili nejakému elementu triedu v ktorej by bolo niečo definované ( napr. farba písma modrá ) a priradili tomu istému elementu aj id v ktorom by bola definovaná farba písma napr. červená - farba písma bude červená a to z dôvodu, že ID má vyššiu prioritu ako Class.

Dúfam, že sa mi to podarilo vyjadriť zrozumiteľne.

Odpovědět  +1 23. ledna 16:04
S Bohom je všetko možné
Avatar
Odpovídá na Richard Luko
Marek Chalupa:23. ledna 18:34

Tutoriály na CSS a HTML si již moc nepamatuji, nicméně jsem měl za to, že tato věc tu je určitě někde vysvětlena... Ať už tu, nebo v jiném článku. Každopádně ano, vysvětlil jsi to pěkně :)

 
Odpovědět 23. ledna 18:34
Avatar
lazenska.wewerka:19. března 1:25

Ahoj. Jak je to s těmi stíny?
Když jich přidám víc, takto:

.ohnivy {

    text-shadow:-3px -5px 5px #ee500d;
    text-shadow:3px -5px 5px #ee500d;
}

vždycky se nastaví jen ten poslední a oheň nebude:-)
Díky

 
Odpovědět 19. března 1:25
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovědět 19. března 10:50
Creating websites is awesome till you see the result in another browser ...
Avatar
lazenska.wewerka:19. března 14:38

No jo, super. Díky :-)

 
Odpovědět 19. března 14:38
Avatar
Daniel Šup
Člen
Avatar
Daniel Šup:20. července 23:28

Zdravím,

v článku uvádíš, že jeden element lze zařadit do více tříd. Zajímalo by mě, kdy je vhodné zařadit element do více tříd.
Také bych rád věděl, co způsobuje ztenčení písma nadpisů 1. a 2. úrovně, bude-li CSS šablona, importovaná do dané HTML stránky, obsahovat níže uvedený kód.

h1, h2 {
    text-align: center;
    color: #0a294b;
}
h1 {
    font: 2.4em Arial;
}
h2 {
    font: 2em Arial;
}

Zajímalo by mě, proč nastavení fontu a velikosti písma dohromady pomocí vlastnosti font snižuje tučnost písma u nadpisů. V případě, že nepoužijeme vlastnost font a místo toho nastavíme typ písma pomocí vlastnosti font-family a velikost písma pomocí vlastnosti font-size, tak nadpisy budou stále tučné.

 
Odpovědět 20. července 23:28
Avatar
Odpovídá na Daniel Šup
Michal Šmahel (ceskyDJ):21. července 0:36

Do více tříd se element řadí běžně. Zvyšuje se tak přehlednost a použitelnost. Když máš např. stránkování, všechny stránky mají stejné styly (jedna třída). Když však potřebuješ odlišit aktivní stránku, stačí přidat třídu, která jen mění nějakou vlastnost. Nemusíš psát celý kód, který platí i pro ostatní tlačítka do nové třídy. Navíc se to použitelnější, když jednu třídu můžeš napsat na více míst, protože se univerzální. Pouze ji doplníš nějakou jinou.

To je prosté, vlastnost font obaluje více vlastností do jedné. Jednou z nich je také font-weight, kterou pokud nenapíšeš, obdrží defaultní hodnotu - normal. Text nadpisu je následně bez tučného prvku.

Používá se to pro usnadnění práce. Mimo to je to také přehlednější a několik vlastností máš v jednom řádku.

Odpovědět 21. července 0:36
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Daniel Šup
Člen
Avatar
Odpovídá na Michal Šmahel (ceskyDJ)
Daniel Šup:21. července 8:32

Velice ti děkuji za odpověď. Teď už chápu, je potřeba nastavit u vlastnosti font tloušťku písma, velikost a typ písma, aby nadpisy byly takové, jaké je chceme.

 
Odpovědět  +1 21. července 8:32
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 52. Zobrazit vše