Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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:

Centrovanie v CSS - Webové stránky krok za krokom

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:

Centrovanie obrázku v CSS - Webové stránky krok za krokom

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:

Zmena písma webu cez CSS - Webové stránky krok za krokom

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:

Nstavení veľkosti písma v HTML cez CSS a EM - Webové stránky krok za krokom

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:

Tieň písma v CSS - Webové stránky krok za krokom

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é 3125x (2.13 MB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS

 

Predchádzajúci článok
Základné CSS selektory a vlastnosti
Všetky články v sekcii
Webové stránky krok za krokom
Preskočiť článok
(neodporúčame)
Layout a pozadie v HTML
Článok pre vás napísal David Hartinger
Avatar
Užívateľské hodnotenie:
4 hlasov
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.
Aktivity