CSS (2.) - formatovanie textu
Autor: Dušan Koleno | Vydaný: 14.02.2006
V druhom pokračovaní seriálu o CSS Vám predstavím formátovanie textu V CSS. Ku formátovaniu textu v CSS existuje rada príkazov, takže sa pusťme do toho.
Farba textu
Farbu textu môžeme v CSS ovplyvniť príkazom color, v ktorom bude určená farba. Farbu môžete zapisovať slovom (red,blue,green,black,white...) alebo tiež v RGB formáte (#FFFFFF).
Jednoduchý príklad ofarbenia textu v tágu <p>.
1. CSS
p {color: red;}
HTML
<p>Toto je text napísaný červenou farbou.</p>
Typ písma
Ďalším príkazom v CSS je font-family, ktorý určuje typ písma. V hodnote font-family môžeme určiť hocijaké písmo napr. Arial, Verdana, Tahoma a iné.
1. CSS
p {font-family: arial;}
2. HTML
<p>Text napísaný písmom Arial.</p>
Veľkosť písma
Veľkosť písma v CSS určujeme príkazom font-size. Môžeme tu zadávať veľkosť písma v percentách, pixeloch atď.
1. CSS
p {font-size: 15px;}
2. HTML
<p>Text s veľkosťou 15 pixelov.</p>
Sklon písma
Pre sklon písma je v CSS príkaz font-style. Font-style môže obsahovať hodnoty normal - normálne písmo, italic (tiež oblique - skoro to isté) - naklonené písmo.
1. CSS
p {font-style: italic;}
2. HTML
<p>Naklonené písmo</p>
Hrúbka písma
V CSS používame pre hrúbku písma príkaz font-weight. Môže obsahovať hodnoty normal, bold (okrem toho aj bolder,lighter a číselné hodnoty, tie sa ale skoro nepoužívajú).
1. CSS
p {font-weight: bold;}
2. HTML
<p>Hrubo zvýraznené písmo.</p>
Veľké písmená
Ak chceme v CSS mať v nejakom texte veľké písmena (kapitálky), môžeme využiť funkciu font-variant.
1. CSS
p {font-variant: small-caps;}
2. HTML
<p>Text napísaný veľkými písmenami.
</p>
Medzery medzi písmenami
CSS ako mocný nástroj dokáže zväčšíť aj medzery medzi jednotlívymi písmenami pomocou príkazu letter-spacing. Hodnota tohto príkazu sa zapisuje pomocou jednotiek veľkosti a percent (px,em,cm,%).
1. CSS
p {letter-spacing: 150%;}
2. HTML
<p>Text napísaný s väčšími medzerami.</p>
Zarovnanie textu
Pre zarovnanie textu sa v CSS využíva príkaz text-align. Môže obsahovať hodnoty left (ľavá strana), right (pravá strana), center (stred), justify (zarovnanie ku okrajom).
1. CSS
p {text-align: center;}
2. HTML
<p>Text zarovnaný na stred.</p>
Ozdobné písmo
Ak chceme písmo preškrtnúť, podčiarknúť alebo nadčiarknúť pomocou CSS môžeme použiť príkaz text-decoration. Môže obsahovať hodnoty underline (podčiarknutie), overline (nadčiarknutie), line-through (preškrtnutie).
1. CSS
p {text-decoration: line-through;}
2. HTML
<p>Preškrtnutý text.</p>
Odsadenie textu v prvom riadku odstavca
Ak chceme odsadiť text na začiatku odstavca (napr. v tágu p), použijeme príkaz text-indent. Určujeme ho vo velkostných jednotkách a v percentách.
1. CSS
p {text-indent: 25px;}
2. HTML
<p>Preškrtnutý text.</p>
Transformovanie písma
Ak chceme zmeniť písmo na samé veľké a malé písmo, môžeme v CSS použiť príkaz text-transform. Môže nadobúdať hodnoty uppercase (všetky písmená veľké), lowercase (všetky písmená malé) capitalize (začiatočné písmená veľké, kapitálky).
1. CSS
p {text-itransform: capitalize;}
2. HTML
<p>Písmena Na Začiatku Slov Sú Veľké.</p>
Medzery v texte
Pomocou CSS môžeme zmeniť veľkosti medzier v texte. Slúži na to príkaz word-spacing. Jeho hodnota sa zadáva vo veľkostných jednotkách (px, cm...).
1. CSS
p {word-spacing: 10px;}
2. HTML
<p>Medzery v texte veľke 10 pixelov.</p>
Záver
A to je už všetko, čo som chcel v tomto článku ukázať. Nabudúce to bude článok o pozadí.