Black Friday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
BF extended 2022

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

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

My 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:

Moje první webová stránka
index.html

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ě).

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:

Moje první webová stránka
index.html

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, tí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:

Moje první webová stránka
index.html

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

Google fonts

Jistě jste si všimli, že moderní webové stránky využívají velice často jiné fonty než ty, které jsme zmínili výše. Pokud budete chtít svůj web ozvláštnit, můžete použít font z externího zdroje. Skvělým pomocníkem jsou Google Fonts. Ukážeme si tedy práci s nimi a nainstalujeme si pěkný font Poppins.

Způsoby vložení fontu

Možností, jak přidat nový font z externího zdroje jako jsou Google fonts, je několik:

  • Můžeme jej importovat pomocí speciálního pravidla @import v CSS
  • Můžeme na něj odkázat pomocí <link> v hlavičce HTML souboru
  • Můžeme si font stáhnout přímo k nám na web a pracovat s ním podobně jako například s obrázky.

Odkazovat na externí zdroje může být lákavě jednoduché. Dobrá praktika ovšem je spoléhat se u ostrých webů co nejméně na ostatní stránky. Nemusí se to zdát pravděpodobné, ale v minulosti se již několikrát stalo, že i Google měl několikahodinový výpadek nebo byl přetížený.

My tedy zvolíme třetí variantu a font si stáhneme. Ukážeme si i variantu s odkazem na Google fonts.

Vyhledání fontu

Na Google Fonts vyhledáme a zvolíme font Poppins. Budeme potřebovat velikosti Regular pro text a Extra Bold pro nadpisy.

Google Fonts nám automaticky vygeneruje kód jak pro pravidlo @import, tak pro element <link> v případě, že bychom se přece jen chtěli na dané soubory pouze odkázat.

Import fontu do naší stránky

Pokud bychom se rozhodli na font jen odkázat, stačilo by na začátek našeho CSS souboru přidat jediný řádek:

@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];800&display=swap');

A nyní bychom mohli již font "Poppins" používat.

Stažení fontu do složky

My ale půjdeme jistější cestou a font si stáhneme. Varianty fontu si můžete stáhnout zvlášť když odscrollujete dolů nebo jako celou rodinu fontu tlačítkem Download Family nahoře.

Pro fonty vytvoříme ve složce s naším webem podsložku fonty/:

Vytvoření složky s fonty

Tam rozbalíme soubory z archivu .zip. Měli bychom tam mít především zmíněné soubory Poppins-ExtraBold.ttf a Poppins-Regular.ttf:

Složka s fonty
Přidání fontů do CSS pomocí @font-face

Nyní si do našeho CSS souboru přidáme další kód a to na úplný začátek. Pomocí speciálního pravidla font-face si definujeme nový font s názvem Poppins, abychom jej mohli používat při stylování:

@font-face {
    font-family: Poppins;
    src: url(fonty/Poppins-Regular.ttf);
    font-weight: normal;
}
@font-face {
    font-family: Poppins;
    src: url(fonty/Poppins-ExtraBold.ttf);
    font-weight: bold;
}

Nejdůležitějšími vlastnostmi tohoto pravidla jsou:

  • font-family k určení názvu fontu, kterým se na tento font budeme odkazovat,
  • src s cestou k souboru se samotným fontem. Cesty k souborům zapisujeme v CSS pomocí funkce url().
  • Tloušťka písma, pro jakou se má font z odkazovaného souboru použít, kterou definujeme vlastností font-weight. Jak můžeme vidět, jeden námi definovaný font může podporovat několik tlouštěk. Více se o tomto pravidlu dočtete v českém CSS 3 manuálu.

Elementům nastavujeme tloušťku písma taktéž pomocí vlastnosti font-weight.

Nastavení fontu webu

A jsme ve finále :) Nyní můžeme font "Poppins" používat. V selektoru body jej konečně nastavíme celému webu:

body {
    font-family: "Poppins";
}

A nezapomeňme vymazat font-family: Arial; ze selektorů nadpisů. Celý náš soubor styl.css nyní vypadá takto:

@font-face {
    font-family: Poppins;
    src: url(fonty/Poppins-Regular.ttf);
    font-weight: normal;
}

@font-face {
    font-family: Poppins;
    src: url(fonty/Poppins-ExtraBold.ttf);
    font-weight: bold;
}

body {
    font: 14px "Poppins";
    color: #414042;
}

h1, h2, h3, h4, h5, h6 {
    text-align: center;
    color: #0a294b;
}

.centrovany {
    text-align: center;
}

A naše stránka nyní vypadá takto:

Moje první webová stránka
index.html

Ve výchozím stavu mají nadpisy nastavenou tloušťku na bold a odstavce na normal. Využíváme zde tedy obě varianty našeho fontu Poppins.

Vlastnost font-size - Velikost písma

Velikost písma nastavujeme pomocí vlastnosti font-size. Podobně jako u barev máme několik možností, jak velikost zadat. Jsou to zejména:

  1. pixely
  2. em
  3. rem

1. Pixely

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

body {
    font-family: "Poppins";
    font-size: 14px;
    color: #414042;
}

Výhoda je, že font bude všude stejně velký, což se hodí zejména pro nastavení hlavního písma pro celé <body>. Přidali jsme ještě barvu písma (vlastnost color).

2. 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 pro <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;
}

A výsledek na naší stránce:

Moje první webová stránka
index.html

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

Tedy můžeme napsat:

font: 14px "Poppins";
3. jednotky rem

Jednotka rem funguje úplně stejně jako em, ovšem bere se relativně k velikosti písmene M ve fontu elementu <html>. Nezáleží tedy, kde je daný element vložený, styluje se vždy podle toho stejného elementu.

