4. diel - Text a písmo 1. časť

V minulej lekcii, Jednotky (em, rem, px, ...) , sme sa uviedli do problematiky dĺžkových jednotiek v CSS3. Ukázali sme si rôzne druhy jednotiek a kedy ich použiť.

V tejto lekcii si ukážeme vlastnosti, ktoré sa používajú na úpravu textu. Tieto vlastnosti budeme aplikovať na vopred nachystaný text, aby bolo možné vidieť výsledky v čo najlepšom svetle. Textových vlastností je veľa, teda si najskôr preberieme tie, s ktorými sa stretneme najčastejšie. Ďalšie vlastnosti si preberieme tak, nech aspoň vieme, že existujú. Naším cieľom v tejto lekcii bude vytvorenie ukážkového štýlu článku, ktorý sa bude páčiť nám i návštevníkom. Chceme predsa, aby sa text dal pohodlne prečítať a návštevníci sa na náš web radi vracali:

Budúce výsledok.

Vytvorenie základu

Pre začiatok si vytvoríme HTML súbor a nalinkuje si k nemu CSS súbor, ako sme sa naučili v predchádzajúcich lekciách:

Potom budeme pokračovať nachystáním si štruktúry článku vrátane obsahu, kde použijeme veľmi známy Lorem ipsum generátor. Lorem ipsum je generátor náhodných latinských slov, ktorý je využívaný v grafickom návrhu pre naplnenie textu.

Štruktúra článku sa bude skladať z obalu, v ktorom budú 3 časti: hlavička, obsah a pätička. Všetky tieto časti budú v blokových značkách <div>, ktorým priradíme konkrétnej triedy. V hlavičke bude nadpis prvej úrovne (tag <h1>) a doba čítania článku ako odsek (tag <p>). V obsahu budú odseku s nadpismi druhej úrovne (tag <h2>). A v poslednej rade bude pätička, v ktorej sa budú nachádzať odkazy v tagu <a>, ktoré budú simulovať kategórie článkov.

Štruktúra celého HTML dokumentu bude vyzerať nasledovne:

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

Môžeme si všimnúť pomenovanie tried, ktoré jasne špecifikuje danú oblasť svojim názvom. Je tak na prvý pohľad jasné, že všetko patrí článku. Ešte pribudol v prvom odseku HTML tag <strong>, ktorý sa používa pre zvýraznenie textu a zvýšenie priority označených kľúčových slov. Tento text je v predvolenom štýle zvýraznený tučne, bez toho aby sme nejaký štýl pridávali.

CSS

Teraz sa vrhneme na štýlovanie. Zakaždým si preberieme určitú vlastnosť so všetkými jej variantmi, ukážeme si niektoré varianty aj na ukážke a potom ich aplikujeme na náš článok.

Color

Začneme vlastnosťou color, ktorú nastavíme farbu písma v HTML elementu. Syntax vlastnosti je nasledovné:

color: hodnota;

Hodnotu farby môžeme zadať niekoľkými spôsobmi:

preddefinovanú hodnotou,
RGB,
HEX a
HSL.

Preddefinované hodnota

Táto hodnota sa zadáva slovne. HTML podporuje 140 názvov farieb. Ako príklad si môžeme uviesť farby: Orange, Gray, Black, ale napríklad aj DodgerBlue, MediumSeaGreen a rôzne ďalšie. Kompletný zoznam si môžete ľahko nájsť na internete. Použitie farby Tomato je priamočiare:

.definovana-barva {
    color: Tomato;
}

Výsledok si ihneď ukážeme:

Definovaná barva

index.html

RGB, RGBA

Hodnota v RGB formáte reprezentuje kombináciu farieb R ed (červená), G reen (zelená), B lue (modrá). Hodnoty sú v rozmedzí 0-255, kedy najväčšie číslo je najväčší "množstvo" farby. U RGBA je to rovnaké, iba tu pribudla jedna vychytávka a tou je alfa kanál, ktorý znázorňuje priehľadnosť farby. Alfa kanál sa od zvyšku líšia typom svoje hodnoty, transparentnosť je totiž definovaná ako "percento", teda hodnoty sú tu od 0 do 1 (0 = 0 % (priehľadný) a 1 = 100 % (nepriehľadný)). Polovičná priehľadnosť teda nastavíme hodnotou 0.5. Syntax RGBA zápisu je nasledovné:

color: rgba(red, green, blue, alfa);

Ukážeme si to zase na malom príklade:

.rgba {
    color: rgba(255, 99, 71, 0.5);
}

výsledok:

RGBA

index.html

HEX

Hexadecimálne zápis hodnoty u vlastnosti color je v podobnom duchu ako RGB. Pred hodnotou je znak hashtag a ďalej nasleduje hodnota: #rrggbb, rr ako červená, gg ako zelená a bb ako modrá. Syntax je nasledovná: color: #rrggbb;. Hodnoty sú v rozmedzí 00-ff (klasická šesťnástková sústava.) Za zmienku na zapamätanie určite stojí zobrazenie bielej #FFFFFF a zobrazenie čiernej # 000000. Ľudia sú ale leniví, tak sa nám to trochu skráti. Keď máme rovnaké hodnoty, tak stačí vypísať iba 3 znaky (z každej farby jeden) a CSS si s tým už poradia. Čiernu by sme teda mohli zapísať ako #fff. A určite nás ani neminie jeden príklad:

