Lekce 5 - Text a písmo - Velikost, styl, dekorování, výška řádku

V minulé lekci, Text a písmo - Barva a typ písma , jsme se uvedli do problematiky textu a písma. Začali jsme využívat různé vlastnosti pro dobře čitelný text a ukázali si to i na ukázkovém článku.

V této lekci budeme dále probírat CSS vlastnosti, které aplikujeme na náš rozdělaný text v ukázkovém článku. Minule jsme probrali vlastnost color a font-family. Dnes si probereme vlastnosti font-size, font-style, text-transform, line-height a text-decoration.

Font-size

Začneme vlastností font-size, která udává velikost písma daného HTML elementu. Její syntaxe je jednoduchá:

font-size: hodnota;

Za klíčové slovo hodnota můžeme doplnit slovní spojení (jako to je u vlastnosti color) nebo číselnou hodnotu v různých jednotkách (px, em, ...). Slovní spojení máme např. x-small, small, medium, large, x-large a další. My zde budeme používat pro ukázku pouze číselné hodnoty.

Aby uživatelé mohli změnit velikost textu (v prohlížeči), mnoho vývojářů používá em namísto pixelů. Jednotka em je i doporučena standardem W3C. 1em se rovná aktuální velikosti písma. Výchozí velikost textu v prohlížečích je 16px. Výchozí velikost 1em je tedy 16px. Velikost lze tedy vypočítat z pixelů na em pomocí vzorce pixel/16 = em. Nyní si vše ukážeme na tomto příkladu:

.px {
    font-size: 16px;
}
.em {
    font-size: 2em;
}

HTML kód příkladu bude tento:

<p class="px">Velikost textu je 16 pixelů.</p>
<p class="em">Velikost textu je dvojnásobná oproti prvnímu odstavci.</p>

Vytvořili jsme si 2 třídy s rozdílnou velikostí textu. Jednu v px a druhou v em a podle toho si je i pojmenovali. Dále jsme vytvořili dva odstavce s textem, kterým jsem přiřadili tyto třídy. Výsledek je přesně takový, jak říká text v obou odstavcích:

Font-style

Vlastnost font-style se používá pro nastavení stylu písma, především teda pro nastavení kurzívy. Syntaxe je následující:

font-style: hodnota;

Za hodnotu doplňujeme pouze slovní spojení:

• normal - Normální písmo.
• italic - Kurzíva.
• oblique - Šikmé písmo. Tato vlastnost někdy vypadá stejně jako kurzíva, ale mnoho písem používá pro kurzívu trochu jiné tvary. Oblique použije ten samý tvar jako má normální písmo, jen ho vykreslí na šikmo.
• inherit - Zdědíme vlastnost font-style od rodičovského elementu.

Vyzkoušíme si přidat kurzívu zase odstavci, tentokrát nemusíme psát žádné třídy, pouze tuto vlastnost přiřadíme odstavci <p> s nějakým textem:

p {
    font-style: italic;
}

HTML kód je jasný:

<p>Odstavec psaný kurzívou.</p>

Výsledek spolupráce těchto dvou kódů:

Text-transform

Další vlastností, kterou si probereme je text-transform. Tato vlastnost se používá na převedení textu. Můžeme převést buď na malá či velká písmena a nebo na velké písmeno každého slova, tzv. kapitálky. Vlastnost může mít pouze jednu hodnotu, je proto stejná jako u předchozích vlastností:

text-transform: hodnota;

Hodnoty jsou zase slovní spojení:

• none (výchozí) - Nebude nijak transformovat text.
• capitalize - Transformuje každé počáteční písmeno v každém slově v textu jako velké. Další písmena ponechá tak, jak jsou zapsaná.
• uppercase - Transformuje celý text velkými písmeny.
• lowercase - Transformuje celý text malými písmeny.
• inherit - Vlastnost text-transform se zdědí od rodičovského elementu.

Uvedeme si zde malý příklad:

p {
    text-transform: uppercase;
}

