Links ::  | DEV web management system | Katalóg | Webhosting | Recepty
  
 Index | Registrácia | Hľadať | Galéria | BoardNeprihlásený užívateľ  //Streda, 22. Novembra 2017 
Navigation
Index
Top 10 autorov
Top 20 článkov
Hľadať
Galéria

Zones
Asp.(NET)
C/C++
Flash
Grafika+Design
Hardware
Hry
Html/Css/Xml
Java
Linux
Networks
Operačný systém
Pascal/Delphi
PHP
Security
Software
SQL
Visual Basic
Wap/Wml
Windows
Zóna iné

Links
Script index Interval.cz Pc.sk Regedit.sk TipyaTriky.sk Builder.cz Asp.cz Živě.sk Zoznam.sk Code.box.sk Root.cz Quant&Financial

Odkazy

Sessions
Stránky Developer.sk si práve číta 412 čitateľov, z toho je 0 zaregistrovaných

BackEnd
Odkazy na nové články je možné preberať pomocou backend.php

kuk

    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:
  • 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 :-)


Autor : Developer, čítané 10569x, komentárov: 0
Hodnotenie :    |  Utorok, 13. Mája 2003

Pridať nový komentár/Komentáre
Vaše hodnotenie :   horšie  lepšie
Login
Login:
Heslo:

Hľadať
 
v článkoch
v diskusiach
v komentároch

Top read
PHP Coder

Priklady v C. 1.čast.

DEV web management system

Php a bezpečnosť skriptov

Autorun CD

Top discuss
Jednoduchý web formulár (ASP.NET)

Delphi seriál: (1.časť)

Velmi rychla grafika v Pascale

DEV web management system

Naša ikona
Páčia sa Vám naše stránky ? Ak áno, podporte nás prosím a umiestnite si na svoju stránku našu ikonku:





Copyright (c) Developer.sk, All rights reserved.
Powered by DEV web management system