Farba textu je možné nastaviť pomocou color. Očakáva sa farbová hodnota.
p {
color: red;
}Ako hodnotu môžete zadať farby alebo hexadecimálnu farbovú hodnotu.
Nastavenie smeru písania
Pomocou vlastnosti direction môže byť smer písania prvkov vynútený. Zaujímavé je opačné smerovanie písania v súvislosti so jazykmi, v ktorých sa píše zprava doľava.
Ďalšie informácie môžete zistiť o tom, na ktorej strane sa zbaví veľkého obsahu overflow.
• ltr – zľava doprava
• rtl – zprava doľava
Nasledovný príklad ukazuje, ako túto vlastnosť využiť.
.normal {direction:ltr;}
.rueckwaerts {direction:rtl;}
Boli tu definované dve triedy.
<p class="normal">Text, ktorý sa píše zľava doprava. 1 2 3 4 5 6 7 8 9 0</p> <p class="rueckwaerts">Text, ktorý sa píše zprava doľava. 1 2 3 4 5 6 7 8 9 0</p>
Výsledok vyzerá v prehliadači nasledovne:
Horizontálna orientácia textu
Pomocou vlastnosti text-align sa určuje horizontálne zarovnanie odstavcov textu a iných obsiahnutých textov v blokových prvkoch alebo inline prvkoch. Predvolené nastavenie je zarovnanie doľava.
• left – zarovnanie doľava
• right – zarovnanie doprava
• center – zcentrované
• justify – zarovnať do bloku
Príklad:
<p style="text-align:right;">
Srdečne vítame
</p>
Výsledok vyzerá takto:
Vertikálne zarovnanie
Pomocou vlastnosti vertical-align sa určuje vertikálne zarovnanie textu v rámci riadka voči výške riadku. Údaje sa vždy vzťahujú na nadradený prvok, ktorý musí byť inline prvkem. Text sa dá tiež zarovnať vnútri tabuliek.
Dostupné sú tieto hodnoty:
• sub – subskript
• super – superskript
• baseline – zarovnané na základnú čiaru
• top – zarovnané na horný okraj nadradeného prvku
• bottom – zarovnané na dolný okraj nadradeného prvku
• middle – zarovnané v strede medzi horným a dolným okrajom nadradeného prvku
• text-top – zvrchu textu
• text-bottom – zdola textu
• Hodnota v px – kladná alebo záporná hodnota posúva prvok nad alebo pod základnú čiaru.
• Hodnota v % – kladná alebo záporná hodnota posúva prvok nad alebo pod základnú čiaru.
Príklad:
.baseline {
vertical-align: baseline;
}
Uvádzajte do úvahy, že hodnoty vertical-align sú rôzne interpretované vo rôznych prehliadačoch. Určite by ste mali výsledky testovať predtým, než umiestnite stránky online.
Nastavenie dekorácie textu
text-decoration sa používa na pridanie ďalších vlastností textu alebo hypertextovým odkazom.
• none – žiadna dekorácia textu
• underline – podčiarknuté
• overline – nadčiarknuté
• line-through – prečiarknuté
• blink – blikajúce
Príklad:
a:link {
text-decoration: none;
}
Týmto sa hypertextové odkazy na stránke už nezdôraznia podčiarknutím.
Medzery medzi jednotlivými slovami sa dajú tiež explicitne nastaviť.
<span style="word-spacing:0.5em">Vitajte na stránke PSD-Tutorials.de!</span><br /> <span style="word-spacing:1em"> Vitajte na stránke PSD-Tutorials.de!</span>
Očakáva sa číselná hodnota. Percentuálne hodnoty nie sú možné.
Podobne ako word-spacing je tiež letter-spacing. Avšak pomocou letter-spacing sa určuje vzdialenosť medzi jednotlivými písmenami textu. Aj tu sú povolené číselné hodnoty, ale nie percentá.
<span style="letter-spacing:0.1em">Príkladný text s odstupom znakov 0.1em</span><br> <span style="letter-spacing:0.3em">Príkladný text s odstupom znakov 0.3em</span><br>
S vlastnosťou text-transform môžete určiť, či má byť text zobrazený veľkými alebo malými písmenami. A to nezávisle na skutočnej notácii v zdrojovom texte. Okrem toho môžete vynútiť použitie malých veľkých písmen.
• lowercase – malé písmená
• uppercase – veľké písmená
• capitalize – počiatočné písmená slov veľkými
• none – žiadna úprava tvaru textu
Príklad:
.klein {
text-transform: lowercase;
}V prehliadači to vyzerá nasledovne:
Medzery a zalomenia riadkov
S vlastnosťou white-space sa určuje, ako majú byť zobrazené v prehliadači existujúce medzery a zalomenia riadkov v zdrojovom texte.
• normal – vloží sa automatické zalomenie riadkov. Okrem toho sa viacero medzier zlúči do jednej.
• pre – Zalomenia riadkov sa zobrazujú tak, ako sú v zdrojovom texte.
• nowrap – nedochádza k automatickému zalomeniu riadkov.
• pre-line – viacero medzier sa zlúči do jednej. Navyše sa uskutoční zalomenie, ak nie je veľká dostatočná oblasť pre zobrazenie.
• pre-wrap – ak nie je dostatočne veľká oblasť pre zobrazenie, uskutoční sa zalomenie.
Opäť tu je príklad:
<pre class="brush:xml;"><!DOCTYPE html>
<html lang="sk">
<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>Odstavec 1</p>
<p>Odstavec 2</p>
<p>Odstavec 3</p>
<div>
<p>Odstavec 4</p>
</div>
</body>
</html></pre>V prehliadači to vyzerá nasledovne:
Nastavenie tieňa
Pomocou vlastnosti text-shadow je možné vynútiť tieň pre texty. Treba si všimnúť, že táto vlastnosť je podporovaná len v relatívne nových prehliadačoch. Prehliadače, ktoré nemôžu interpretovať text-shadow, zobrazia text bez tieňa.text-shadow sa používa nasledovne:
text-shadow: hV vV blur #xxxxxx;
A tieto hodnoty znamenajú:
• hV – Horizontálny posun
• vV – Vertikálny posun
• blur – Rozostrenie
• #xxxxxx – Farba tieňa
Nasledujúci príklad ukazuje typické použitie pre text-shadow.
.schatten {
color: #444;
font-size: 34px;
text-shadow: 2px 2px 3px #333;
}
Definovaná trieda sa následne uplatní na nadpis prvého poriadku.
<h1 class="schatten">PSD-Tutorials.de</h1>
A aj tu je pohľad na výsledok:
Ako už bolo opísané, môžete text-shadow ľahko použiť, pretože neinterpretácia prehliadačmi nemá žiadne negatívne dôsledky. Text sa potom jednoducho zobrazí bez tiena.
