8. diel - Typové CSS selektory a zarovnanie textu

V minulej lekcii, Úvod do CSS (kaskádových štýlov), sme si ukázali, na čo CSS slúži a ako vyzerá stránka, ktorá ho používa.

Dnes si v CSS tutoriále podrobne popíšeme, ako sa cez CSS štylujú webové stránky. Predstavíme si typové selektory a naučíme sa zarovnávať text.

Vytvorenie CSS súboru vo Visual Studio Code

Štýlovať budeme náš rozpracovaný web. Otvoríme si zložku first_web/ vo Visual Studio Code a pridáme do nej nový súbor style.css:

Pridáme nový súbor style.css - Webové stránky krok za krokom

CSS je rovnako ako HTML iba textový súbor. Súbor uložíme.

Napojenie CSS štýlu na HTML stránku

Teraz musíme našu HTML stránku na tento CSS súbor napojiť. Otvoríme si index.html a do hlavičky (<head>) pridáme element <link>. Môžeme ho vložiť napríklad pod určenie kódovania, ktoré býva pre prehľadnosť prvým údajom v hlavičke:

...
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    ...

<link /> je nepárový tag na určenie vzťahu medzi dvoma dokumentmi. Najčastejšie sa používa práve na pripojenie CSS dokumentu, alebo na pridanie ikony k našej stránke (pridanie ikony si ukážeme neskôr). Elementu sme ďalej vyplnili nasledujúce atribúty:

rel je atribút, ktorý definuje vzťah (relationship) medzi HTML dokumentom a pripojeným dokumentom. Hodnota stylesheet je v preklade rozprávajúca "šablóna štýlov".
href je skratka pre hypertextový odkaz (Hypertext REFerence), do ktorého vkladáme cestu k pripájanému súboru.
type určuje typ dokumentu, ktorý pripájame. Tu hovorí, že obsah pripájaného dokumentu je typu CSS.

Teraz sa bude táto stránka štylovať podľa toho, čo napíšeme do CSS.

Selektory

CSS je založené na tzv selektoroch. Ako už z názvu vyplýva, selektory umožňujú vybrať (select - vybrať) prvky na stránke podľa určitých kritérií a potom tieto prvky ostylovat. CSS dokument nemá na rozdiel od HTML žiadnu špeciálnu štruktúru a okrem selektorov do neho už nie je potrebné písať čokoľvek navyše.

Typový selektor

Úplne najjednoduchší je tzv. typový selektor, ktorý na stránke jednoducho vyberie všetky elementy daného typu. Ak budeme chcieť napr. vybrať všetky nadpisy <h1> na stránke, CSS kód bude vyzerať nasledovne:

h1 {
}

Štýlujeme teda elementy určitého typu, tu <h1>. Za selektorom nasleduje blok zo zložených zátvoriek {}, do ktorého sa píšu vlastnosti elementov, ktoré chceme štylovať.

Zložené zátvorky napíšeme na klávesnici pomocou Pravého Alt + B, resp. N:

Zložené zátvorky - Webové stránky krok za krokom

Vlastnosť `text-align` - Zarovnanie obsahu

Uveďme si prvú CSS vlastnosť, bude jej text-align. Táto vlastnosť znamená v preklade zarovnanie textu, presnejšie je však zarovnanie obsahu. Môžeme pomocou nej totiž zarovnať akékoľvek riadkové elementy v danom bloku (napríklad obrázky).

Skúsme si text v nadpisoch <h1> na stránke vycentrovať. CSS kód by vyzeral takto:

h1 {
    text-align: center;
}

Vlastnosti, ktoré chceme v danom selektore upravovať, vkladáme do zložených zátvoriek selektora. Za názvom vlastnosti nasleduje dvojbodka :, jej hodnota a potom nasleduje bodkočiarka ;.

Stredník na slovenskej klávesnici zapíšeme pomocou klávesy pod Escape:

Bodkočiarka - Webové stránky krok za krokom

V bloku {} jednotlivé riadky odsadzujeme zľava pomocou klávesy Tabulátor alebo pomocou 4 medzier. Je tak vizuálne jasné, že tieto vlastnosti patria pod daný selektor.

Hneď si prvý štýl vyskúšame na našej HTML stránke. Do CSS súboru style.css vložíme kód vyššie a uložíme. Prepneme sa do prehliadača a otvoríme stránku index.html. Mali by sme vidieť takýto výsledok:

My First Website

file:///C:/Users/David/OneDrive/first_web/index.html

Nadpis prvej úrovne má vycentrovaný text.

Uvedenie viacerých selektorov

Ak by sme chceli centrovať aj nadpisy druhej úrovne, nemusíme kód znova opisovať. Stačí len nad daný blok štýlov pripísať ďalší selektor, v tomto prípade aj pre nadpisy <h2>. Jednotlivé selektory oddeľujeme čiarkou ,:

h1, h2 {
    text-align: center;
}

Takýto zápis je ekvivalentný tomuto zápisu:

h1 {
    text-align: center;
}

h2 {
    text-align: center;
}

Ako ale môžeme vidieť, druhý zápis je trochu objemný, a predovšetkým v ňom dochádza k duplicite kódu. To je vždy zlá praktika.

V IT sa často odvoláva na tzv. best practices, zažité a odskúšané praktiky skúsených. Jednou z nich je DRY, čo je skratka z Don't Repeat Yourself. Viacmenej nám hovorí, že by sme nikdy nemali písať ten istý kód viackrát. Určite vás napadlo, že je to minimálne neprehľadné av dlhých súboroch sa potom zle vyzná. Je tu však ešte jedno úskalie - skôr či neskôr sa pri duplicitnom kóde totiž stane, že ho zmeníme a zabudneme zmeniť jeho ďalšie výskyty, čím nejakú časť projektu rozbijeme a nemusíme si to ani všimnúť.

Vo chvíli, keď chceme skupine elementov nastaviť totožné vlastnosti, radšej uprednostníme prvý spôsob a skombinujeme viac selektorov do jedného.

Výsledok:

My First Website

file:///C:/Users/David/OneDrive/first_web/index.html

Už teda vieme centrovať text. Centrovanie samozrejme nemusíme používať iba pre nadpisy. Úplne rovnako funguje pre odseky, bunky tabuľky a ďalšie elementy. Väčšina CSS vlastností nie je viazaná na konkrétny typ elementu.

Hodnoty vlastnosti `text-align`

Do vlastnosti text-align môžeme uviesť tieto hodnoty:

left - Zarovná text naľavo.
right - Zarovná text napravo.
center - Zarovná text na stred.
justify - Zarovná text do bloku, aby bol každý riadok rovnako dlhý.

Poslednú hodnotu justify je vhodné používať iba v prípade, že je element s textom dostatočne široký (aspoň okolo 800px), inak dochádza k vzniku neúhľadných medzier, ktorým sa hovorí v typografii rieky. V tlači sa toto rieši rozdeľovaním slov, prehliadač bohužiaľ za nás slová v texte jednoducho nerozdelia.

To je pre dnešok všetko. Kód k dnešnej lekcii je opäť na stiahnutie v prílohe.

V budúcej lekcii, Farby v CSS , si ukážeme štylovanie farby textu (color) a možnosti zadávania farieb.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 1x (2.13 MB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS

Článok pre vás napísal David Hartinger

Užívateľské hodnotenie:

9 hlasov

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

David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.

Aktivity