| |
[ 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. |
|
Homepage
