Lekce 8 - Typové CSS selektory a zarovnání textu
V minulé lekci, Úvod do CSS (kaskádových stylů), jsme si ukázali, k čemu CSS slouží a jak vypadá stránka, která jej používá.
Dnes si v CSS tutoriálu podrobně popíšeme, jak se přes CSS stylují webové stránky. Představíme si typové selektory a naučíme se zarovnávat text.
Vytvoření CSS souboru ve VS Code
Stylovat budeme náš rozpracovaný web. Otevřeme si složku
prvni_web/ ve VS Code a přidáme do ní nový soubor
styl.css:
CSS je stejně jako HTML pouze textový soubor. Soubor uložíme.
Napojení CSS stylu na HTML stránku
Nyní musíme naší HTML stránku na tento CSS soubor napojit.
Otevřeme si index.html a do hlavičky (<head>)
přidáme element <link>. Můžeme jej vložit např. pod
určení kódování, které bývá pro přehlednost prvním údajem v
hlavičce:
... <head> <meta charset="utf-8" /> <link rel="stylesheet" href="styl.css" type="text/css" /> ...
<link /> je nepárový tag k určení vztahu mezi dvěma
dokumenty. Nejčastěji se používá právě pro připojení CSS dokumentu,
nebo k přidání ikony k naší stránce (přidání ikony si ukážeme
později). Elementu jsme dále vyplnili následující atributy:
relje atribut, který definuje vztah (relationship) mezi HTML dokumentem a připojeným dokumentem. Hodnotastylesheetje v překladu všeříkající "šablona stylů".hrefje zkratka pro hypertextový odkaz (Hypertext REFerence), do kterého vkládáme cestu k připojovanému souboru.typeurčuje typ dokumentu, který připojujeme. Zde říká, že obsah připojovaného dokumentu je typu CSS.
Nyní se bude tato stránka stylovat podle toho, co napíšeme do CSS.
Selektory
CSS je založeno na tzv. selektorech. Jak již z názvu vyplývá, selektory umožňují vybrat (select - vybrat) prvky na stránce podle určitých kritérií a potom tyto prvky ostylovat. CSS dokument nemá na rozdíl od HTML žádnou speciální strukturu a kromě selektorů do něj již není potřeba psát cokoli navíc.
Typový selektor
Úplně nejjednodušší je tzv. typový selektor, který na
stránce jednoduše vybere všechny elementy daného typu.
Budeme-li chtít např. vybrat všechny nadpisy <h1> na
stránce, CSS kód bude vypadat následovně:
h1 {
}
Stylujeme tedy elementy určitého typu, zde <h1>. Za
selektorem následuje blok ze složených závorek {}, do kterého
se píší vlastnosti elementů, které chceme stylovat.
Složené závorky napíšeme na klávesnici pomocí Pravého Alt + B, resp. N:
Vlastnost
text-align - Zarovnání obsahu
Uveďme si první CSS vlastnost, bude jí text-align. Tato
vlastnost znamená v překladu zarovnání textu, přesnější je
však zarovnání obsahu. Můžeme pomocí ní totiž zarovnat jakékoli
řádkové elementy v daném bloku (např. obrázky).
Zkusme si text v nadpisech <h1> na stránce vycentrovat.
CSS kód by vypadal takto:
h1 { text-align: center; }
Vlastnosti, které chceme v daném selektoru upravovat, vkládáme do
složených závorek selektoru. Za názvem vlastnosti následuje dvojtečka
:, její hodnota a poté následuje středník ;.
Středník na české klávesnici zapíšeme pomocí klávesy pod Escape:
V bloku {} jednotlivé řádky odsazujeme zleva
pomocí klávesy Tabulátor nebo pomocí 4 mezer. Je tak vizuálně
jasné, že tyto vlastnosti patří pod daný selektor.
Hned si první styl vyzkoušíme na naší HTML stránce. Do CSS souboru
styl.css vložíme kód výše a uložíme. Přepneme se do
prohlížeče a otevřeme stránku index.html. Měli bychom vidět
takovýto výsledek:
Nadpis první úrovně má vycentrovaný text.
Uvedení více selektorů
Pokud bychom chtěli centrovat i nadpisy druhé úrovně, nemusíme
kód znovu opisovat. Stačí jen nad daný blok stylů připsat další
selektor, v tomto případě i pro nadpisy <h2>.
Jednotlivé selektory oddělujeme čárkou ,:
h1, h2 { text-align: center; }
Takový zápis je ekvivalentní tomuto zápisu:
h1 { text-align: center; } h2 { text-align: center; }
Jak ale můžeme vidět, druhý zápis je poněkud objemný, a především v něm dochází k duplicitě kódu. To je vždy špatná praktika.
V IT se často odvolává na tzv. best practices, zažité a ozkoušené praktiky zkušených. Jednou z nich je DRY, což je zkratka z Don't Repeat Yourself. Víceméně nám říká, že bychom nikdy neměli psát ten samý kód vícekrát. Určitě vás napadlo, že je to minimálně nepřehledné a v dlouhých souborech se pak špatně vyzná. Je tu však ještě jedno úskalí - dříve či později se u duplicitního kódu totiž stane, že jej změníme a zapomeneme změnit jeho další výskyty, čímž nějakou část projektu rozbijeme a nemusíme si toho ani všimnout.
Ve chvíli, kdy chceme skupině elementů nastavit totožné vlastnosti, raději upřednostníme první způsob a zkombinujeme více selektorů v jeden.
Výsledek:
Již tedy umíme centrovat text. Centrování samozřejmě nemusíme používat jen pro nadpisy. Úplně stejně funguje pro odstavce, buňky tabulky a další elementy. Většina CSS vlastností není vázána na konkrétní typ elementu.
Hodnoty vlastnosti
text-align
Do vlastnosti text-align můžeme uvést tyto hodnoty:
left- Zarovná text nalevo.right- Zarovná text napravo.center- Zarovná text na střed.justify- Zarovná text do bloku, aby byl každý řádek stejně dlouhý.
Poslední hodnotu justify je vhodné používat pouze v
případě, že je element s textem dostatečně široký (alespoň kolem
800px), jinak dochází ke vzniku neúhledných mezer, kterým se říká v
typografii řeky. V tisku se toto řeší rozdělováním slov,
prohlížeč bohužel za nás slova v textu jednoduše nerozdělí.
To je pro dnešek vše. Kód k dnešní lekci je opět ke stažení v příloze.
V příští lekci, Barvy v CSS, si ukážeme stylování barvy textu (color) a možnosti zadávání barev.
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 4126x (2.13 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS
David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.