Barvu písma lze nastavit pomocí color. Očekává se hodnota barvy.
p {
color: red;
}Jako hodnotu můžete zadat barevná slova nebo hexadecimální hodnotu barvy.
Nastavení psaní
Pomocí vlastnosti direction lze u elementů nastavit směr psaní. Je zajímavé, když jde o opačný směr psaní v souvislosti s jazyky, kde se píše zprava doleva.
Dodatečně lze určit, na které straně se mají velké obsahy s přetečením oříznout.
• ltr – zleva doprava
• rtl – zprava doleva
Následující příklad ukazuje, jak lze tuto vlastnost využít.
.normal {direction:ltr;}
.rueckwaerts {direction:rtl;}
Zde byly definovány dvě třídy.
<p class="normal">Text, který je psán zleva doprava. 1 2 3 4 5 6 7 8 9 0</p> <p class="rueckwaerts">Text, který je psán zprava doleva. 1 2 3 4 5 6 7 8 9 0</p>
Výsledek v prohlížeči vypadá následovně:
Horizontální zarovnání textů
Pomocí vlastnosti text-align se nastavuje vodorovné zarovnání odstavců a jiných běžných textů nebo inline elementů obsažených v blokových elementech. Výchozím nastavením je zarovnání vlevo.
• left – zarovnání vlevo
• right – zarovnání vpravo
• center – zarovnání na střed
• justify – zarovnat jako do bloku
Příklad:
<p style="text-align:right;">
Srdečně vítáme
</p>
Výsledek vypadá takto:
Vertikální zarovnání
Pomocí vlastnosti vertical-align se stanovuje vertikální zarovnání textu v rámci řádku s ohledem na výšku řádku. Hodnota se vždy vztahuje k nadřazenému elementu, který musí být inline elementem. Text lze také zarovnat v tabulkách.
Dostupné hodnoty jsou následující:
• sub – sníženě
• super – zvýšeně
• baseline – zarovnáno na základní linku
• top – zarovnání k hornímu okraji nadřazeného prvku
• bottom – zarovnáno k dolnímu okraji nadřazeného prvku
• middle – zarovnáno uprostřed mezi horním a dolním okrajem nadřazeného prvku
• text-top – v horních textových okrajích
• text-bottom – v dolních textových okrajích
• Udání délky – kladná nebo záporná hodnota posouvá prvek nad nebo pod základní linku.
• Procentuálního udání – kladná nebo záporná hodnota posouvá prvek nad nebo pod základní linku.
Příklad:
.baseline {
vertical-align: baseline;
}
Všimněte si, že hodnoty vlastnosti vertical-align jsou interpretovány různými prohlížeči nekonzistentně. Výsledky byste si tak měli rozhodně otestovat, než umístíte stránky online.
Definice ozdobení textu
text-decoration se používá k přidělení dalších vlastností textům nebo odkazům.
• none – žádné ozdobení textu
• underline – podtržení
• overline – nadtržení
• line-through – přeškrtnutí
• blink – blikání
Další příklad:
a:link {
text-decoration: none;
}
Tímto se odkazy na stránce již nebudou ozdobeny podtržením.
Odstup mezi jednotlivými slovy lze také explicitně určit.
<span style="word-spacing:0.5em">Vítejte na PSD-Tutorials.de!</span><br /> <span style="word-spacing:1em"> Vítejte na PSD-Tutorials.de!</span>
Očekáván je číselný hodnota. Procentuální údaje však nejsou možné.
Podobné jako word-spacing je také letter-spacing. Přes letter-spacing se však určuje odstup mezi jednotlivými písmeny v textu. Zde jsou povoleny číselné hodnoty, ale ne procentuální údaje.
<span style="letter-spacing:0.1em">Příkladtext s rozestupem písmen 0.1em</span><br> <span style="letter-spacing:0.3em">Příkladtext s rozestupem písmen 0.3em</span><br>
Pomocí vlastnosti text-transform můžete určit, zda má být text psán velkými nebo malými písmeny. A to nezávisle na skutečné notaci ve zdrojovém textu. Navíc můžete vynutit kapitálky.
• lowercase – malá písmena
• uppercase – velká písmena
• capitalize – začátek slov velkými písmeny
• none – žádná transformace textu
Příklad:
.kapkova {
text-transform: lowercase;
}V prohlížeči vypadá výsledek následovně:
Mezery a zalamování řádků
S vlastností white-space se stanovuje, jak mají být v prohlížeči zobrazeny mezery a zalamování řádků obsažené v zdrojovém textu.
• normal – je vložen automatický zlom řádku. Navíc se několik mezer spojí dohromady.
• pre – Závorek na řádku jsou zobrazeny tak, jak jsou ve zdrojovém textu.
• nowrap – není vložen automatický zlom řádku.
• pre-line – několik mezer se spojí dohromady. Kromě toho dochází ke zlomu, pokud není box pro zobrazení dostatečně velký.
• pre-wrap – ke zlomu dochází, pokud není box pro zobrazení dostatečně velký.
Zde je příklad:
<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 prohlížeči to vypadá takto:
Realizace stínu
S vlastností text-shadow lze textu nastavit stín. Mějte na paměti, že tato vlastnost je podporována pouze v relativně moderních prohlížečích. Prohlížeče, které nemohou interpretovat text-shadow, zobrazí písmo bez stínu.text-shadow se používá následovně:
text-shadow: hV vV blur #xxxxxx;
A to znamenají tyto hodnoty:
• hV – Horizontální posun
• vV – Vertikální posun
• blur – Rozmazání
• #xxxxxx – Barva stínu
Následující příklad ukazuje typické použití pro text-shadow.
.stín {
color: #444;
font-size: 34px;
text-shadow: 2px 2px 3px #333;
}
Definovaná třída bude následně použita na nadpis první úrovně.
<h1 class="stín">PSD-Tutorials.de</h1>
A zde je pohled na výsledek:
Jak již bylo popsáno, můžete text-shadow použít bez potíží, protože jeho nedekódování prohlížeči nemá negativní dopad. Text se pak jednoduše zobrazí bez stínu.
