10. diel - Triedny selektor a štylovanie textu v CSS

V minulej lekcii, Farby v CSS, sme si ukázali štylovanie farby textu (color) a možnosti zadávania farieb.

Dnes sa v CSS tutoriále naučíme centrovať obrázky pomocou triedneho selektora. Ďalej začneme s CSS vlastnosťami pre zmenu fontu písma.

Centrovanie obrázkov v CSS

Na našej stránke máme jeden obrázok:

Určite by vyzeralo lepšie, keby bol obrázok v strede stránky. Centrovanie je v CSS pomerne veda a počas kurzu sa naučíme niekoľko spôsobov, ako centrovať rôzne prvky na stránke.

Vlastnosť text-align

Vlastnosť text-align už poznáme, používali sme ju na centrovanie textu a tiež sme si hovorili, že s ňou je možné centrovať aj iné riadkové elementy. Presne to teraz urobíme.

Obrázok všeobecne vycentrujeme tak, že ho prvýkrát vložíme do odstavca <p> alebo iného blokového elementu. My ho v odseku už máme. Tomuto odseku potom v CSS pridelíme vlastnosť text-align s hodnotou center.

Obmedzenie typového selektora

Zatiaľ poznáme len typový selektor, takže vieme centrovať obsah iba všetkých odsekov. Ak by sme do CSS napísali toto:

p {
    text-align: center;
}

Vycentrovali by sme obsah všetkých odsekov na stránke. Výsledok by vyzeral asi takto:

Také odseky sú veľmi zle čitateľné. Dnes sa naučíme, ako ostylovat len niektoré elementy na stránke.

Triedny selektor .

Nie vždy chceme štylovať úplne všetky elementy určitého typu. Z toho dôvodu nám CSS ponúka ďalšie 2 selektory:

• selektor triedny
• ID selektor.

Triedny selektor funguje tak, že niektoré elementy na stránke zaradíme pomocou HTML atribútu class do nejakej "triedy". Elementy s týmto atribútom sa potom ostylujú podľa toho, aké vlastnosti daná trieda v CSS má.

Skúsme si teda vycentrovať obsah len určitých odsekov. Na tento účel si vytvorme triedu .centered. Triedny selektor začína vždy bodkou a pokračuje názvom triedy. Triedu si môžeme pomenovať, ako sa nám zapáči, ale mali by sme používať len malé písmená a pomlčky.

Z názvu triedy by malo byť jasné, čo robí (vyhneme sa teda názvom ako .class15 a podobne). Ideálne by sme názvy tried nemali viazať ani na konkrétne farby, pretože ich môžeme niekedy v budúcnosti zmeniť. Napr. trieda .yellow nie je vhodný názov triedy a podľa toho, na čo na webe slúži, by sa mohla volať napríklad .sale.

Definovanie štýlov pre triedu v CSS

Presunieme sa do nášho súboru style.css av ňom definujeme triedny selektor na triedu s názvom .centered. Ďalej všetko funguje rovnako, ako pri typovom selektore. Dovnútra selektora vložíme nám známu vlastnosť text-align s hodnotou center. Celý náš CSS súbor teraz vyzerá takto:

h1, h2 {
    text-align: center;
    color: #0a294b;
}

.centered {
    text-align: center;
}

Priradenie triedy vybraným elementom na stránke

Štýl máme pripravený, teraz ho môžeme priradiť akýmkoľvek elementom na stránke. Prejdeme do index.html a náš odsek s obrázkom zaradíme do triedy .centered. Urobíme to pridaním atribútu class="centered" (tu už bodku nepíšeme):

<p class="centered">
    <img src="images/avatar.jpg" alt="Programmer SaBi" width="30%" height="30%" />
</p>

Uložíme a vyskúšame. Výsledok:

Obsah vo všetkých elementoch s triedou .centered bude teraz zarovnaný na stred. Ako už o text-align bolo povedané skôr, názov je trochu mätúce. Ide o zarovnanie obsahu, nie iba textu.

Jeden element môžeme zaradiť hneď do niekoľkých tried naraz. Jednoducho ich názvy oddelíme v atribúte class medzerou.

Štylovanie textu v CSS

Teraz si ostylujeme lepšie text na našej stránke a spomenieme si na to niekoľko CSS vlastností.

Vlastnosť font-family - Font písma

Font textu zmeníme pomocou vlastnosti font-family. Predvolené písmo na webe je starší pätkový Times New Roman, ktorý sa na web príliš nehodí a používa sa skôr v tlačených dokumentoch.

Druhov písma (fontov) sa na jednej stránke obvykle príliš veľa nekombinuje, väčšinou sú len 2 – jedno písmo na nadpisy a ďalšie na zvyšok textu na stránke.

Skúsime si nastaviť pre stránku font Verdana. Dáme ho do typového selektora body, čím budú mať toto písmo nastavené všetky elementy v tele stránky, pokiaľ neuvedieme inak. Nadpisom nastavíme písmo Arial.

Do CSS teda pridajme 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;
}

K štýlu nadpisov sme do selektora pridali aj ďalšie 4. Keby sme ich náhodou použili, tak aby vyzerali ako ostatní.

Výsledok na našej stránke vyzerá teraz takto:

Web safe fonty

S fontmi je samozrejme problém v tom, že keď použijeme nejaký, ktorý máme v počítači len my, ostatným, ktorí toto písmo nemajú, sa web zobrazí predvoleným fontom. Z toho dôvodu sa buď určité písmo k stránke pripojí (čo si hneď ukážeme), alebo sa použije jeden z fontov, ktoré sú na väčšine počítačov. Na weboch sa najčastejšie používajú tieto fonty (aj keď napríklad na Linuxe treba nejaké doinštalovať):

• Arial
• Times New Roman
• Verdana
• Georgia
• Comic Sans MS
• Arial Black
• Impact
• Lucida Console
• Tahoma

Web je opäť v prílohe na stiahnutie.

V budúcej lekcii, Štylovanie textu v CSS - Google fonty, veľkosť fontu a tieň, si ukážeme štylovanie písma pomocou Google fontov a nastavíme veľkosť a tieň písma.

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