5. diel - Text a písmo 2. časť

V minulej lekcii, Text a písmo 1. časť , sme sa uviedli do problematiky textu a písma. Začali sme využívať rôzne vlastnosti pre dobre čitateľný text a ukázali si to aj na ukážkovom článku.

V tejto lekcii budeme ďalej preberať CSS vlastnosti, ktoré aplikujeme na náš rozloženú text v ukážkovom článku. Minule sme prebrali vlastnosť color a font-family. Dnes si preberieme vlastnosti font-size, font-style, text-transform, line-height a text-decoration.

Font-size

Začneme vlastnosťou font-size, ktorá udáva veľkosť písma daného HTML elementu. Jej syntax je jednoduchá:

font-size: hodnota;

Za kľúčové slovo hodnota môžeme doplniť slovné spojenie (ako to je u vlastnosti color) alebo číselnú hodnotu v rôznych jednotkách (px, em, ...). Slovné spojenie máme napr. x-small, small, medium, large, x-large a ďalšie. My tu budeme používať pre ukážku iba číselné hodnoty.

Aby užívatelia mohli zmeniť veľkosť textu (v prehliadači), mnoho vývojárov používa em namiesto pixelov. Jednotka em je aj doporučená štandardom W3C. 1em sa rovná aktuálnej veľkosti písma. Predvolená veľkosť textu v prehliadačoch je 16px. Predvolená veľkosť 1em je teda 16px. Veľkosť možno teda vypočítať z pixelov na em pomocou vzorca pixel/16 = em. Teraz si všetko ukážeme na tomto príklade:

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

HTML kód prí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>

Vytvorili sme si 2 triedy s rozdielnou veľkosťou textu. Jednu v px a druhú v em a podľa toho si ich aj pomenovali. Ďalej sme vytvorili dva odseky s textom, ktorým som priradili tieto triedy. Výsledok je presne taký, ako hovorí text v oboch odsekoch:

Font-style

Vlastnosť font-style sa používa pre nastavenie štýlu písma, predovšetkým teda pre nastavenie kurzívy. Syntax je nasledovná:

font-style: hodnota;

Za hodnotu dopĺňame iba slovné spojenie:

• normal - Normálne písmo.
• italic - Kurzíva.
• oblique - Šikmé písmo. Táto vlastnosť niekedy vyzerá rovnako ako kurzíva, ale mnoho písiem používa pre kurzívu trochu iné tvary. Oblique použije ten istý tvar ako má normálne písmo, len ho vykreslí na šikmo.
• inherit - zdedíte vlastnosť font-style od rodičovského elementu.

Vyskúšame si pridať kurzívu zase odseku, tentoraz nemusíme písať žiadne triedy, iba túto vlastnosť priradíme odseku <p> s nejakým textom:

p {
    font-style: italic;
}

HTML kód je jasný:

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

Výsledok spolupráce týchto dvoch kódov:

Text-transform

Ďalšou vlastnosťou, ktorú si preberieme je text-transform. Táto vlastnosť sa používa na prevedenie textu. Môžeme previesť buď na malé či veľké písmená a alebo na veľké písmeno každého slova, tzv. Kapitálky. Vlastnosť môže mať iba jednu hodnotu, je preto rovnaká ako u predchádzajúcich vlastností:

text-transform: hodnota;

Hodnoty sú zase slovné spojenie:

• none (predvolené) - Nebude nijako transformovať text.
• capitalize - Transformuje každé začiatočné písmeno v každom slove v texte ako veľké. Ďalšie písmená ponechá tak, ako sú zapísané.
• uppercase - Transformuje celý text veľkými písmenami.
• Lowercase - Transformuje celý text malými písmenami.
• inherit - Vlastnosť text-transform sa zdedí od rodičovského elementu.

Uvedieme si tu malý príklad:

p {
    text-transform: uppercase;
}

V HTML kóde môžeme trochu experimentovať a napísať každé písmeno do odseku veľké alebo malé:

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

A výsledok bude prevedenie všetkých písmen na veľké:

Line-height

Vlastnosť line-height udáva výšku riadka textu. Jej syntax je rovnaká ako u predchádzajúcich vlastností. Ako hodnotu môžeme zadať:

• normal (predvolené),
• číslo bez jednotky (napr .: 1.6),
• dĺžku (napr .: 20px, 2em, ...) a
• percenta.

Malý príklad:

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

Do HTML časti musíme pridať trochu viac textu do odsekov, teda zvolíme krásne 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>

Triedu .line-height dáme iba druhému odseku, nech môžeme vidieť krásny rozdiel výšky riadkov:

Text-decoration

Posledná vlastnosť tejto lekcie je text-decoration, ktorá štýlom text rôznymi štýlmi čiar.

Hodnoty vlastnosti sú nasledujúce:

• none (predvolené) - Normálna text.
• underline - Podčiarknutý text (čiara pod textom).
• overline - Čiara nad textom.
• line-through - Preškrtnutý text (čiara cez text).
• blink - Blikajúce text. Táto hodnota nie je prehliadači príliš podporovaná.
• inherit - Vlastnosť text-decoration sa zdedí od rodičovského elementu.

K vlastnosti text-decoration je nutné spomenúť ďalšie pomocné vlastnosti:

• text-decoration-color, ktorá zaisťuje farbu dekorácie textu
• text-decoration-line, ktorá zaisťuje konkrétny typ dekorácie
• text-decoration-style, ktorá zaisťuje štýl dekorácie

Syntax si tentokrát ukážeme priamo na príklade, pretože je trochu komplikovanejšia. Vlastnosť môžeme zapísať dvoma spôsobmi. Prvý spôsob je zapísaním len vlastnosti text-decoration a zapísaním ďalších hodnôt za sebou oddelené medzerami:

p {
  text-decoration: overline red wavy;
}

a alebo druhým spôsobom takto:

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

V prvom zápise môžeme špecifikovať všetky štýly dokopy. Nemusí tam byť teda iba overline, môže tam byť k tomu aj underline a alebo aj line-through. Nemusíme pri tom používať pomocné vlastnosti na štýl a farbu. Takých vlastnosťou je oveľa viac.

V HTML dokumente budeme mať jednoduchý odsek s textom:

<p>Odstavec s vlnovkou.</p>

A výsledok oboch vlastností bude vyzerať úplne totožne:

Vlastnosti text-decoration-line a text-decoration-style nie sú plne podporované v prehliadačoch Edge / Internet Explorer! Podporované vlastnosti pre jednotlivé prehliadače môžeme vždy preveriť na caniuse.com

Trocha praxe

Teraz si aplikujeme všetky vlastnosti, ktoré sme sa naučili v týchto lekciách. Obohatíme náš CSS kód o nové triedy 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ýsledok nášho textu už stojí za to:

Pre dnešné lekciu to bolo všetko:)

V ďalšej lekcii, Text a písmo 3. časť , budeme pokračovať v problematike textu a písma. Pozrieme sa na vlastnosti font-weight, letter-spacing, text-shadow a text-align. Dorobíme tiež náš ukážkový štýl článku.