Pouze tento týden sleva až 80 % na e-learning týkající se C# .NET. Zároveň využij akce až 50 % zdarma při nákupu e-learningu. 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í.
Slevovy týden 3/50

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

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

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

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

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

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é 2403x (2.27 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 Čápka
Avatar
Užívateľské hodnotenie:
2 hlasov
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 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