CSS Tutoriál VI. – Úprava textu

V šestém díle našeho tutoriálu se podíváme na další praktické uplatnění všech teoretických znalostí CSS o kterých jsme si říkali v prvních dílech. Tentokrát se zaměříme na vlastnosti, které použijeme při úpravě textu.

S textem se v CSS dá vyhrát skoro nejvíc, můžeme nastavit téměř všechno, od fontu po přeskrtnutí, podtržení, a tak dále. Začněme ale postupně.

Nejzákladnější je asi nastavení barvy textu. To můžeme nastavit pomocí vlastnosti color. Pozor, nepleťte si color s background-color. Background-color nastavuje pouze barvu celého divu nebo pozadí obecně. Color je však pouze barva textu. Jak už nejspíš víte, barva se dá zapisovat různými způsoby – buďto jako hexadecimální hodnota (#ff0030), nebo jako hodnota rgb (250,250,250) nebo jako prostý název barev, těch je však jenom málo (green). Já osobně mám nejradši zapisování pomocí hexadecimálních hodnot, zejména kvůli široké paletě, ale pokud si vystačíte s jednoduchými názvy, je to vaše volba. Zápis barvy textu může vypadat takto:

p {
color: #000000;
}

Dále by nás mohl z hlediska vzhledu zajímat font. Základním nastavením je vlastnost font-family. Tato vlastnost určuje typ fontu, který použijeme na stránce. Můžme napsat více hodnot fontů, ten první je vždy ten, který preferujeme nejvíce. Pokud prohlížeč z nějakého důvodu, ale nepodporuje zrovna ten, který jsme si vybrali, použije druhý preferovaný a tak dále. Dávejte si pozor na to, že pokud jméno fontu obsahuje mezeru, musí být uzavřeno v úvozovkách.

font-family: „Times New Roman“, sans-serif, verdana;

Další můžeme nastavit velikost textu font-size. Tato vlastnost nabývá číselných hodnot, nejčastěji nastavujeme s hodnotou px. Můžeme také použít hodnoty small, large, medium a podobně, případně smaller nebo larger – text je poté menší nebo větší než rodičovský element.

Kurzivu můžeme nastavit pomocí font-style: italic.

Font-variant nám nabízí možnost napsat text v malých kapitálkách. Text je celý v kapitálkách, ale vypadá menší než normální font. Syntax je: font-variant: small-caps

Font-weight nám umožňuje nastavit „váhu“ písmen. Prostě nastavujeme, jestli chceme text tučně. Běžně nabývá hodnot : bold, bolder (než parent element) a lighter (než parent element).

@font-face nám umožňuje přidat si nový font a neomezovat se pouze na výběr webových fontů. Jeho hodnoty jsou font-family – jméno našeho fontu, dále přidáme zdrojovou oblast ve které je font uložen – pomocí src: url(‚cesta k fontu‘)

Font je vlastností, která má mnoho pod-vlastností. Podobně jako u marginu, můžeme zapisovat font-family, font-size, font-variant, font-weight… a nebo můžeme všechno zapsat pod vlastnost font. Platí, že pořadí je (bez čárek! ):

font: font-style, font-variant, font-weight, font-size/line-height, font-family (line-height = řádkování)

Zarovnání textu řešíme vlastností text-align. Doleva = text-align: left; doprava= text-align: right; střed = text-align: center; do bloku = text-align: justify

Dekorace textu : Podtrhnutí = text-decoration: underline; přeškrtnutí = text-decoration: line-through

Odsazení textu: text-indent. Např. text-indent: 10px

Jako jedno z posledních si můžeme nastavit mezery mezi písmeny jednoduchou vlastností letter-spacing. Může mít i záporné hodnoty, to se pak písmena srazí do sebe. Podobně můžeme určit i mezeru mezi písmeny a to vlastností word-spacing. Existuje ještě spousta speciálních vlastností, tyto jsou však nejvíc používané a základní.