8. diel - Triedne selektor a štýlovanie textu v CSS
V minulej lekcii, Základné CSS selektory a vlastnosti , sme si ukázali použitie CSS. Naučili sme sa farbiť a zarovnávať text. Dnes budeme s CSS v tutoriálu pokračovať.
Centrovanie obrázkov
Na našej stránke máme jeden obrázok. Určite by vyzeralo lepšie, keby bol obrázok v stredu stránky. Centrovanie je v CSS pomerne veda a počas seriálu sa naučíme niekoľko spôsobov, ako centrovať rôzne prvky na stránke. Obrázok vycentrujeme tak, že ho vložíme do odseku (v odseku ho už máme) a odseku v CSS pridelíme vlastnosť text-align s hodnotou centier. Problém je, že zatiaľ známy len typový selektor a ak by sme do CSS napísali toto:
p { text-align: center; }
Vycentroval by sme obsah všetkých odsekov na stránke. Výsledok by vyzeral asi takto:
Takéto 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 stylovať úplne všetky elementy určitého typu. Z toho dôvodu nám CSS ponúka ďalšie 2 selektory: selektory triednej a ID selektory. Triedny selektor funguje tak, že niektoré elementy na stránke zaradíme pomocou 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. V tejto súvislosti si vytvorme triedu "centrovanie". Triedu si môžeme pomenovať ako sa nám zapáči, ale musíme používať len malé písmená a pomlčky. Z názvu triedy by malo byť jasné, čo robí (vyhneme sa teda názvov ako trida15 a podobne).
Presuňme sa do styl.css a v ňom definujme triednej selektor na triedu centrovanie. Triedny selektor začína vždy bodkou a pokračuje názvom triedy. Ďalej funguje rovnako, ako selektor typový. Dovnútra selektora vložíme nám známu vlastnosť text-align s hodnotou centier.
h1, h2 { text-align: center; } .centrovany { text-align: center; }
Teraz prejdime do index.html a náš odsek s obrázkom zaraďme do triedy centrovaný. Urobíme to pomocou atribútu class:
<p class="centrovany"> <img src="obrazky/avatar.png" alt="Programátor HoBi" /> </p>
Poukládáme a vyskúšame. výsledok:
Obsah vo všetkých elementoch sa triedou centrovanie bude teraz zarovnaný na stred. Ak vám príde zavádzajúce, že obrázok reaguje na vlastnosť text-align, máte pravdu. Názov je trochu mätúce, jedná sa o zarovnanie obsahu, nie textu. Element môžeme zaradiť hneď do niekoľkých tried naraz, jednoducho ich názvy oddelíme v atribúte class medzerou. Väčšinou ich ale príliš nebýva.
Štýlovanie textu
Ostylujme lepšie text na našej stránke a spomeňme si k tomu niekoľko CSS vlastností.
Font písma
Font textu zmeníme pomocou vlasnosti font-family. Predvolené písmo na webe je pätkový Times New Roman, ktorý sa na web príliš nehodí a používa sa skôr v tlačených dokumentoch.
Písiem (fontov) sa na jednej stránke zvyčajne príliš veľa nekombinuje, väčšinou sú len 2 - jedno na nadpisy a ďalšie na zvyšok textu na stránke.
S fonty 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í východiskovým fontom. Z toho dôvodu sa buď určité písmo k stránke pripojí (čo zatiaľ nevieme), 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. Na Linuxe je potrebné nejaké doinštalovať):
- Arial
- Times New Roman
- Verdana
- Georgia
- Comic Sans MS
- Arial Black
- impact
- Lucida Console
- Tahoma
Nastavme pre stránku font Verdana. Dáme ho do typového selektora body, tak budú mať toto písmo nastavené všetky elementy v tele stránky, ak neuvedieme inak. Nadpisom nastavme Arial.
Do CSS teda pridajme typový selektor na 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 som do selektrou pridal aj ďalšie 4, keby sme ich náhodou použili, tak aby vyzerali ako ostatní.
výsledok:
Veľkosť písma
Veľkosť písma nastavujeme pomocou vlastnosti font-size. Podobne ako u farieb máme niekoľko možností, ako veľkosť zadať. Uveďme si základné 2.
Pixely
Prvou možnosťou je zadať veľkosť textu v pixeloch. Nastavme všetkému v body veľkosť písma 14 pixelov:
font-size: 14px;
Výhoda je, že font bude všade rovnako veľký. To je výhodné najmä pre nastavenie hlavného písma pre celé body.
Em == Druhým spôsobom, ako veľkosť zadať, sú tzv. Jednotky em. Hodnota zadaná pomocou em označuje, koľkokrát je písmo väčšie ako veľkosť písmená M súčasného písma. Jedná sa teda o jednotku relatívna. Výhodné je všade používať em, pretože keď sa rozhodneme pre väčšie písmo našej stránky, zmeníme len písmo v body a všetky ďalšie písma sa nám zväčší sama. Nastavme si nadpis h2 o niečo väčšie, na hodnotu 1.7em (teda o 70% väčší ako súčasný text):
h2 { font-size: 1.7em; }
výsledok:
Všimnite si, že robíme naozaj len malé zmeny. Nie je dôvod, prečo robiť nadpisy krikľavo červené a dvojmetrovej.
Nastavenie veľkosti a fontu písma sa väčšinou spája do jednej CSS vlastnosti font. miesto:
font-family: Verdana; font-size: 14px;
Teda môžeme napísať:
font: 14px Verdana;
Tieň písma
Písme môžeme veľmi jednoducho pridať tieň pomocou CSS vlastnosti text-shadow. Dajme trochu tieňa pod naše nadpisy:
text-shadow: 3px 3px 7px #666666;
Prvé 2 parametre sú pozície tieňa, hovoríme, že leží 3 pixely napravo od textu a 3x dole. Tretí parameter je rozostrenie, čím vyššia hodnota, tým je text rozostretejšia. Pri hodnote 1px je ostrý. Posledným parametrom je farba, tu sivá.
výsledok:
So tieňom sa toho dá robiť pomerne veľa, keď ich pridáte niekoľko a nafarbíte, možno urobiť napr. Efekt ohňa. Budem sa vás snažiť vždy takto navádzať na rôzne vychytávky, keby vás niečo zaujalo
U písma sa toho dá stylovať naozaj plno, to najzákladnejšie sme si ukázali, kompletný popis nájdete ako vždy v tunajšom českom CSS 3 manuálu - Písmo.
V budúcej lekcii, Layout a pozadie v HTML , začneme pracovať na layoutu, teda rozloženie stránky na navigačné menu, obsahovú časť a pätičku. Web je ako vždy v prílohe k stiahnutiu.
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é 3167x (2.13 MB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS