A szövegszín beállítható a color tulajdonsággal. Egy színértéket vár.
p {
color: red;
}Az érték lehet színnevek vagy hexadecimális színkód.
Az írási irány beállítása
A direction tulajdonsággal lehet erőltetni az írás irányát az elemeken. Érdekes lehet az ellenkező irányú írás a jobbról balra író nyelvek esetében is.
Ezen kívül beállítható vele, hogy az elem melyik oldalának a túlméretezett tartalmat levágja el a túlcsorduló tartalom.
• ltr – balról jobbra
• rtl – jobbról balra
A következő példa bemutatja, hogyan lehet használni ezt a tulajdonságot.
.normal {direction:ltr;}
.rueckwaerts {direction:rtl;}
Két osztály lett definiálva itt.
<p class="normal">Szöveg, amely balról jobbra íródnak. 1 2 3 4 5 6 7 8 9 0</p> <p class="rueckwaerts">Szöveg, amely jobbról balra íródnak. 1 2 3 4 5 6 7 8 9 0</p>
Az eredmény a böngészőben így néz ki:
A szövegek vízszintes igazítása
A text-align tulajdonsággal lehet beállítani a szövegtartalmak horizontális igazítását a blokkszintű elemekben lévő szövegparagrafusok vagy inline elemek esetében. Az alapértelmezett beállítás a balra igazítás.
• left – balra igazítás
• right – jobbra igazítás
• center – középre igazítás
• justify – blokkra igazítás
Egy példa:
<p style="text-align:right;">
Szívélyes üdvözlet
</p>
Így néz ki az eredmény:
Az vertikális igazítás
A vertical-align tulajdonsággal lehet megadni a szöveg vertikális igazítását egy soron belül a sor magasságához képest. A megadás mindig az Inline elemre vonatkozik, amelyet közvetlenül tartalmazó Elternelem. Emellett a szöveget lehet igazítani táblázatokban is.
A következő értékek érhetőek el:
• sub – alsó index
• super – felső index
• baseline – a kezdeti vonalhoz igazítva
• top – az Elternelem felső szélénél igazítva
• bottom – az Elternelem alsó szélénél igazítva
• middle – középen az Elternelem felső és alsó széle között
• text-top – a szöveg felső marginnál
• text-bottom – a szöveg alsó marginnál
• Hosszmegadás – a pozitív vagy negatív érték az elemet a kezdeti vonal fölé vagy alá helyezi.
• Százalékos megadás – a pozitív vagy negatív érték az elemet a kezdeti vonal fölé vagy alá helyezi.
Példa:
.baseline {
vertical-align: baseline;
}
Figyelembe kell venni, hogy a vertical-align értékeket a különböző böngészők sajnos nagyon egyenlőtlenül értelmezik. Mindenképpen célszerű előzetesen tesztelni az eredményeket, mielőtt a weboldalakat közzéteszed.
A szöveg dekorációjának meghatározása
A text-decoration használható szövegek vagy hivatkozásokhoz további tulajdonságok hozzárendelésére.
• none – nincs szövegdekoráció
• underline – aláhúzott
• overline – felső vonalas
• line-through – áthúzott
• blink – villogó
Szintén egy példa hozzá:
a:link {
text-decoration: none;
}
Ezáltal az oldal hivatkozásai már nem lesznek aláhúzva.
Az egyes szavak közötti távolságot is kifejezetten lehet meghatározni.
<span style="word-spacing:0.5em">Üdvözöljük a PSD-Tutorials.de weboldalon!</span><br /> <span style="word-spacing:1em">Üdvözöljük a PSD-Tutorials.de weboldalon!</span>
Egy numerikus értéket vár. Százalékosan kifejezett értékek nem lehetségesek.
Hasonló a helyzet a word-spacing egyszerűen letter-spacing tulajdonsággal. Azonban a letter-spacing tulajdonsággal a beállítványa a szöveg karakterei közötti távolságot. Szintén numerikus értékek elfogadottak, százalékos értékek azonban nem.
<span style="letter-spacing:0.1em">Példa szöveg karakterközi távolsággal: 0.1em</span><br> <span style="letter-spacing:0.3em">Példa szöveg karakterközi távolsággal: 0.3em</span><br>
A text-transform tulajdonsággal meg lehet határozni, hogy a szöveg nagy- vagy kisbetűs legyen. Ez független a forrás szöveges jelölésétől. Emellett lehet kis nagy kevert betűs írást is kérni.
• lowercase – kisbetűs
• uppercase – nagybetűs
• capitalize – a szavak kezdőbetűi nagybetűk
• none – nincs szöveg transzformáció
Példa:
.klein {
text-transform: kisbetűs;
}A böngészőben az eredmény így néz ki:
Szóközök és sortörések
A white-space tulajdonsággal határozhatjuk meg, hogy a forrásszövegben lévő szóközök és sortörések hogyan jelenjenek meg a böngészőben.
• normal – automatikus sortörés kerül beillesztésre. Emellett több szóközt egybevon.
• pre – a sortöréseket úgy jeleníti meg, ahogy a forrásszövegben vannak.
• nowrap – nincs automatikus sortörés.
• pre-line – több szóközt egybevon. Emellett történik sortörés, ha a megjelenítéshez szánt doboz nem elég nagy.
• pre-wrap – sortörés történik, ha a megjelenítéshez szánt doboz nem elég nagy.
Példa erre:
<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>A böngészőben így néz ki:
Árnyékolás kivitelezése
A text-shadow tulajdonsággal beállíthatjuk a szövegek árnyékolását. Figyelembe véve, hogy ez a tulajdonság csak viszonylag modern böngészőkben támogatott. Azok a böngészők, amelyek nem tudják értelmezni a text-shadow-t, az írást árnyék nélkül jelenítik meg.
A text-shadow így használható:
text-shadow: hV vV elmosás #xxxxxx;
Az értékek jelentése:
• hV – Vízszintes eltolás
• vV – Függőleges eltolás
• elmosás – Elhomályosodás
• #xxxxxx – Az árnyékszín
A következő példa mutat egy tipikus alkalmazást a text-shadow-re.
.schatten {
color: #444;
font-size: 34px;
text-shadow: 2px 2px 3px #333;
}
A meghatározott osztályt ezután alkalmazzuk az első szintű fejlécen.
<h1 class="schatten">PSD-Tutorials.de</h1>
És itt is egy pillantás az eredményre:
Mint korábban említettük, a text-shadow-t bátran használhatjátok, mivel a böngészők nem értelmezése nem jár negatív hatással. Az írás egyszerűen árnyék nélkül jelenik meg.
