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.