Vlastnost text-shadow - Stín písma

Písmu můžeme velmi jednoduše přidat stín pomocí CSS vlastnosti text-shadow. Ukažme si to například na našich nadpisech (později můžeme tuto vlastnost zase odebrat):

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

Parametry jsou:

  • 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:

Moje první webová stránka
index.html

Stínů může mít písmo i více než jen jeden. Definice více stínů píšeme taktéž do vlastnosti text-shadow, akorát je oddělujeme čárkou. Zkusme si písmu přidat ještě druhý světlemodrý stín:

text-shadow: 2px 2px 0 #88abd1, 3px 3px 7px #666666;

Platí, že později zadaný stín se vykreslí hlouběji než dříve zadaný stín. Světlemodrý stín se tedy vykreslí nad původním stínem, protože je zapsaný dříve:

Moje první webová stránka
index.html

U písma se toho dá stylovat opravdu mnoho. To nejzákladnější jsme si ukázali, kompletní popis naleznete jako vždy ve zdejším CSS 3 kurzu - Text a písmo.

Nezapomeňte vložit link na styl.css do všech html podstránek, jinak se vám na nich styly nezobrazí. :-)

Web je opět 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 2296x (2.27 MB)
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
Přeskočit článek
(nedoporučujeme)
Layout a pozadí v HTML
Článek pro vás napsal David Čápka
Avatar
Uživatelské hodnocení:
682 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, nemovitosti 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

 

 

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

Avatar
Nat Owen
Člen
Avatar
Nat Owen:9. května 20:27

Také mám dotaz.. pokud vypisuji toto. Jak to pozná co je určené na nadpis a co na text?

@font-face {
  font-family: Poppins;
  src: url(fonty/Poppins-Regular.ttf);
  font-weight: normal;
}
@font-face {
  font-family: Poppins;
  src: url(fonty/Poppins-ExtraBold.ttf);
  font-weight: bold;
}
 
Odpovědět
9. května 20:27
Avatar
Odpovídá na Nat Owen
David Kučera:5. června 19:03

Ahoj, také jsem si nad tím dost lámal hlavu - je to špatně popsané.
font-family: je něco jako třída, uvedu příklad: pokud by jsi chtěla zadat ExtraBold k nadpisům, tak ho napiš jako Poppins1 a to následně spáruj s h1,h2 atd...

h1,h2 {
font-family: "Poppins1";
}

 
Odpovědět
5. června 19:03
Avatar
Tomáš Indrák:7. června 20:21

Ahoj, nevím proč, ale nastavení fontu Poppins mi nefungovalo, když jsem tu definici @font-face nastavil ve style.css.

Nicméně pokud jsem to dal do hlavičky index.html (jak bylo v ukázce českého manuálu CSS), tak to fungovalo.

<style>
        @font-face {
            font-family: Poppins;
            src: url(fonts/Poppins-Regular.ttf);
            font-weight: normal;
        }
        @font-face {
            font-family: Poppins;
            src: url(fonts/Poppins-ExtraBold.ttf);
            font-weight: bold;
        }
    </style>
 
Odpovědět
7. června 20:21
Avatar
Odpovídá na Tomáš Indrák
Tomáš Indrák:7. června 23:23

Tak už vím, v čem byl problém.. Měl jsem totiž soubor style.css uložený v podložce css/, narozdíl od příkladu, kde byl stylovací soubor přímo v hlavní složce vedle index.html.

Tedy jsem jen ve style.css upravil správnou cestu k fontům, s ohledem na umístění souborů, a je to funkční.

@font-face {
    font-family: Poppins;
    src: url(../fonts/Poppins-Regular.ttf);
    font-weight: normal;
}
@font-face {
    font-family: Poppins;
    src: url(../fonts/Poppins-ExtraBold.ttf);
    font-weight: bold;
}
 
Odpovědět
7. června 23:23
Avatar
Ondřej Raška:16. června 12:57

Do selektoru body nastavíme konečně námi zvolený font (v tomto případě font Poppins). body {
font-family: "Poppins"; }

To co je pak prezentováno jako výsledek kroku je změna v body i v nadpisech. Nadpisi už nejsou Arial. Nadpisy ale nejsou zmíněny v textu.

Může to pak být matoucí, když student provede změnu, kterou lektor říká, ale jeho výsledek je jiný.

 
Odpovědět
16. června 12:57
Avatar
Tomáš Novotný:7. července 13:30

trošku mne děsí co všechno se dá s písmem vyvádět..... 😀

 
Odpovědět
7. července 13:30
Avatar
Odpovídá na Nat Owen
Kateřina Zákostelská:3. září 21:42

řešila jsem to samé, pozná to podle toho front-weight: bold
h1-h6 nebo i <strong> jsou bold, takže se přepíší podle toho .../Poppins/Ex­traBold.ttf);

 
Odpovědět
3. září 21:42
Avatar
Karoline Elisabeth Wild:13. září 9:58

Trochu mi tu chybela zminka o font fallbacku a o jednotce rem.

 
Odpovědět
13. září 9:58
Avatar
Renáta Vyšatová:8. října 12:59

Trošku mě mate, že v nadpisech již font nezmiňujeme, ale když jsem četla starší komentáře, tak jsem si to nejspíš vysvětlila správně, takže fajn 😆

 
Odpovědět
8. října 12:59
Avatar
Jan Trnka
Člen
Avatar
Jan Trnka:8. listopadu 8:55

Všechno sedí podle psaného textu a tak z toho mám radost.

 
Odpovědět
8. listopadu 8:55
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 102. Zobrazit vše