CSS - Vlastnosti textu

Do tejto kategórie patria pomerne zaujímavé vlastnosti, ktoré vám umožnia napr. nastaviť medzery medzi slovami alebo meniť veľkosť písmen.

Medzery medzi slovami

Hodnotou je dĺžka udávajúca zväčšenie oproti bežnej medzere. Ak je hodnota záporná, medzery medzi slovami sa zmenšia o danú dĺžku.

.velke_medzery {word-spacing: 3em}
.mensie_medzery {word-spacing: -10px}

Medzery medzi písmenami

Táto vlastnosť sa podobá na word-spacing, ale udáva zväčšenie medzier medzi písmenami (pri kladných hodnotách) alebo ich zmenšenie (pri zápornej hodnote).

p {letter-spacing: 10px}
div {letter-spacing: -0.5ex}

Ozdoba písma

Sú tu možnosti, ktoré by sme nemali používať príliš často, ale sem-tam sa hodia. Hodnota vlastnosti je prednastavená na none (žiadna ozdoba). Možnou hodnotou je tiež jedno alebo viac z týchto slov: underline (podčiarknuté), overline (čiara nad písmom), line-through (preškrtnuté) a blink (blikajúce).

.s {text-decoration: underline overline}
#blikajuce {text-decoration: blink}

Takto vyzerajú jednotlivé efekty:

Blikajúce písmo v IE nefunguje, v ostatných prehliadačoch ho zas neradím používať.

Zvislé zarovnanie

Vertikálne zarovnanie môže mať hodnoty: baseline (na riadok), sub (dolný index), super (horný index), top (hore), text-top (k hornému okraju), middle (na stred), bottom (dole), text-bottom (k dolnému okraju) alebo percentuálnu hodnotu.

strong {vertical-align: bottom}
span {vertical-align: 10%}

Zmena veľkosti písmen

Nastavením tejto vlastnosti na capitalize sa stanú prvé písmená slov veľkými, uppercase zmení všetky písmená na veľké a lowercase na malé. Hodnota none zachová pôvodnú veľkosť.

.prve_velke {text-transform: capitalize}
.velke {text-transform: uppercase}
.male {text-transform: lowercase}

Zarovnanie textu

Bežne používaná vlastnosť, ktorá zarovná text doľava - hodnota left, doprava - right, do stredu - center alebo do bloku - justify. Do bloku je zarovnaný napríklad aj tento text, ktorý práve čítate.

p.prave {text-align: right}

Odstavcová odrážka

Týmto sa myslí veľkosť prázdneho miesta vľavo v prvom riadku odstavca. Hodnotou je dĺžka alebo percento.

p {text-indent: 30px}

Toto je nejaký bežný odstavec, ktorý má veľkosť odstavcovej odrážky nastavenú pomocou CSS na hodnotu 20 pixlov. Táto vlastnosť je pomerne často používaná napríklad v dlhších textoch deliacich sa na viacero odstavcov.

Výška riadku

Hodnotou sa môže stať slovo normal (bežná výška), číslo (bez jednotky, udáva násobok výšky písma), konkrétna dĺžka alebo percento. Táto vlastnosť ovplyvňuje veľkosť medzery medzi riadkami.

.vysoke {line-height: 25px}

Tento odstavec ukazuje, čo sa stane, ak pomocou jazyka CSS zvolíte výšku riadku rovnú dvadsiatim piatim pixlom. Musí byť, samozrejme, dosť dlhý, aby ste jasne videli výsledok práce - veľké medzery medzi riadkami.