CSS tekst atributi
Ajde prvo da damo sve atributa sa njihovim vrednostima pa da ih objasnimo zatim i primerima.
- direction - Definiše smer pisanja teksta. Vrednosti su: ltr - sa leva na desno, što je i po defaultu; rtl - sa desna na levo. Ovaj atribut je iz CSS 2 specifikacije.
- line-height - Definiše udaljenost izmedju redova pisanja. Vrednosti mogu biti:
- normal - Rastojanje po defaultu,
- broj - bilo koji celi broj koji definiše rastojanje tako što je ono jednako proizvodu tog broja i trenutne razdaljine izmedju redova pisanja,
- rastojanje u px, pt, cm i ostalim CSS jedinicama - Rastojanje izmedju redova pisanja se definiše fiksno u datim jedinicama,
- rastojanje u % - Rastojanje se odredjuje procentualno u odnosu na veličinu slova.
- letter-spacing - Definiše razmak izmedju znakova u tekstu. Veličina može biti: normal - koja je po defaultu i; razmak u px (pikselima) ili u drugim CSS jedinicama mere. Negativne vrednosti su dozvoljene.
- word-spacing - Definiše dužinu razmaka izmedju reči u rečenicama. Vrednost može biti u pikselima ali i ostalim CSS jedinicama mere; normal - onako kako je po defaultu.
- text-align - Rasporedjuje tekst u prostoru po horizontali. Vrednosti su:
- left - pomera tekst uz levu ivicu prostora,
- right - uz desnu ivicu,
- center - postavlja tekst u centralnom delu prostora u datoj horizontali,
- justify - poravnava tekst sa svih strana da izgleda kao neki novinarski članak (svi redovi su iste dužine).
- vertical-align - Rasporedjuje tekst u odnosu na objekat. Vrednosti su:
- dužina u CSS jedinicama za dužinu. Podiže ili spušta za odredjen broj recimo piksela. I negativne vrednosti su dozvoljene.
- % - Podiže ili spušta tekst u odnosu na gornju ivicu objekta za vrednost koja je jednaka procentualnom u odnosu na veličinu objkta po vertikali. Moguća je i negativna vrednost.
- baseline
- sub
- super
- top
- text-top
- middle
- bottom
- text-bottom
- text-decoration - Vrši dekoraciju teksta. Vrednosti su:
- none - bez dekoracije što je i po defaultu,
- underline - podvlači tekst (iscrtava liniju ispod teksta),
- overline - nadvlači tekst (crta liniju iznad teksta),
- line-through - precrtava tekst (crta liniju po sredini teksta),
- blink - definiše trepćući tekst (naizmenično se tekst gubi i pojavljuje ali nije podržano od svih brauzera).
- text-indent - Uvlači tekst u prvom redu deksta. Vrednosti: rastojanje u px, pt, cm i ostalim CSS jedinicama; rastojanje u % u odnosu na širinu prostora u kome se ispisuje tekst.
- text-shadow - Omogućava stvaranje tekstualne senke, to jest kopira tekst i izvlači malo naviše ili naniže i pri tome je tekst malo zamagljen. Na žalost za sada ovaj atribut ne podržava explorer. Vrednosti su: none- kada nema senke a to je po defaultu, kad ima vrednost onda ima4 nazovimo podvrednosti koje idu uvek zajedno i definišu vrednost. Podvrednosti su:
- boja senke koja može biti zapisana kao reč, heksadecimalno ili decimalno;
- dužina pomeraja po horizontali u CSS jedinicama dužine (na primer 20px znači desno od početka teksta a ako pišemo -20px onda ispred početka teksta kome se pravi senka);
- dužina pomeraja senke po vertikali u odnosu na tekst u jedinicama dužine (na primer ako je 20px onda ide ispod teksta za 20 piksela a ako je -20px onda iznad teksta);
- broj u CSS jedinicama dužine. Ako je nula onda nema zamagljivanja. Na primer po mom ukusu je 12px lepo zamagljivanje. Zamagliti tekst na primer 2px znači toliko tekst razvući uzrokujući blur efekt. Nemojte postaviti ovu vrednost preveliku jer shadow tekst brzo postaje nečitak.
- text-transform - Definiše da li su mala slova u tekstu ili velika. Vrednosti su:
- none - postavlja slova po defaultu;
- capitalize - transformiše prvi znak svake rečenice u veliko slovo;
- uppercase - transformiše sva slova u tekstu u velika slova;
- lowercase - transformiše sva slova u tekstu u mala slova.
- white-space - Definiše prikaz otkucanog teksta u HTML kodu. Vrednosti su:
- normal - onako kao što je i bez tog atributa, znači po defaultu;
- pre - onako kako otkucamo tekst u kodu tako će biti i prikazan. Znači gde god kliknemo na enter tu se prikazuje <br>;
- nowrap - koliko god dug tekst kucali u kodu brauzer će ga prikazati baš te dužine i neće ga seći kad tekst naidje na kraju ekrana brauzera. Znači u nov red se prelazi tek kad se i naidje na novi pasus ili na <br>.
Ajde da vidimo kroz primer interesantnije atribute i koji su možda manje jasni, i neke njihove zanimljive vrednosti:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<style type="text/css">
.a {direction: rtl;}
.b {line-height: 3mm;}
.c {letter-spacing: 2px;}
.d {word-spacing: 10px;}
.e {text-align: center;}
.f {text-decoration: overline;}
.g {text-shadow: blue 10px -10px 2px;}
</style></head><body>
<div>Direction definiše smer pisanja teksta. Vrednost su ltr i rtl.</div>
<div class=a>Direction definiše smer pisanja teksta. Vrednost su ltr i
rtl.</div><br>
<div class=b>line-height-Definiše udaljenost izmedju redova pisanja. line-height
- Definiše udaljenost izmedju redova pisanja.</div><br>
<div class=c>Letter-spacing-definiše razmak izmedju znakova u tekstu</div><br>
<div class=d>word-spacing-Definiše dužinu razmaka izmedju reči u
rečenicama</div><br>
<div class=e>text-align - Rasporedjuje tekst u prostoru po horizontali</div><br>
<div class=f>text-decoration - Vrši dekoraciju teksta</div><br>
<div class=g>text-shadow - Omogućava stvaranje tekstualne senke</div><br>
</body></html>
|
Direction definiše smer pisanja teksta. Vrednost su ltr i rtl.
Direction definiše smer pisanja teksta. Vrednost su ltr i rtl.
line-height-Definiše udaljenost izmedju redova pisanja. line-height
- Definiše udaljenost izmedju redova pisanja.
Letter-spacing-definiše razmak izmedju znakova u tekstu
word-spacing-Definiše dužinu razmaka izmedju reči u rečenicama
text-align - Rasporedjuje tekst u prostoru po horizontali
text-decoration - Vrši dekoraciju teksta
text-shadow - Omogućava stvaranje tekstualne senke
|
|
