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

> CSS (16.) - Speciální textové vlastnosti

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

16.12.2004 13:00 | Vasek | Články autora | přečteno 18237×

Bílé mezery

Pokud chceme specifikovat, jak má prohlížeč naložit s bílými znaky, použijeme vlastnost white-space. Jako její hodnota se používají klíčová slova.

white-space
Hodnoty: normal | pre | nowrap | inherit
Výchozí hodnota: normal
Ovlivňuje: všechny prvky
Dědičná: ano
Procenta: nelze používat
Média: vizuální
  normal definuje, že klient má souvislé skupiny bílých znaků smrsknout do jednoho
  pre definuje, že klient nesmí souvislé skupiny bílých znaků smrsknout do jednoho
  nowrap funguje obdodně jako hodnota normal, a navíc potlačuje zalomení řádků
  inherit hodnota se dědí po rodičovském prvku

Tato vlastnost umožňuje nastavit chování prohlížeče k bílým znakům mezi něž patří: mezera (Unicode kód 32), tabelátor (kód 9), nový řádek (LF, kód 10), konec řádku (CR, kód 13), nový list (FF, kód 12); mezi bílé znaky se nepočítá dlouhá mezera (E-M, kód 8195).

Hodnota normal umožňuje klientovi stahovat souvislé skupiny bílých znaků do jedné a podle potřeby zalamovat řádky. Pro zalomení řádku lze také použít řetězec "\A" v generovaném obsahu či v HTML použít tag <br>. Pomocí hodnoty pre lze klientovi určit, že nesmí stahovat souvislé skupiny bílých znaků do jednoho, a potlačuje zalomení řádků. Řádky se zalamují jen v místě zalomení zdrojového textu či pomocí řetězece "\A" v generovaném obsahu. Tato hodnota je ekvivalentem zastaralého html tagu <pre>. Pokud použijeme u této vlastnosti hodnotu nowrap, říkáme klientovi, že může stahovat souvislé skupiny bílých znaků do jednoho a současně má potlačovat všechno zalomení řádků vyjma zalomení definovaného řetězcem "\A" v generovaném obsahu. Jde o obdobu zastaralého html tagu <nobr>.

Příklad použití

zdrojový text: white - space: normal
white - space: normal
zdrojový text: white - space: pre
white - space: pre

span{
white-space: pre
}

Podpora v prohlížečích

NN4 částečná podpora (nepodporuje nowrap); Mozilla (Netscape 6+) plná podpora všemi verzemi; IE plná podpora od verze 5,5 při striktním DOCTYPE; Opera plná podpora od verze 5; IE 5/MAC plná podpora; Konqueror plná podpora.

Výška řádků

Výška řádků se nastaví vlastností line-height. Jako její hodnota se používají klíčová slova, číslo, procento či délka.

line-height
Hodnoty: normal | <číslo> | <velikost> | <procenta> | inherit
Výchozí hodnota: normal
Ovlivňuje: všechny prvky
Dědičná: ano
Procenta: z velikosti písma prvku
Média: vizuální
  normal klient nastaví rozumnou výšku řádku odvozenou od velikosti písma.
  <číslo> výška řádku se nastaví jako součin čísla a velikosti písma. Záporné hodnoty jsou povoleny.
  <velikost> výška je stanovena na danou velikost. Záporné hodnoty nejsou povoleny.
  <procenta> nastaví výšku řádku na velikost odpovídající procentuální velikosti písma.
  inherit hodnota se dědí po rodičovském prvku

Tato vlastnost nastavuje výšku řádku daného textového boxu. Tato vlastnost se používá pro zvětšení řádkování. Pro tiskový výstup (velké rozlišení) stačí nastavit hodnotu 1,2 až 1,3, pro obrazovku je vhodnější nastavit hodnotu na 1,4.

Příklad použití

div {
line-height: 1.2em /* velikost */
line-height: 1.2 /* číslo */
line-height: 120% /* procenta */
}

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.

Vertikální zarovnání

Vertikální zarovnání textu se nastavuje vlastností vertical-align. Jako její hodnota se používají klíčová slova, procenta, číslo.

