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:

rel je atribut, který definuje vztah (relationship) mezi HTML dokumentem a připojeným dokumentem. Hodnota stylesheet je v překladu všeříkající "šablona stylů".
href je zkratka pro hypertextový odkaz (Hypertext REFerence), do kterého vkládáme cestu k připojovanému souboru.
type urč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:

Moje první webová stránka

index.html

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:

Moje první webová stránka

index.html

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 4365x (2.13 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

Článek pro vás napsal David Hartinger

Uživatelské hodnocení:

3373 hlasů

David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.

David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.

Aktivity

Nejčastěji vyhledáváné