Skrášľovanie textu na www stránkach [5.časť]

V minulej štvrtej časti sme načali problematiku Textu v CSS a predovšetkým atribútu FONT. Dnes budeme v tomto pokračovať


Povieme si čo to o atribútoch textu, ktorými dokážeme vyčarovať krajšie kreácie ako len pomocou samotného HTML.

Kaskádové štýly nám v tomto prípade dávajú oveľa viac možností a je len vec samotného web mastra ako ich dokáže využiť a skľbiť do pôsobivej kompozície. Samozrejme že prehnané bláznovstvá s farbami a rôznymi druhmi fontu na stránke skôr odstrašujú ako pôsobia profesionálnym dojmom. Z tohto dôvodu je potrebné citlivo voliť rozloženie štýlov a ich vzájomné skĺbenie s ostatnými prvkami na stránke. Možnosti sú v tomto prípade rozmanité, veľmi používaný tento druh CSS je použitý v DHTML.

Bližšie si pozrieme na tieto atribúty textu: Najlepšie bude keď si každý atribút názorne ukážeme na príklade a podľa toho najlepšie pochopíte princíp.

text-decoration

Tento krát sa budeme venovať spôsobu kedy je CSS zadefinované priamo na stránke medzi tagmi HEAD. Pozrime sa na príklad pre text-decoration:

<html>
<body bgcolor=black text=white>
<p>Toto je klasický text
<p style="text-decoration: underline">
 Toto je podčiarknutý text
<p style="text-decoration: line-through">
 Toto je prečiarknutý text
<p style="text-decoration: blink">
 Toto je blink text
</body>
</html> 

vertical-align

V tomto prípade pôjde o vertikálne zarovnanie textu. Môžeme použiť viacero atribútov: sub, super, top, text-top, middle, bottom a text-bottom. My použijeme príklad na zarovnanie textu vzhľadom na obrázok.

<html>
<body bgcolor=black text=white>
<img src="../img2/d1.gif" style="vertical-align: middle">
 Nejaký text.
<img src="../img2/d1.gif" style="vertical-align: bottom">
 Ďalší text.
</body>
</html>

text-transform

Text-transform je atribút na transformáciu textu. Napríklad malé písmená na veľké, opačne a pod. Default nastavená hodnota text-transform je "none"a ostatné hodnoty sú: capitalize, uppercase a lowercase.

<html>
<body bgcolor=black text=white>
<p style="text-transform: uppercase">
 this is a lowercase paragraph.
<p style="text-transform: lowercase">
 THIS IS AN UPPERCASE PARAGRAPH.
</body>
</html> 

text-align

Text-align je Vám určite dobre známy, ale predsa. Jedná sa o zarovnanie textu na stránke, realizované v bloku. Východzia hodnota je "left", čiže vľavo a ostatné hodnoty sú: right, center a justify.

<html>
<body bgcolor=black text=white>
<p>Toto je klasický text.
<p style="text-align: right">Toto je text osadený do prava.
<p style="text-align: center">Toto je text osadený do stredu.
</body>
</html> 

Na budúce sa budeme venovať ďalším záludnostiam v Kaskádových štýloch. Do vtedy sa majte krásne :-)

Developer,
Stiahnuté z Developer.sk