Barvno pisavo lahko določite s color. Pričakuje se barvna vrednost.
p {
color: red;
}Kot vrednost lahko navedete barvne besede ali hexadecimalno barvno vrednost.
Določanje smeri pisanja
S lastnostjo direction lahko prisilite smer pisanja elementov. Zanimivo je obrnjeno pisanje v povezavi s jeziki, ki se pišejo od desne proti levi.
Poleg tega lahko določite, na kateri strani bodo preveliki vsebini obrezani z overflow.
• ltr – od leve proti desni
• rtl – od desne proti levi
Spodnji primer prikazuje, kako lahko lastnost uporabite.
.normal {direction:ltr;}
.rueckwaerts {direction:rtl;}
Definirani sta bili dve razredi.
<p class="normal">Besedilo, ki je napisano od leve proti desni. 1 2 3 4 5 6 7 8 9 0</p> <p class="rueckwaerts">Besedilo, ki je napisano od desne proti levi. 1 2 3 4 5 6 7 8 9 0</p>
Rezultat v brskalniku izgleda takole:
Horizontalna poravnava besedil
Z lastnostjo text-align določite horizontalno poravnavo odstavkov besedil in drugih pretokov besedila ali v inline elementih vsebovanih blokovskih elementih. Privzeto je levo poravnavo.
• left – leva poravnava
• right – desna poravnava
• center – sredinska poravnava
• justify – poravnava v blok razporedu
Primer:
<p style="text-align:right;">
Dobrodošli
</p>
Rezultat izgleda takole:
Vertikalna poravnava
Z lastnostjo vertical-align določite vertikalno poravnavo besedila znotraj vrstice glede na višino vrstice. Navedba se vedno nanaša na starševski element, ki mora biti inline element. Poleg tega se lahko besedilo poravna znotraj tabel.
Naslednje vrednosti so na voljo:
• sub – podpisano
• super – nadpisano
• baseline – poravnano na osnovno črto
• top – poravnava na zgornjem robu starševskega elementa
• bottom – poravnano na spodnjem robu starševskega elementa
• middle – poravnano na sredini med zgornjim in spodnjim robom starševskega elementa
• text-top – na zgornjem robu besedila
• text-bottom – na spodnjem robu besedila
• Navedba dolžine – pozitivna ali negativna vrednost premakne element nad ali pod osnovno črto.
• Navedba v odstotkih – pozitivna ali negativna vrednost premakne element nad ali pod osnovno črto.
Primer:
.baseline {
vertical-align: baseline;
}
Bodite pozorni, da se vrednosti vertical-align v različnih brskalnikih neenakomerno tolmačijo. Rezultate definitivno preverite, preden spletne strani objavite.
Določanje dekoracije besedila
text-decoration se uporablja za dodeljevanje dodatnih lastnosti besedilom ali hiperpovezavam.
• none – nobene dekoracije besedila
• underline – podčrtano
• overline – nadčrtano
• line-through – prečrtano
• blink – utripajoče
Primer:
a:link {
text-decoration: none;
}
Tako hiperpovezave na strani ne bodo več opremljene s podčrtajem.
Razmik med posameznimi besedami lahko prav tako določite eksplicitno.
<span style="word-spacing:0.5em">Dobrodošli na PSD-Tutorials.de!</span><br /> <span style="word-spacing:1em">Dobrodošli na PSD-Tutorials.de!</span>
Pričakuje se numerična vrednost. Odstotkovne navedbe niso mogoče.
Podobno kot za word-spacing je tudi letter-spacing. Vendar z letter-spacing določite razmik med posameznimi črkami besedila. Tudi tukaj so dovoljene numerične vrednosti, vendar ne odstotkovne navedbe.
<span style="letter-spacing:0.1em">Primer besedila z razmikom črk 0.1em</span><br> <span style="letter-spacing:0.3em">Primer besedila z razmikom črk 0.3em</span><br>
Z lastnostjo text-transform lahko določite, ali je besedilo napisano z velikimi ali malimi črkami. In to neodvisno od dejanske zapisave v izvornem besedilu. Dodatno lahko prisilite kapitale.
• lowercase – male črke
• uppercase – velike črke
• capitalize – začetnice besed kot velike črke
• none – nobena transformacija besedila
Primer:
.majhen {
text-transform: lowercase;
}V brskalniku je rezultat prikazan takole:
Presledki in prelomi vrstic
Z lastnostjo white-space določamo, kako bodo v brskalniku prikazani obstoječi presledki in prelomi vrstic v izvornem besedilu.
• normal – avtomatsko se vstavi prelom vrstice. Poleg tega se več presledkov združi v enega sam.
• pre – prelomi vrstic so prikazani enako kot v izvornem besedilu.
• nowrap – avtomatskega preloma vrstice ni.
• pre-line – več presledkov se združi v enega sam. Dodatno prelomi vrstica, če polje prikaza ni dovolj veliko.
• pre-wrap – prelomi vrstica, če polje prikaza ni dovolj veliko.
Tudi za to imamo primer:
<pre class="brush:xml;"><!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body>p {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
body p {
color:#0066FF;
}
</style>
</head>
<body>
<p>Absatz 1</p>
<p>Absatz 2</p>
<p>Absatz 3</p>
<div>
<p>Absatz 4</p>
</div>
</body>
</html></pre>V brskalniku je prikazano takole:
Ustvarjanje sence
Z lastnostjo text-shadow lahko prisilimo senco za besedila. Upoštevajte, da je ta lastnost podprta le v sorazmerno novih brskalnikih. Brskalniki, ki ne znajo tolmačiti text-shadow, prikazujejo besedilo brez sence.text-shadow se uporablja na naslednji način:
text-shadow: hV vV blur #xxxxxx;
In to pomenijo vrednosti:
• hV – Horizontalno premikanje
• vV – Vertikalno premikanje
• blur – Zamegljenost
• #xxxxxx – Barva sence
Sledi primer tipične uporabe za text-shadow.
.senca {
color: #444;
font-size: 34px;
text-shadow: 2px 2px 3px #333;
}
Definirani razred se uporabi na naslednjem naslovu prve stopnje.
<h1 class="senca">PSD-Tutorials.de</h1>
In tudi tukaj je pogled na rezultat:
Kot že opisano, lahko text-shadow brez težav uporabljate, saj pomanjkanje interpretacije s strani brskalnikov nima negativnih posledic. Besedilo se bo enostavno prikazalo brez sence.
