6. diel - Text a písmo 3. časť

V minulej lekcii, Text a písmo 2. časť , sme pokračovali v problematike textu a písma. Pracovali sme ďalej na našom článku za pomocou ďalších CSS vlastností.

V tejto lekcii budeme pokračovať v preberaní ďalších CSS vlastností a dorobíme štýlovanie nášho článku. Zase si ukážeme malé príklady ku každej vlastnosti. Na náš článok budeme aplikovať vlastnosti text-align a text-shadow, ktoré si dnes preberieme. Pridáme k nemu tiež pár vlastností, ktoré nás čakajú v niekoľkých najbližších lekcií, aby bol výsledok nášho článku najpôsobivejšie.

Text-align

Vďaka vlastnosti text-align môžeme zarovnávať text v HTML elementu. Syntax je nasledovná:

text-align: hodnota;

Ako hodnotu dopĺňame iba táto slovné spojenie:

• left - Zarovná text naľavo.
• right - Zarovná text napravo.
• centier - vycentruje text.
• justify - Zarovná text do bloku. Túto hodnotu je vhodné používať iba v prípade, že je element s textom dostatočne široký, inak dochádza k vzniku neúhledných medzier.
• inherit - Vlastnosť text-align sa zdedí od rodičovského elementu.

Text-align-last

K vlastnosti text-align sa spája aj vlastnosť text-align-last, ktorá nastavuje zarovnanie posledného riadku odseku. Syntax je podobná ako u text-align, akurát sa doplní -last:

text-align-last: hodnota;

Ako hodnotu taktiež dopĺňame iba slovné spojenie:

• auto (predvolené) - Nastaví sa podľa hodnoty vlastnosti text-align.
• left - Riadok sa zarovná doľava.
• right - Riadok sa zarovná doprava.
• justify - Riadok sa zarovná do bloku. Túto hodnotu neodporúčam používať. V prípade responzívne webových stránok je na každom zariadení inak široký posledný riadok, preto by mohli byť na mobilnom verziu veľké a neúhledné medzery medzi slovami.
• štart - Nastaví zarovnanie textu doľava, v prípade nastavenia hodnoty na rtl (r ight- t o- l eft, zľava doprava) u vlastnosti direction doprava.
• end - Nastaví zarovnanie textu doprava, v prípade nastavenia hodnoty na rtl u vlastnosti direction doľava.
• initial - Nastaví vlastnosť na predvolenú hodnotu (teda na auto).
• inherit - Hodnota sa zdedí z rodičovského elementu.

Na vlastnosť direction sa pozrieme v niektorej z ďalších lekcií.

Teraz si uvedieme malý príklad na text-align i text-align-last:

h1 {
    text-align: center;
}
p {
    text-align-last: center;
}

V HTML dokumente doplníme Lorem ipsum do nadpisu 1. úrovne a odseku:

<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>

A výsledok bude nasledujúci:

Nadpis je zarovnaný na stred tak ako posledný riadok v odseku.

Text-shadow

Text-shadow je ďalšia vlastnosť, ktorú použijeme na náš článok. Vlastnosť pridáva textu tieň a jej syntax je nasledujúca:

text-shadow: x y rozostření barva;

Za tieto premenné môžeme nahradiť tieto hodnoty:

• x - Horizontálna pozícia tieňa voči textu. Môžeme uviesť aj záporné hodnoty.
• y - Zvislá pozície tieňa voči textu. Môžeme uviesť tiež záporné hodnoty.
• rozostrenie - Nepovinný parameter udávajúci rozostrenie v dĺžkových jednotkách (teda napr. v pixeloch).
• farba - Nepovinný parameter udávajúci farbu tieňa.

Ukážeme si malý príklad. Budeme chcieť pridať nadpisu 1. úrovne tieň, CSS kód vyzerá takto:

h1 {
    text-shadow: 6px 3px 6px rgb(150, 150, 150);
}

Do HTML doplníme iba nadpis s textom:

<h1>Lorem ipsum dolor sit amet</h1>

Výsledok tieňa u písma:

Font-weight

Ďalšia vlastnosť, ktorú si hodíme na stôl, je font-weight. Vlastnosť font-weight nastavuje tučnosť písma v HTML elementu. Syntax je zase jednoduchá:

font-weight: hodnota;

Za hodnotu môžeme nastaviť buďto slovné spojenie či číselnú hodnotu v rádoch stoviek (100, 200 až 900). Slovné hodnoty máme tieto:

