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

> CSS (17.) - Generovaný obsah

V tomto díle se seznámíme s vlastnostmi pro generování obsahu.

22.12.2004 15:00 | Vasek | Články autora | přečteno 15005×

Generovaný text

Pokud chcete pomocí css umísťovat text do vašeho dokumentu, použijete vlastnost content. Jako její hodnota se používají klíčová slova.

content
Hodnoty: <řetězec> | <uri> | <counter> | attr (X) | open-quote | close-quote | no-open-quote | no-close-quote | inherit
Výchozí hodnota: prázdný řetězec
Ovlivňuje: :before a :after pseudo-elementy
Dědičná: ne
Procenta: nelze používat
Média: všechna
  <řetězec> obsahuje text, který se má vložit do dokumentu
  <uri> externí soubor s obsahem, pokud prohlížeč daný typ dokumentu nepodporuje, musí jej ignorovat
  <counter> čítač
  attr (X) vloží hodnotu atributu X
  open-quote vloží řetězec podle vlasnosti quotes
  close-quote vloží řetězec podle vlasnosti quotes
  no-open-quote zvýší úroveň vnořených uvozovek
  no-close-quote sníží úroveň vnořených uvozovek
  inherit hodnota se dědí po rodičovském prvku

Tato vlastnost umožňuje generovat automaticky obsah dokumentu pomocí pseudo elementů :after (po) a :before (před). Jelikož tato vlastnost není v podstatě podporována prohlížeči moc se nepoužívá.

Příklad použití

img.text:after {
content: "\APopis obrázku: " attr (alt);
}

<style>
img.text:after {
content: "\APopis obrázku: " attr (alt);
}
</style>

......
<img src="img/sipka2.png" alt="to je mi, ale pěknej obrázek ;-)" class="text" />
......

to je mi, ale pěknej obrázek ;-) to je mi, ale pěknej obrázek ;-)

Podpora v prohlížečích

NN4 nepodporuje; Mozilla (Netscape 6+) částečná podpora; IE nepodporuje; Opera částečná podpora od verze 5; IE 5/MAC nepodporuje; Konqueror částečná podpora.

Zvětšení čítače

K zvýšení hodnoty čítače lze použít vlastnost counter-increment. Jako její hodnota se používají čísla.

counter-increment
Hodnoty: <jméno> <celé číslo> | none | inherit
Výchozí hodnota: none
Ovlivňuje: všechny prvky
Dědičná: ne
Procenta: nelze používat
Média: všechna
  <jméno> identifikace čítače, jméno čítače
  <celé číslo> udává o kolik se má hodnota čítače zvětšit/zmenšit (kladná čísla zvětšují, záporná snižují)
  none hodnota čítače se nezmění
  inherit hodnota se dědí po rodičovském prvku

Tato vlastnost umožňuje číslovat jednotlivé prvky v dokumentu. Bohužel tato vlastnost patří mezi vlastnosti, které nejsou podporovány všemi prohlížeči resp. je nepodporuje IE. Jelikož IE je zatím (ať se nám to libí či nelíbí) nejpoužívanější internetový prohlížeč, doporučil bych vám se na tuto vlastnost nespoléhat. Pokud u této vlastnosti nedefinujete velikost změny je automaticky provedeno zvětšení o jednu.

Příklad použití

H1:before {
counter-increment: kapitola; /* zvětšení čísla kapitoly o jednu */
}

Podpora v prohlížečích

NN4 nepodporuje; Mozilla (Netscape 6+) částečná podpora; IE nepodporuje; Opera částečná podpora od verze 5; IE 5/MAC nepodporuje; Konqueror částečná podpora.

Nastavení čítače

K nastavení konkrétní hodnoty čítače lze použít vlastnost counter-reset. Jako její hodnota se používají čísla.

counter-reset
Hodnoty: <jméno> <celé číslo> | none | inherit
Výchozí hodnota: none
Ovlivňuje: všechny prvky
Dědičná: ne
Procenta: nelze používat
Média: všechna
  <jméno> identifikace čítače, jméno čítače
  <celé číslo> udává na jakou hodnotu se má čítač nastavit
  none hodnota čítače se nezmění
  inherit hodnota se dědí po rodičovském prvku

Tato vlastnost nastavuje čítač na konkrétní hodnotu. Pokud nespecifikujeme požadovanou hodnotu, nastaví se čítač na nulu. Bohužel i zde platí, to co jsem psal u vlastnosti counter-increment.

Příklad použití

H1:before {
counter-reset: podkapitola; /* nastaví číslo podkapitoly na 0 */
}

Podpora v prohlížečích

NN4 nepodporuje; Mozilla (Netscape 6+) částečná podpora; IE nepodporuje; Opera částečná podpora od verze 5; IE 5/MAC nepodporuje; Konqueror částečná podpora.

Definice uvozovek

Pro specifikaci vzhledu vnořovaných uvozovek (citací) lze použít vlastnost quotes. Jako její hodnota se používají znaky.

quotes
Hodnoty: <řetězec> <řetězec> | none | inherit
Výchozí hodnota: závisí na klientovi
Ovlivňuje: všechny prvky
Dědičná: ano
Procenta: nelze používat
Média: vizuální
  <řetězec> specifikuje znak pro levou uvozovku
  <řetězec> specifikuje znak pro pravou uvozovku
  none neviditelné uvozovky
  inherit hodnota se dědí po rodičovském prvku

Tato vlastnost nastavuje znaky pro otevírací a uzavírací uvozovky. Při definici je možné specifikovat několik dvojic těchto znaků navzájem oddělených čárkou. Při použití více dvojic platí pravidlo: dvojice uvedená jako první jsou hlavní uvozovky další dvojice znaků se použije uvnitř přecházejících uvozovek atd. Pomocí této vlastnosti je možné tedy specifikovat vzhled vnořovaných uvozovek.

Příklad použití

cite{
quotes: ' „ ' ' “ ',' ‚ ' ' ‘ ',' » ' ' « '; /* nastaví posloupnost uvozovek */
}

Podpora v prohlížečích

NN4 nepodporuje; Mozilla (Netscape 6+) částečná podpora; IE nepodporuje; Opera částečná podpora od verze 5; IE 5/MAC nepodporuje; Konqueror částečná podpora.

Komplexní příklad

h1:before {
  content: "Kapitola " counter(kapitola) ". ";
  counter-increment: kapitola; /* zvýší číslo kapitoly o jedna */
  counter-reset: podkapitola; /* nastaví číslo podkapitoly na nula */
}
h2:before {
  content: counter(kapitola) "." counter(podkapitola) " ";
  counter-increment: podkapitola;
}

Předcházející příklad by automaticky čísloval nadpisy první a druhé úrovně.

Závěr

Dnes jsem se seznámili vlastnostmi pro generování obsahu dokumentu pomocí kaskádových stylů. Většina těchto vlastností není podporována nejpoužívanějšími prohlížeči, což z nich dělá prakticky nepoužitelné vlastnosti. Doufejme, že v nových verzích prohlížečů se jejich podpora zlepší a tvůrci webů je budou moc používat, protože nabízejí skvělé možnosti.

Verze pro tisk

pridej.cz

 

DISKUZE

cislovani 22.12.2004 17:16 Petr Šigut




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