V HTML kódu můžeme trochu experimentovat a napsat každé písmeno do odstavce velké nebo malé:

<p>MoJe VáŠeŇ jE vElIkÁ.</p>

A výsledek bude převedení všech písmen na velká:

Line-height

Vlastnost line-height udává výšku řádku textu. Její syntaxe je stejná jako u předchozích vlastností. Jako hodnotu můžeme zadat:

• normal (výchozí),
• číslo bez jednotky (např.: 1.6),
• délku (např.: 20px, 2em, ...) a
• procenta.

Malý příklad:

.line-height {
    line-height: 2em;
}

Do HTML části musíme přidat trochu více textu do odstavců, tudíž zvolíme krásné Lorem ipsum:

<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>

<p class="line-height">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>

Třídu .line-height dáme pouze druhému odstavci, ať můžeme vidět krásný rozdíl výšky řádků:

Text-decoration

Poslední vlastnost této lekce je text-decoration, která styluje text různými styly čar.

Hodnoty vlastnosti jsou následující:

• none (výchozí) - Normální text.
• underline - Podtržený text (čára pod textem).
• overline - Čára nad textem.
• line-through - Přeškrtnutý text (čára přes text).
• blink - Blikající text. Tato hodnota není prohlížeči příliš podporována.
• inherit - Vlastnost text-decoration se zdědí od rodičovského elementu.

K vlastnosti text-decoration je nutné zmínit další pomocné vlastnosti:

• text-decoration-color, která zajišťuje barvu dekorace textu
• text-decoration-line, která zajišťuje konkrétní typ dekorace
• text-decoration-style, která zajišťuje styl dekorace

Syntaxi si tentokrát ukážeme přímo na příkladu, protože je trochu komplikovanější. Vlastnost můžeme zapsat dvěma způsoby. První způsob je zapsáním pouze vlastnosti text-decoration a zapsáním dalších hodnot za sebou odděleny mezerami:

p {
  text-decoration: overline red wavy;
}

a nebo druhým způsobem takto:

p {
  text-decoration: overline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

V prvním zápisu můžeme specifikovat všechny styly dohromady. Nemusí tam být tedy pouze overline, může tam být k tomu i underline a nebo i line-through. Nemusíme při tom používat pomocné vlastnosti na styl a barvu. Takových vlastností je mnohem více.

V HTML dokumentu budeme mít jednoduchý odstavec s textem:

<p>Odstavec s vlnovkou.</p>

A výsledek obou vlastností bude vypadat naprosto totožně:

Vlastnosti text-decoration-line a text-decoration-style nejsou plně podporovány v prohlížečích Edge/Internet Explorer! Podporované vlastnosti pro jednotlivé prohlížeče můžeme vždy prověřit na caniuse.com

Trocha praxe

Nyní si aplikujeme všechny vlastnosti, které jsme se naučili v těchto lekcích. Obohatíme náš CSS kód o nové třídy a vlastnosti:

body {
    font-family: 'Ubuntu', sans-serif;
    color: #111111;
}
.clanek-hlavicka h1 {
    text-transform: uppercase;
    font-size: 2.375em;
    line-height: 1.2em;
}
.clanek-hlavicka p {
    color: #8c8c8c;
    font-style: italic;
    font-size: 0.875em;
}
.clanek-obsah {
    color: #262626;
}
.clanek-obsah p {
    font-size: 1.125em;
    line-height: 1.8em;
}
.clanek-obsah h2 {
    color: #4a4a4a;
}
.clanek-paticka a {
    color: #5c8cff;
    text-decoration: none;
    text-transform: uppercase;
}
.clanek-paticka a:hover {
    color: #3064e3;
    text-decoration: underline;
}

A výsledek našeho textu už stojí za to:

Pro dnešní lekci to bylo vše

V další lekci, Text a písmo - Zarovnání, stínování, tučnost písma, mezery , budeme pokračovat v problematice textu a písma. Podíváme se na vlastnosti font-weight, letter-spacing, text-shadow a text-align. Doděláme také náš ukázkový styl článku.