vertical-align
Hodnoty: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <velikost> | <procenta> |inherit
Výchozí hodnota: baseline
Ovlivňuje: všechny prvky
Dědičná: ne
Procenta: z výšky řádku
Média: vizuální
  baseline prvek bude zarovnán na účaří řádku
  sub prvek bude horním indexem
  super prvek bude dolním indexem
  top zarovná horní hranu prvku s horní hranou rodičovského prvku
  text-top zarovná horní hranu prvku s horní hranou textu rodičovského prvku
  middle střed prvku bude ve středu řádku
  bottom zarovná dolní hranu prvku s dolní hranou rodičovského prvku
  text-bottom zarovná dolní hranu prvku s dolní hranou textu rodičovského prvku
  <velikost> posune prvek o dané číslo nahoru (kladné hodnoty) či dolů (záporné hodnoty)
  <procenta> posune prvek nahoru (kladné hodnoty) či dolů (záporné hodnoty) o vzdálenost odpovídající procentům výšky rodičovského prvku
  inherit hodnota se dědí po rodičovském prvku

Tato vlastnost nastavuje vertikální zarovnání prvku na řádku, některé z hodnot je možné použít i pro zarovnání obsahu buňky tabulek či zarovnání obrázků na řádku. Hodnoty baseline, sub, super, text-top, middle, text-bottom, <velikost>, <procenta> mají smysl jen vzhledem k rodičovskému řádkovému prvku. Hodnoty top, bottom se vztahují k řádkovému prvku, ve kterém se daný prvek nachází.

Příklad použití

text vertical-align: baseline text

text vertical-align: sub text

text vertical-align: super text

text vertical-align: top text

text vertical-align: text-top text

text vertical-align: middle text

text vertical-align: bottom text

text vertical-align: text-bottom text

text vertical-align: 30 text

text vertical-align: 110% text

Podpora v prohlížečích

NN4 částečná podpora; Mozilla (Netscape 6+) plná podpora všemi verzemi; IE částečná podpora od verze 4 (podporuje jen baseline, sub a super), plná podpora od verze 5,5; Opera podpora od verze 3,5; IE 5/MAC částečná podpora; Konqueror plná podpora.

Závěr

Dnes jsme se seznámili se speciálními vlastnostmi kaskádových stylů pro text.

Verze pro tisk

pridej.cz

 

DISKUZE

Nejsou žádné diskuzní příspěvky u dané položky.



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

18.6.2018 0:43 /František Kučera

Červnový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 21. 6. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát na téma: F-Droid, aneb svobodný software do vašeho mobilu. Kromě toho budou k vidění i vývojové desky HiFive1 se svobodným/otevřeným čipem RISC-V.


Přidat komentář

23.5.2018 20:55 /Ondřej Čečák
Od pátku 25.5. proběhne na Fakultě informačních technologií ČVUT v Praze openSUSE Conference. Můžete se těšit na spostu zajímavých přednášek, workshopů a také na Release Party nového openSUSE leap 15.0. V na stejném místě proběhne v sobotu 26.5. i seminář o bezpečnosti CryptoFest.
Přidat komentář

20.5.2018 17:45 /Redakce Linuxsoft.cz
Ve čtvrtek 31. května 2018 připravuje webový magazín BusinessIT ve spolupráci s Best Online Média s.r.o. pátý ročník odborné konference Firemní informační systémy 2018. Akce proběhne v kongresovém centru Vavruška (palác Charitas), Karlovo náměstí 5, Praha 2 (u metra Karlovo náměstí) od 9:00 hod. dopoledne do cca 15 hod. odpoledne. Konference je zaměřena na efektivní využití firemních informačních systémů a na to, jak plně využít jejich potenciál. Podrobnější informace na webových stránkách konfrence.
Přidat komentář

14.5.2018 7:28 /František Kučera
Květnový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 17. 5. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát na téma: Audio – zvuk v GNU/Linuxu.
Přidat komentář

7.5.2018 16:20 /František Kučera
Na stránkách spolku OpenAlt vyšla fotoreportáž Pražské srazy 2017 dokumentující srazy za uplynulý rok. Květnový pražský sraz na téma audio se bude konat 17. 5. 2018 (místo a čas ještě upřesníme).
Přidat komentář

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ář

   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