Hlavná stránka · Diskusné Fórum · Pracovné príležitosti · Zoznam

 Main Menu
o Hlavná stránka
o Zoznam tém
o Zoznam
o Odporučte nás
o Užívatelia
o Vaše konto
o Pridaj článok
o Štatistiky
o Top 10

 Reklama


 Developer Zone's
o Internet
o Tools
o Linux
o CGI Zone
o ASP Zone
o ASP.net
o PHP Zone
o CSS Zone
o JavaScript
o MySQL
o WAP / WML
o WML / WMLScript
o XML / XHTML
o Tipy a triky
o Best of web
o WebServers
o WebDesign
o Grafika

 Servis
o Vyhľadávanie
o Fórum
o Workoffice
o Zoznam článkov
o Reklama
o Pridaj článok
o Pridaj novinku

Napíšte nám
Homepage Do favoritov

 LinkExpres
Interval.cz · Pc.sk
Builder.cz · Mobilmania
PCSvet.cz · Asp.cz
Webdnes · Živě.sk
Zoznam.sk · Atlas.sk
Inzine.sk · PHP.sk
Agent.sk · Lupa.cz
Code.box.sk · Root.cz
Pixel32 · Grafika.cz

 forum.developer.sk
o Fórum ::
o Markup languages
o Scriptové jazyky
o CGI
o PHP/MySQL
o Perl
o Grafika
o Webservery
o HTML Editory
o Browsery
o Bookmarx
o ASP
o Vytvor tému ::

 Pracovné príležitosti
o Ponúkate prácu?
o Hľadáte prácu?

 Autori developer.sk
o Martin Nemeček
o Sväťo Straka
o Jany Masaryk
o Jozef Murín

 
CSS [ 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 :-)

 
 Príslušné odkazy k téme
Viac o téme: CSS | Iné články od: Admin | Pošli komentár | Stránka vhodná na tlač width=15 height=11  Pošli tento článok priateľovi, známemu width=15 height=11


Najčítanejšie články CSS:
CSS - Cascading Style Sheets [úvod do problematiky]

Ďalšie články v rubrike CSS:

 

"Skrášľovanie textu na www stránkach [5.časť seriálu o CSS]" | Login / vytvor konto | 0 Komentárov
Prah
Za obsah komentárov je zodpovedný užívateľ, nie prevádzkovateľ týchto stránok.



Autorské práva:   ©1999 - 2001 Developer Zone [developer@developer.sk]

Všetky články sú vlastníctvom autorov Developer Zone. Všetky práva vyhradené. Stránky Developer.sk sú vytvorené pomocou PHP-Nuke.
Odkazy na nové články je možné preberať pomocou:Backend.php.