MS Office week
Pouze tento týden sleva až 80 % na e-learning týkající se MS Office
50 % bodů zdarma na online výuku díky naší Slevové akci!

Lekce 4 - Text a písmo 1. část

V minulé lekci, Jednotky (em, rem, px, ...), jsme se uvedli do problematiky délkových jednotek v CSS3. Ukázali jsme si různé druhy jednotek a kdy je použít.

V této lekci si ukážeme vlastnosti, které se používají pro úpravu textu. Tyto vlastnosti budeme aplikovat na předem nachystaný text, aby bylo možné vidět výsledky v co nejlepším světle. Textových vlastností je mnoho, tudíž si nejdříve probereme ty, se kterými se setkáme nejčastěji. Další vlastnosti si probereme tak, ať alespoň víme, že existují. Naším cílem v této lekci bude vytvoření ukázkového stylu článku, který se bude líbit nám i návštěvníkům. Chceme přece, aby se text dal pohodlně přečíst a návštěvníci se na náš web rádi vraceli:

Budoucí výsledek

Budoucí výsledek.

Vytvoření základu

Pro začátek si vytvoříme HTML soubor a nalinkujeme si k němu CSS soubor, jak jsme se naučili v dřívějších lekcích:

Poté budeme pokračovat nachystáním si struktury článku včetně obsahu, kde použijeme velmi známý Lorem ipsum generátor. Lorem ipsum je generátor náhodných latinských slov, který je využíván v grafickém návrhu pro naplnění textu.

Struktura článku se bude skládat z obalu, ve kterém budou 3 části: hlavička, obsah a patička. Všechny tyto části budou v blokových značkách <div>, kterým přiřadíme konkrétní třídy. V hlavičce bude nadpis první úrovně (tag <h1>) a doba čtení článku jako odstavec (tag <p>). V obsahu budou odstavce s nadpisy druhé úrovně (tag <h2>). A v poslední řadě bude patička, ve které se budou nacházet odkazy v tagu <a>, které budou simulovat kategorie článků.

Struktura celého HTML dokumentu bude vypadat následovně:

<!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šimnout pojmenování tříd, které jasně specifikuje danou oblast svým názvem. Je tak na první pohled jasné, že vše náleží článku. Ještě přibyl v prvním odstavci HTML tag <strong>, který se používá pro zvýraznění textu a zvýšení priority označených klíčových slov. Tento text je ve výchozím stylu zvýrazněn tučně, aniž bychom nějaký styl přidávali.

CSS

Nyní se vrhneme na stylování. Pokaždé si probereme určitou vlastnost se všemi jejími variantami, ukážeme si některé varianty i na ukázce a poté je aplikujeme na náš článek.

Color

Začneme vlastností color, kterou nastavíme barvu písma v HTML elementu. Syntaxe vlastnosti je následující:

color: hodnota;

Hodnotu barvy můžeme zadat několika způsoby:

  • předdefinovanou hodnotou,
  • RGB,
  • HEX a
  • HSL.

Předdefinovaná hodnota

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Tato hodnota se zadává slovně. HTML podporuje 140 názvů barev. Jako příklad si můžeme uvést barvy: Orange, Gray, Black, ale třeba také DodgerBlue, MediumSeaGreen a různé další. Kompletní seznam si můžete lehce najít na internetu. Použití barvy Tomato je přímočaré:

.definovana-barva {
    color: Tomato;
}

Výsledek si ihned ukážeme:

Definovaná barva
index.html

RGB, RGBA

Hodnota v RGB formátu reprezentuje kombinaci barev Red (červená), Green (zelená), Blue (modrá). Hodnoty jsou v rozmezí 0-255, kdy největší číslo je největší "množství" barvy. U RGBA je to stejné, pouze zde přibyla jedna vychytávka a tou je alfa kanál, který znázorňuje průhlednost barvy. Alfa kanál se od zbytku liší typem své hodnoty, průhlednost je totiž definovaná jako "procento", tudíž hodnoty jsou zde od 0 do 1 (0 = 0 % (průhledný) a 1 = 100 % (neprůhledný)). Poloviční průhlednost tedy nastavíme hodnotou 0.5. Syntaxe RGBA zápisu je následující:

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

Ukážeme si to zase na malém příkladu:

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

Výsledek:

RGBA
index.html

HEX

Hexadecimální zápis hodnoty u vlastnosti color je v podobném duchu jako RGB. Před hodnotou je znak hashtagu a dále následuje hodnota: #rrggbb, rr jako červená, gg jako zelená a bb jako modrá. Syntaxe je následující: color: #rrggbb;. Hodnoty jsou v rozmezí 00-ff (klasická šestnáctková soustava.) Za zmínku k zapamatování určitě stojí zobrazení bílé #ffffff a zobrazení černé #000000. Lidé jsou ale líní, tak se nám to trochu zkrátí. Když máme stejné hodnoty, tak stačí vypsat pouze 3 znaky (od každé barvy jeden) a CSS si s tím už poradí. Černou bychom teda mohli zapsat jako #fff. A určitě nás ani nemine jeden příklad:

.hex {
    color: #ff6347;
}
RGBA
index.html

HSL, HSLA

HSL zápis reprezentuje Hue (odstín), Saturation (sytost), Lightness (svítivost). Syntaxe HSL formátu je následující: hsl(hue, saturation, lightness);. Hue nabývá hodnot 0-360 z kruhu (0 je červená, 120 je zelená a 240 je modrá). Saturation je procentuální hodnota, kde 0% reprezentuje odstín šedé a 100% plnou barvu. A Lightness je taktéž procentuální hodnota, 0 % je zde černá, 50 % normální a 100 % je bílá. POZOR! Tyto procentuální hodnoty se zadávají jako 0-100%. Naopak u HSLA u alfa kanálu se procentuální hodnota zadává jako desetinné číslo. Jak jsme si již řekli u RGBA. Ukážeme si to rovnou na příkladu:

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

Jako výsledek si uvedeme všechny čtyři odstavce:

Barvičky
index.html

Můžeme si všimnout, že jsme všude použili barvu Tomato pouze s jinými zápisy. U RGBA a HSLA jsme přidali i alfa kanál, neboli konkrétně poloviční průhlednost.

Nyní se vrhneme na náš předchystaný článek a doplníme do CSS souboru určitým elementům či třídám barvu písma a poté si vše pro jistotu vysvětlí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> jsme přidali trochu méně černou barvu, jelikož ta úplně černá není vůbec ideální. Dále odstavci v hlavičce článku (zde je napsaná doba čtení článku) jsme přiřadili šedou barvu, aby tolik nevyčníval. Pokud tedy chceme přiřadit vlastnosti pouze odstavci v určité třídě, uděláme to právě takto. Celkový text bude mít také méně černou barvu, aby tolik neřezal do očí a nadpisy u textu (<h2>) budou ještě o trochu šedé než text, aby příliš nevyčnívaly. Jde nám o to, aby se čtenář začetl :) Na závěr jsme přidali lehký odstín modro-fialové barvy odkazům (<a>) a k jejich pseudo-elementu :hover jsme přidali trošku tmavší odstín této barvy. Výsledek si můžeme prohlédnout níže:

Barvičky
index.html

Font-family

Barvu písma máme hotovou. Nyní se pustíme do změny fontu textu. Vlastnost font-family nám s tím určitě pomůže. Klasická syntaxe je taková:

font-family: hodnota;

Jako hodnotu můžeme zadat i několik písem. Záleží na klientském počítači, jestli jimi bude disponovat. Pokud písmo nebude umět zobrazit, použije druhé uvedené a tak dále. Je proto dobré na konec dát minimálně jedno generické písmo. Písma oddělujeme čárkami a pokud je název písma na více slov, vložíme ho do uvozovek. V případě in-line stylů (v HTML kódu) použijeme apostrofy.

Dále můžeme využít externích fontů, např. fonty od Googlu a to stáhnutím konkrétního fontu nebo nalinkováním skrze CDN. Externí fonty musí být pokaždé v uvozovkách. Rovnou si to ukážeme i na příkladu. Najdeme si z Google fontů písmo Ubuntu a nalinkujeme jej do hlavičky našeho HTML dokumentu:

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

Do hlavičky v našem HTML dokumentu článku vložíme před CSS soubor 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,[email protected],400;0,700;1,400&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

Nyní máme připojený náš font a můžeme jej použít. Přesuneme se do CSS souboru a přidáme vlastnost font-family na tag <body>:

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

Výsledný změněný text můžeme vidět na našem článku:

Barvičky
index.html

Pro dnešní lekci to bylo vše :)

V další lekci, Text a písmo 2. část, budeme pokračovat v problematice textu a písma. Budeme pracovat dále na našem článku za pomocí dalších CSS vlastností.


 

Předchozí článek
Jednotky (em, rem, px, ...)
Všechny články v sekci
CSS3
Článek pro vás napsal Nocik
Avatar
Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!
Aktivity (4)

 

 

Komentáře

Avatar
ml_software
Člen
Avatar
ml_software:26. srpna 11:13

Ahoj, měl bych 2 dotazy či připomínky:

Zaznělo někde, kdy je výhodnější použít HEX(RGB) vs. HSL?

U font-family - zmiňuješ možnost stažení fontů z Google fonts. Mám zkušenost, že tahání fontů z Google je jedno z úzkých míst při načítání webu a údajně se vyplatí mít spíše fonty stažené a nahrané fyzicky na webu.

S tím souvisí i třetí dotaz - jak to je s linkováním fyzicky uložených fontů, které mám fyzicky nahrané na webu a jak je to s kompatibilitou jednotlivých prohlížeců a formátů fontů?

 
Odpovědět
26. srpna 11:13
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 1 zpráv z 1.