Tekstivärv saab määrata kasutades värv. Oodatud on värviväärtus.
p {
color: punane;
}Värviväärtusena on võimalik kasutada värvinimesid või heksakoodi.
Teksti suuna määramine
Omistades elemendile omaduse suund on võimalik tekstit suunda määrata. Huvitav on vastupidine suund keelte puhul, kus kirjutatakse paremalt vasakule.
Lisaks saab määrata, millisele poole liigsuurused sisud ülekäigu korral maha lõigatakse.
• vasakult paremale
• paremalt vasakule
Allpool on näide, kuidas antud omadust kasutada.
.tavaline {direction:ltr;}
.tagurpidi {direction:rtl;}
Siin on defineeritud kaks klassi.
<p class="tavaline">Tekst, mis kirjutatakse vasakult paremale. 1 2 3 4 5 6 7 8 9 0</p> <p class="tagurpidi">Tekst, mis kirjutatakse paremalt vasakule. 1 2 3 4 5 6 7 8 9 0</p>
Tulemus veebilehitsejas näeb välja järgmine:
Tekstide horisontaalne joondamine
Tekstilõikude ja muude plokk-elementides sisalduvate tekstide horisontaalne joondamine määratakse omaduse teksti-joondus abil. Vaikimisi on vasakjoondus.
• vasakul
• paremal
• keskel
• õigustama
Näide:
<p style="text-align:right;">
Tere tulemast
</p>
Tulemus on järgmine:
Vertikaalne joondamine
Vertikaalteksti joondamine reavahetuse suhtes määratakse omadusega vertikaalse-joondamine. Väärtus osutab alati ülemale elemendile, mis peab olema jadakujuline element. Samuti saab joondada teksti tabelites.
Järgmised väärtused on saadaval:
• alaindeks
• üleindeks
• baasjoon
• ülevalt
• alt
• keskel
• teksti-ülevalt
• teksti-alt
• Pikkuseväärtus – positiivne või negatiivne väärtus nihutab elemendi baasjoone peale või alla.
• Protsendimäär – positiivne või negatiivne väärtus nihutab elemendi baasjoone peale või alla.
Näide:
.baasjoon {
vertical-align: baasjoon;
}
Märkige, et veebilehitsejad tõlgendavad vertikaal-joondamise väärtusi erinevalt. Enne veebisaitide avaldamist peaksite kindlasti tulemused üle kontrollima.
Tekstidekoratsioonide määramine
teksti-dekoratsioon kasutatakse tekstide või hüperlinkidele lisavate omaduste andmiseks.
• mitte midagi
• allajoonitud
• ülevalt alla
• joon all
• vilkuv
Näide:
a:link {
text-decoration: none;
}
Selle tulemusena ei ole lehe hüperlinkidel enam allajooni.
Sõnade vaheline kaugus on võimalik eraldi määrata.
<span style="word-spacing:0.5em">Tere tulemast PSD-Tutoriale.de!</span><br /> <span style="word-spacing:1em">Tere tulemast PSD-Tutoriale.de!</span>
Oodatakse numbrilist väärtust. Protsentuaalseid andmeid ei ole võimalik anda.
Sarnaselt sõna-kaugus omadusele on ka tähe-kaugus. Siiski määratakse tähe-kaugus teksti üksikute tähtede vaheline kaugus. Siin on samuti numbrilised väärtused lubatud, kuid mitte protsendimärgid.
<span style="letter-spacing:0.1em">Näidistekst koos tähemärgivahega 0.1em</span><br> <span style="letter-spacing:0.3em">Näidistekst koos tähemärgivahega 0.3em</span><br>
Omadusega teksti-muundamine saate määrata, kas tekst kirjutatakse suur- või väiketähtedega. See ei sõltu tegelikust märgendusest lähtekoodis. Lisaks saab sundida kapitälkiri.
• väiketäht
• suurtäht
• kapitälkiri
• mitte midagi
Näide:
.väike {
teksti-muundamine: väiketähed;
}Brauseris näeb tulemus välja järgmiselt:
Tühikud ja reavahetused
Omadusega white-space määratakse, kuidas brauseris kuvatakse tekstinemises olevad tühikud ja reavahetused.
• normal – lisatakse automaatne reavahetus. Lisaks liidetakse mitu tühikut kokku.
• pre – reavahetused kuvatakse täpselt samamoodi nagu tekstinemes.
• nowrap – automaatset reavahetust ei toimu.
• pre-line – mitu tühikut liidetakse kokku. Lisaks toimub reavahetus, kui kasti suurus ekraanil ei ole piisavalt suur.
• pre-wrap – toimub reavahetus, kui kasti suurus ekraanil ei ole piisavalt suur.
Siin on üks näide:
<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>Brauseris kuvatakse see välja järgmiselt:
Vea teisendamine
Omadusega text-shadow saab sundida tekstidele varju tekitama. Märgatud, et see omadus on toetatud ainult suhteliselt uuemates brauserites. Brauserid, mis ei suuda text-shadow omadust tõlgendada, kuvavad teksti ilma varjuta.text-shadow kasutatakse järgmiselt:
text-shadow: hV vV udusus #xxxxxx;
Ja väärtused tähendavad järgmist:
• hV – horisontaalne nihutamine
• vV – vertikaalne nihutamine
• udusus – hägusus
• #xxxxxx – varju värv
Alljärgnev näide näitab tüüpilist kasutamist text-shadowi jaoks.
.vari {
värv: #444;
fondi-suurus: 34px;
text-shadow: 2px 2px 3px #333;
}
Määratud klassi rakendatakse järgmiselt esimese järjekorra pealkirjale.
<h1 class="vari">PSD-Tutorials.de</h1>
Ja siinkohal veel üks pilk tulemusele:
Nagu juba mainitud, saate text-shadow probleemideta kasutada, kuna brauserite mittetõlgendamine ei oma negatiivseid tagajärgi. Tekst kuvatakse siis lihtsalt varjuta.
