|
||||||||||||||||||||||||||||||||||||||||||||||||
Menu
Distributions (131)
Software (10844)
|
CSS (15.) - TextTento díl se bude zabývat vlastnostmi kaskádových stylů pro definici vzhledu textu.
Prostrkání textuMezery mezi jednotlivými znaky v textu (prostrkání) se nastavuje vlastností letter-spacing. Jako její hodnota se používají klíčová slova nebo číslo.
letter-spacing
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í
b {
letter-spacing: 0.1em } Podpora v prohlížečíchNN4 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í mezeryMezery mezi jednotlivými slovy v textu se nastavují vlastností word-spacing. Jako její hodnota se používají klíčová slova nebo číslo.
word-spacing
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í
h1 {
word-spacing: 1em } Podpora v prohlížečíchNN4 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ý textOzdobný text se nastavuje vlastností text-decoration. Jako její hodnota se používají klíčová slova.
text-decoration
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: none
text-decoration: underline text-decoration: overline text-decoration: line-through text-decoration: blink
a {
/* zruší podtržení u odkazů */ text-decoration: underline } Podpora v prohlížečíchTato 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ísmaPro 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.
text-transform
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í
zdrojový text: TexT-TraNSforM: NONE
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číchNN4 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 řádkuPro nastavení odsazení prvního řádku lze použít vlastnost text-indent. Jako její hodnota se používají klíčová slova a procenta.
text-indent
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í
p {
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číchNN4 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.
text-align
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í
div.center {
text-align: center } Podpora v prohlížečíchNN4 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ý textPokud 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.
text-shadow
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í
span.glow {
background: white; color: white; text-shadow: black 0px 0px 5px; } Podpora v prohlížečíchV současné době (prosinec 2004) není podporována ani jedním běžným prohlížečem. ZávěrDnes jsem se seznámili s vlastnostmi kaskádových stylů pro text.
|
Search Software
Search Google
|
||||||||||||||||||||||||||||||||||||||||||||||
©Pavel Kysilka - 2003-2024 | maillinuxsoft.cz | Design: www.megadesign.cz |