LINUXSOFT.cz Přeskoč levou lištu
Uživatel: Heslo:  
   CZUKPL

> CSS (15.) - Text

Tento díl se bude zabývat vlastnostmi kaskádových stylů pro definici vzhledu textu.

7.12.2004 16:00 | Vasek | Články autora | přečteno 16097×

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.

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čí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.

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čí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.

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čí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.

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čí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.

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čí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.

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čí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.

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;
}
stínované písmo

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.

Verze pro tisk

pridej.cz

 

DISKUZE

text-shadow 15.3.2009 13:11 Ascaria




Příspívat do diskuze mohou pouze registrovaní uživatelé.
> Vyhledávání software
> Vyhledávání článků

17.4.2018 0:46 /František Kučera
Dubnový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 19. 4. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tématem tohoto srazu bude OpenStreetMap (OSM) aneb svobodné mapy.
Přidat komentář

16.3.2018 22:01 /František Kučera
Kulatý OpenAlt sraz v Praze oslavíme klasicky: u limonády a piva! Přijďte si posedět, dát si dobré jídlo a vybrat z mnoha piv do restaurace Kulový blesk, který najdete v centru Prahy nedaleko metra I. P. Pavlova na adrese Sokolská 13, Praha 2. Sraz se koná ve čtvrtek 22. března a začínáme v 18:00. Heslo: OpenAlt. Vezměte s sebou svoje hračky! Uvítáme, když si s sebou na sraz vezmete svoje oblíbené hračky. Jestli máte nějaký drobný projekt postavený na Arduinu, nějakou zajímavou elektronickou součástku, či třeba i pěkný úlovek z crowdfundingové akce, neváhejte. Oslníte ostatní a o zábavu bude postaráno.
Přidat komentář

13.2.2018 0:41 /František Kučera
Únorový pražský sraz OpenAltu se koná 15. 2. 2018 a tentokrát se vydáme na návštěvu do jednoho pražského datacentra. Sejdeme se v 17:50 v severovýchodní části nástupiště tramvajové zastávky Koh-I-Noor. Po exkurzi se přesuneme do restaurace U Pštrosa (Moskevská 49), kde probereme tradiční témata (svobodný software a hardware, DIY, CNC, SDR, 3D tisk…) a tentokrát bude k vidění i IoT brána od The Things Network.
Přidat komentář

11.2.2018 23:11 /Petr Ježek
Hledáte lehký a rychlý prolížeč PDF souborů? Pokud vás již omrzelo čekat na načítání stránek či jiné nešvary, zkuste xreader.
Přidat komentář

11.2.2018 20:35 /Redakce Linuxsoft.cz
Třetí ročník odborné IT konference na téma Cloud computing v praxi proběhne ve čtvrtek 1. března 2018 v konferenčním centru Vavruška, v paláci Charitas, Karlovo náměstí 5, Praha 2 (u metra Karlovo náměstí) od 9:00 hod. dopoledne do cca 16 hod. odpoledne. Konference o trendech v oblasti cloud computingu nabídne i informace o konkrétních možnostech využívání cloudů a řešení vybraných otázek souvisejících s provozem IT infrastruktury.
Přidat komentář

15.1.2018 0:51 /František Kučera
První letošní pražský sraz se koná již tento čtvrtek 18. ledna od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5). Vítáni jsou všichni příznivci svobodného softwaru a hardwaru, ESP32, DIY, CNC, SDR nebo dobrého piva. Prvních deset účastníků srazu obdrží samolepku There Is No Cloud… just other people's computers. od Free Software Foundation.
Přidat komentář

14.11.2017 16:56 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt – tradičně první čtvrtek před třetím pátkem v měsíci: 16. listopadu od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).
Přidat komentář

12.11.2017 11:06 /Redakce Linuxsoft.cz
PR: 4. ročník odborné IT konference na téma Datová centra pro business proběhne již ve čtvrtek 23. listopadu 2017 v konferenčním centru Vavruška, v paláci Charitas, Karlovo náměstí 5, Praha 2 (u metra Karlovo náměstí) od 9:00. Konference o návrhu, budování, správě a efektivním využívání datových center nabídne odpovědi na aktuální a často řešené otázky, např Jaké jsou aktuální trendy v oblasti datových center a jak je využít pro vlastní prospěch? Jak zajistit pro firmu či jinou organizaci odpovídající služby datových center? Podle jakých kritérií vybrat dodavatele služeb? Jak volit součásti infrastruktury při budování či rozšiřování vlastního datového centra? Jak efektivně spravovat datové centrum? Jak eliminovat možná rizika? apod.
Přidat komentář

   Více ...   Přidat zprávičku

> Poslední diskuze

20.2.2018 18:48 / Ivan Majer
portal

20.2.2018 15:57 / Jan Havel
Jak využíváte služby cloudu v podnikání?

16.1.2018 1:08 / Ivan Pittner
verejna ip od o2 ubuntu

15.1.2018 17:26 / Mira Harvalik
Re: Jak udělat HTML/Javascript swiping gallery do mobilu?

30.12.2017 20:16 / Michal Knoll
odmocnina

Více ...

ISSN 1801-3805 | Provozovatel: Pavel Kysilka, IČ: 72868490 (2003-2018) | mail at linuxsoft dot cz | Design: www.megadesign.cz | Textová verze