.hex {
    color: #ff6347;
}

RGBA

index.html

HSL, HSLA

HSL zápis reprezentuje Hue (odtieň), Saturation (sýtosť), Lightness (svietivosť). Syntax HSL formátu je nasledovné: hsl(hue, saturation, lightness);. Hue nadobúda hodnoty 0-360 z kruhu (0 je červená, 120 je zelená a 240 je modrá). Saturation je percentuálny hodnota, kde 0% reprezentuje odtieň sivej a 100% plnú farbu. A Lightness je taktiež percentuálna hodnota, 0% je tu čierna, 50% normálne a 100% je biela. POZOR! Tieto percentuálne hodnoty sa zadávajú ako 0-100%. Naopak u HSLA u alfa kanálu sa percentuálna hodnota zadáva ako desatinné číslo. Ako sme si už povedali u RGBA. Ukážeme si to rovno na príklade:

.hsla {
    color: hsla(9, 100%, 64%, 0.5);
}

Ako výsledok si uvedieme všetky štyri odseky:

Barvičky

index.html

Môžeme si všimnúť, že sme všade použili farbu Tomato iba s inými zápisy. U RGBA a HSLA sme pridali aj alfa kanál, čiže konkrétne polovičná priehľadnosť.

Teraz sa vrhneme na náš Predchystaný článok a doplníme do CSS súboru určitým elementom či triedam farbu písma a potom si všetko pre istotu vysvetlíme:

body {
    color:#111111;
}
.clanek-hlavicka p {
    color:#8c8c8c;
}
.clanek-obsah {
    color:#262626;
}
.clanek-obsah h2 {
    color:#4a4a4a;
}
.clanek-paticka a {
    color:#5c8cff;
}
.clanek-paticka a:hover {
    color:#3064e3;
}

Tagu <body> sme pridali trochu menej čiernu farbu, pretože tá úplne čierna nie je vôbec ideálne. Ďalej odseku v hlavičke článku (tu je napísaná doba čítanie článku) sme priradili šedú farbu, aby toľko nevyčnieval. Ak teda chceme priradiť vlastnosti iba odseku v určitej triede, urobíme to práve takto. Celkový text bude mať tiež menej čiernu farbu, aby toľko nerezali do očí a nadpisy u textu (<h2>) budú ešte o trochu sivé než text, aby príliš nevyčnievali. Ide nám o to, aby sa čitateľ začítal:) Na záver sme pridali ľahký odtieň modro-fialovej farby prepojeniam (<a>) a k ich pseudo-elementu: hover sme pridali trošku tmavší odtieň tejto farby. Výsledok si môžeme prezrieť nižšie:

Barvičky

index.html

Font-family

Farbu písma máme hotovú. Teraz sa pustíme do zmeny fontu textu. Vlastnosť font-family nám s tým určite pomôže. Klasická syntax je taká:

font-family: hodnota;

Ako hodnotu môžeme zadať aj niekoľko písiem. Záleží na klientskom počítači, či nimi bude disponovať. Ak písmo nebude vedieť zobraziť, použije druhé uvedené a tak ďalej. Je preto dobré na koniec dať minimálne jedno generické písmo. Písma oddeľujeme čiarkami a ak je názov písma na viac slov, vložíme ho do úvodzoviek. V prípade in-line štýlov (v HTML kóde) použijeme apostrofy.

Ďalej môžeme využiť externých fontov, napr. Fonty od Googlu a to stiahnutím konkrétneho fontu alebo nalinkováním skrze CDN. Externý fonty musia byť zakaždým v úvodzovkách. Rovno si to ukážeme aj na príklade. Nájdeme si z Google fontov písmo Ubuntu a nalinkuje ho do hlavičky nášho HTML dokumentu:

<link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">

Do hlavičky v našom HTML dokumente článku vložíme pred CSS súbor link na náš font:

<!DOCTYPE html>
<html lang="cs-cz">
<head>
    <meta charset="utf-8" />
    <title>Titulek stránky</title>
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

Teraz máme pripojený náš font a môžeme ho použiť. Presunieme sa do CSS súboru a pridáme vlastnosť font-family na tag <body>:

body {
    font-family: 'Ubuntu', sans-serif;
    color:#111111;
}

Výsledný zmenený text môžeme vidieť na našom článku:

Barvičky

index.html

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

V ďalšej lekcii, Text a písmo 2. časť , budeme pokračovať v problematike textu a písma. Budeme pracovať ďalej na našom článku za pomocou ďalších CSS vlastností.

Článok pre vás napísal Nocik

Užívateľské hodnotenie:

Ešte nikto nehodnotil, buď prvý!

...

Aktivity