Prostrkání textu
Mezery mezi jednotlivými znaky v textu (prostrkání) se nastavuje vlastností letter-spacing. Jako její hodnota se používají klíčová slova nebo číslo.
Hodnoty: none | <velikost> | inherit
Výchozí hodnota: none
Ovlivňuje: všechny prvky
Dědičná: ano
Procenta: nelze používat
Média: vizuální
none nastaví normální hodnotu odstupu mezi jednotlivými znaky, která vychází z dané velikosti písma.
<velikost> o tuto velikost se zvětší mezery mezi jednotlivými písmeny. Velikost může být záporná.
inherit hodnota se dědí po rodičovském prvku
Tato vlastnost se hodí pro dekorativní účely. Velikost by se měla nastavovat v rozumných mezích (několik pixelů). U nadpisů resp. u textu s velkou velikostí písma je možné nastavit větší hodnoty prostrkání.
Příklad použití
letter-spacing: 0.1em
}
Podpora v prohlížečích
NN4 plná podpora; Mozilla (Netscape 6+) plná podpora všemi verzemi; IE plná podpora od verze 4; Opera plná podpora od verze 3,5; IE 5/MAC plná podpora; Konqueror plná podpora.
Mezislovní mezery
Mezery mezi jednotlivými slovy v textu se nastavují vlastností word-spacing. Jako její hodnota se používají klíčová slova nebo číslo.
Hodnoty: none | <velikost> | inherit
Výchozí hodnota: none
Ovlivňuje: všechny prvky
Dědičná: ano
Procenta: nelze používat
Média: vizuální
none nastaví normální hodnotu odstupu mezi jednotlivými slovy, která vychází z dané velikosti písma.
<velikost> o tuto velikost se zvětší mezery mezi jednotlivými slovy. Velikost může být záporná.
inherit hodnota se dědí po rodičovském prvku
Tato vlastnost nastavuje velikost mezer mezi jednotlivými slovy. Specifikace připouští, použití hodnoty normal místo definované hodnoty.
Příklad použití
word-spacing: 1em
}
Podpora v prohlížečích
NN4 nepodporuje; Mozilla (Netscape 6+) plná podpora všemi verzemi; IE plná podpora od verze 6; Opera plná podpora od verze 3,5; IE 5/MAC plná podpora; Konqueror plná podpora.
Ozdobný text
Ozdobný text se nastavuje vlastností text-decoration. Jako její hodnota se používají klíčová slova.
Hodnoty: none | underline | overline | line-through | blink | inherit
Výchozí hodnota: none
Ovlivňuje: všechny prvky
Dědičná: ne
Procenta: nelze používat
Média: vizuální
none text je bez ozdoby
underline text je podtržený
overline text je nadtržený
line-through text je přeškrtnutý
blink text bliká, střídá se viditelné a neviditelné písmo
inherit hodnota se dědí po rodičovském prvku
Všechny texty mají standardně nastavenou tuto vlastnost na none (tedy bez dekorace). Odkazy mají nastavenou tuto vlastnost na underline. Barva dekorace (čáry) je odvozena z barvy písma.
Příklad použití
text-decoration: underline
text-decoration: overline
text-decoration: line-through
text-decoration: blink
/* zruší podtržení u odkazů */ text-decoration: underline
}
Podpora v prohlížečích
Tato vlastnost je docela dobře podporována většinou prohlížečů.
NN4 částečná podpora (nepodporuje overline); Mozilla (Netscape 6+) plná podpora všemi verzemi; IE podpora od verze 3 (nepodporují blink); Opera plná podpora od verze 3,5; IE 5/MAC částečná podpora (nepodporuje blink); Konqueror plná podpora.
Převod písma
Pro převod malých písem v textu na velká, lze použít vlastnost text-transform. Jako její hodnota se používají klíčová slova.
Hodnoty: none | capitalize | uppercase | lowercase | inherit
Výchozí hodnota: none
Ovlivňuje: všechny prvky
Dědičná: ano
Procenta: nelze používat
Média: vizuální
none písmena textu zůstanou tak, jak jsou napsána
capitalize první písmeno každého slova se převede na velké
uppercase všechna písmena se převedou na velká
lowercase všechna písmena se převedou na malá
inherit hodnota se dědí po rodičovském prvku
Tato vlastnost umožňuje změnit velikost písmen zobrazeného textu. Vlastnost nijak nemění velikost písmen ve zdrojovém kódu. Klienti mohou nahradit libovolnou hodnotu vlastnosti text-transform za none, v tom případě, že daný znak není ze znakové sady Latin 1.
Příklad použití
TexT-TraNSforM: NONE
zdrojový text: text-transform: capitalize
text-transform: capitalize
zdrojový text: text-transform: uppercase
text-transform: uppercase
zdrojový text: TEXT-TRANSFORM: LOWERCASE
text-transform: lowercase
Tato vlastnost se moc často nepoužívá, výhodnější je napsat daný text v požadovaném vzhledu.
Podpora v prohlížečích
NN4 plná podpora; Mozilla (Netscape 6+) plná podpora všemi verzemi; IE plná podpora od verze 3; Opera plná podpora od verze 3,5; IE 5/MAC plná podpora; Konqueror plná podpora.
Odsazení prvního řádku
Pro nastavení odsazení prvního řádku lze použít vlastnost text-indent. Jako její hodnota se používají klíčová slova a procenta.
Hodnoty: <velikost> | <procenta> | inherit
Výchozí hodnota: 0
Ovlivňuje: blokové prvky
Dědičná: ano
Procenta: z šířky bloku
Média: vizuální
<velikost> nastavení pevné velikosti odsazení
<procenta> velikost odsazení je odvozena z šířky bloku
inherit hodnota se dědí po rodičovském prvku
Vlastnost umožňuje nastavit velikost odsazení prvního řádku textu daného bloku. Řádek je odsazen zleva (resp. zprava pro jazyky psané zprava doleva) od okraje bloku.
Příklad použití
text-indent: 3em
}
Tato vlastnost se moc často nepoužívá, jelikož oddělení odstavců se provádí vertikální mezerou mezi jednotlivými odstavci.
Podpora v prohlížečích
NN4 plná podpora; Mozilla (Netscape 6+) plná podpora všemi verzemi; IE plná podpora od verze 3; Opera plná podpora od verze 4; IE 5/MAC plná podpora; Konqueror plná podpora.
Horizontální zarovnání
Nastavení horizontálního zarovnání řádkových prvků se provádí pomocí vlastnosti text-align. Jako její hodnota se používají klíčová slova.
Hodnoty: left | right | center | justify | <řetězec> | inherit
Výchozí hodnota: závisí na klientovi resp. na uživatelském nastavení
Ovlivňuje: blokové prvky
Dědičná: ano
Procenta: nelze používat
Média: vizuální
left zarovnání obsahu doleva
right zarovnání obsahu doprava
center zarovnání obsahu na horizontální střed
justify zarovnání obsahu do bloku
<řetězec> řetězec podle, kterého se bude zarovnávat obsah tabulek
inherit hodnota se dědí po rodičovském prvku
Pomocí této vlastnosti je možné zarovnat obsah bloku. Hodnoty left, right, center jsou zřejmé. Nastavením hodnoty justify je obsah zarovnán do bloku (od kraje do kraje). Přestože prohlížeč může při této hodnotě upravit vlastnosti letter-spacing a word-spacing, většinou toto zarovnání provádí přidáním mezer. Hodnotu <řetězec> lze použít jen zarovnání pro obsahu buněk tabulky. Řetězec je posloupnost znaků podle, které se bude obsah buněk zarovnávat.
Příklad použití
text-align: center
}
Podpora v prohlížečích
NN4 plná podpora; Mozilla (Netscape 6+) plná podpora všemi verzemi; IE plná podpora od verze 4; Opera plná podpora od verze 3,5; IE 5/MAC plná podpora; Konqueror plná podpora.
Stínovaný text
Pokud chceme použít stínované písmo, je možné využít vlastnosti text-shadow. Jako její hodnota se používají klíčová slova a velikosti.
Hodnoty: none | <barva> || <velikost> <velikost> <velikost>|, <barva> || <velikost> <velikost> <velikost>| inherit
Výchozí hodnota: none
Ovlivňuje: všechny prvky
Dědičná: ne
Procenta: nelze používat
Média: vizuální
none bez stínu
<barva> viz díl č. 3, jde o barvu stínu
<velikost> určuje posunutí stínu
inherit hodnota se dědí po rodičovském prvku
Stín je definován barvou a posunutím. Posunutí se skládá z dvojice čísel, kdy první číslo definuje horizontální posun stínu od textu napravo (záporná hodnota udává posun stínu nalevo), druhá hodnota určuje vertikální posun stínu od textu směrem dolů (záporná hodnota definuje posun stínu nahoru).Třetí nepovinná hodnota určuje míru rozostření stínu (přesný algoritmus rozostření specifikace neuvádí).
Příklad použití
background: white;
color: white;
text-shadow: black 0px 0px 5px;
}
Podpora v prohlížečích
V současné době (prosinec 2004) není podporována ani jedním běžným prohlížečem.
Závěr
Dnes jsem se seznámili s vlastnostmi kaskádových stylů pro text.