• normal (predvolené) - Normálne písmo.
• bold - Tučné písmo.
• Bolder - Tučnejšie písmo.
• lighter - Tenšie písmo.
• inherit - Hodnota sa zdedí z rodičovského elementu.

Ďalej môžeme miesto slovných limitov uviesť už spomínané číselné hodnoty:

• 100
• 200
• 300
• 400 - Ako hodnota normal.
• 500
• 600 - Ako hodnota bold.
• 700
• 800
• 900

Malý príklad si samozrejme uvedieme tiež:

.tucne {
    font-weight: bold;
}

HTML kód:

<p class="tucne">Text v tomto odstavci je psán tučně.</p>
<p>Text v tomto odstavci není psán tučně.</p>

A výsledok:

Letter-spacing

Posledný vlastností pre túto lekciu je letter-spacing, vďaka ktorej sa zvyšuje alebo znižuje rozostúpenie znakov v texte. Syntax je taktiež jednoduchá:

letter-spacing: hodnota;

Ako hodnotu dopĺňame ľubovoľnú hodnotu s jednotkou dĺžky (napr. px alebo em). Môžeme ale tiež použiť slovné hodnotu normal, čo je predvolený rozostup medzi písmenami. Môžeme tu ísť aj do záporných hodnôt. Malý príklad určite neuškodí:

h1 {
    letter-spacing: -5px;
}
p {
    letter-spacing: 0.5em;
}

Do HTML kódu pridáme klasicky nejaký text pre nadpis a odsek pre demonštráciu:

<h1>Nadpis</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Výsledok rozostupu písmen:

Finálna úprava článku

Novo naučené vlastnosti (avšak nie všetky) si pridáme k nášmu článku, aj tak ale nebude výsledok stopercentný. Pridáme si ďalšie vlastnosti, ktoré sme zatiaľ ešte neprebrali (tieto vlastnosti budú okomentované: /*Probereme v příštích lekcích*/). Tento príklad článku už ale bude len spomenutý v ďalších lekciách u neprobraných vlastností, ktoré sa v ňom vyskytujú. Prejdeme teda na náš CSS súbor pre článok:

*{
    box-sizing:border-box; /*Probereme v příštích lekcích*/
}

body{
    background:#80a6ff; /*Probereme v příštích lekcích*/
}

.clanek-obal{
    background:#fff; /*Probereme v příštích lekcích*/
    width:1000px; /*Probereme v příštích lekcích*/
    margin:auto; /*Probereme v příštích lekcích*/
    padding:2em; /*Probereme v příštích lekcích*/
}

.clanek-hlavicka{
    text-align:center;
}

.clanek-hlavicka h1{
    text-shadow: 3px 3px 3px rgb(150, 150, 150);
}

.clanek-obsah{
    width:80%; /*Probereme v příštích lekcích*/
    margin:auto; /*Probereme v příštích lekcích*/
}

.clanek-obsah h2{
h   margin-top:2em; /*Probereme v příštích lekcích*/
}

.clanek-paticka{
    margin-top:2em;
}

Pre úplnosť si uvedieme ešte HTML kód:

<!DOCTYPE html>
<html lang="cs-cz">
<head>
    <meta charset="utf-8" />
    <title>Titulek stránky</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

<div class="clanek-obal">
    <div class="clanek-hlavicka">
        <h1>Lorem ipsum dolor sit amet, adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna!</h1>
        <p>3 minuty čtení</p>
    </div>
    <div class="clanek-obsah">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation <strong>ullamco laboris nisi ut aliquip ex ea commodo
        consequat.</strong> Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <h2>Lorem ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <h2>Lorem ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="clanek-paticka">
        <a href="#">Životní styl</a> <a href="#">Technologie</a> <a href="#">Cestování</a>
    </div>
</div>


</body>

</html>

Výsledok nášho článku si môžeme prezrieť a zhodnotiť sami:

Vytvorili sme štýl článku, ktorý sa krásne hodí na veľa blogov, nižšie si ho tiež môžete stiahnuť. Nebudeme ale zaspávať na vavrínoch a preberieme si ďalšie zaujímavé CSS vlastnosti u ďalšie lekcie:)

V ďalšej lekcii, Úvod do animácií elementov pomocou CSS3 , sa pozrieme na to, ako fungujú animácie v CSS3.