Lekce 6 - Text a písmo - Zarovnání, stínování, tučnost písma, mezery

V minulé lekci, Text a písmo - Velikost, styl, dekorování, výška řádku, jsme pokračovali v problematice textu a písma. Pracovali jsme dále na našem článku za pomocí dalších CSS vlastností.

V této lekci budeme pokračovat v probírání dalších CSS vlastností a doděláme stylování našeho článku. Zase si ukážeme malé příklady ke každé vlastnosti. Na náš článek budeme aplikovat vlastnosti text-align a text-shadow, které si dnes probereme. Přidáme k němu také pár vlastností, které nás čekají v několika příštích lekcí, aby byl výsledek našeho článku nejpůsobivější.

Vlastnost text-align

Díky vlastnosti text-align můžeme zarovnávat text v HTML elementu. Syntaxe je následující:

text-align: hodnota;

Jako hodnotu doplňujeme pouze tato slovní spojení:

• left - Zarovná text nalevo.
• right - Zarovná text napravo.
• center - Vycentruje text.
• justify - Zarovná text do bloku. Tuto hodnotu je vhodné používat pouze v případě, že je element s textem dostatečně široký, jinak dochází ke vzniku neúhledných mezer.
• inherit - Vlastnost text-align se zdědí od rodičovského elementu.

Vlastnost text-align-last

K vlastnosti text-align se pojí i vlastnost text-align-last, která nastavuje zarovnání posledního řádku odstavce. Syntaxe je podobná jako u text-align, akorát se doplní -last:

text-align-last: hodnota;

Jako hodnotu taktéž doplňujeme pouze slovní spojení:

• auto (výchozí) - Nastaví se podle hodnoty vlastnosti text-align.
• left - Řádek se zarovná doleva.
• right - Řádek se zarovná doprava.
• justify - Řádek se zarovná do bloku. Tuto hodnotu nedoporučuji používat. V případě responzivních webových stránek je na každém zařízení jinak široký poslední řádek, proto by mohly být na mobilním verzi velké a neúhledné mezery mezi slovy.
• start - Nastaví zarovnání textu doleva, v případě nastavení hodnoty na rtl (right-to-left, zleva doprava) u vlastnosti direction doprava.
• center - Vycentruje text.
• end - Nastaví zarovnání textu doprava, v případě nastavení hodnoty na rtl u vlastnosti direction doleva.
• initial - Nastaví vlastnost na výchozí hodnotu (tedy na auto).
• inherit - Hodnota se zdědí z rodičovského elementu.

Na vlastnost direction se podíváme v některé z dalších lekcí.

Nyní si uvedeme malý příklad na text-align i text-align-last:

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

V HTML dokumentu doplníme Lorem ipsum do nadpisu 1. úrovně a odstavci:

<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ýsledek bude následující:

Nadpis je zarovnán na střed tak jako poslední řádek v odstavci.

Vlastnost text-shadow

Text-shadow je další vlastnost, kterou použijeme na náš článek. Vlastnost přidává textu stín a její syntaxe je následující:

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

Za tyto proměnné můžeme nahradit tyto hodnoty:

• x - Vodorovná pozice stínu vůči textu. Můžeme uvést i záporné hodnoty.
• y - Svislá pozice stínu vůči textu. Můžeme uvést také záporné hodnoty.
• rozostření - Nepovinný parametr udávající rozostření v délkových jednotkách (tedy např. v pixelech).
• barva - Nepovinný parametr udávající barvu stínu.

Ukážeme si malý příklad. Budeme chtít přidat nadpisu 1. úrovně stín, CSS kód vypadá takto:

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

Do HTML doplníme pouze nadpis s textem:

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

Výsledek stínu u písma:

Vlastnost font-weight

Další vlastnost, kterou si hodíme na stůl, je font-weight. Vlastnost font-weight nastavuje tučnost písma v HTML elementu. Syntaxe je zase jednoduchá:

font-weight: hodnota;

Za hodnotu můžeme nastavit buďto slovní spojení či číselnou hodnotu v řádech stovek (100, 200 až 900). Slovní hodnoty máme tyto:

• normal (výchozí) - Normální písmo.
• bold - Tučné písmo.
• bolder - Tučnější písmo.
• lighter - Tenčí písmo.
• inherit - Hodnota se zdědí z rodičovského elementu.

Dále můžeme místo slovních hodnot uvést již zmíněné číselné hodnoty:

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

Malý příklad si samozřejmě uvedeme také:

.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ýsledek:

Vlastnost letter-spacing

Poslední vlastností pro tuto lekci je letter-spacing, díky které se zvyšuje nebo snižuje rozestoupení znaků v textu. Syntaxe je taktéž jednoduchá:

letter-spacing: hodnota;

Jako hodnotu doplňujeme libovolnou hodnotu s jednotkou délky (např. px nebo em). Můžeme ale také použít slovní hodnotu normal, což je výchozí rozestup mezi písmeny. Můžeme zde jít i do záporných hodnot. Malý příklad určitě neuškodí:

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

Do HTML kódu přidáme klasicky nějaký text pro nadpis a odstavec pro demonstraci:

<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ýsledek rozestupu písmen:

Finální úprava článku

Nově naučené vlastnosti (avšak ne všechny) si přidáme k našemu článku, i tak ale nebude výsledek stoprocentní. Přidáme si další vlastnosti, které jsme zatím ještě neprobrali (tyto vlastnosti budou okomentované: /*Probereme v příštích lekcích*/). Tento příklad článku již ale bude pouze zmíněn v dalších lekcích u neprobraných vlastností, které se v něm vyskytují. Přejdeme tedy na náš CSS soubor pro článek:

* {
    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 {
    margin-top: 2em; /*Probereme v příštích lekcích*/
}

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

Pro úplnost si uvedeme ještě 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ýsledek našeho článku si můžeme prohlédnout a zhodnotit sami:

Vytvořili jsme styl článku, který se krásně hodí na spoustu blogů, níže si ho také můžete stáhnout. Nebudeme ale usínat na vavřínech a probereme si další zajímavé CSS vlastnosti u další lekce

V další lekci, Text a písmo - Směr, šíře, varianty, závěsná interpunkce, si ukážeme, jak pracovat s vlastními fonty, měnit směr písma a napsat text velkými písmeny tak, aby zůstala malá.