| |
[ 16. February 2000]
- Martin_Nemecek
Skrášľovanie textu na www stránkach [5.časť seriálu o CSS]
V minulej štvrtej časti nášho seriálu o CSS 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:
text-decoration
vertical-align
text-transform
text-indent
line-height
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 :-)
|
|
| |
|
"Skrášľovanie textu na www stránkach [5.časť seriálu o CSS]" | Login / vytvor konto | 0 Komentárov |
|
Za obsah komentárov je zodpovedný užívateľ, nie prevádzkovateľ týchto stránok. |
|