|
||||||||||||||||||||||||||||||||||||||||||||||||
Menu
Distributions (131)
Software (10844)
|
CSS (17.) - Generovaný obsahV tomto díle se seznámíme s vlastnostmi pro generování obsahu.
Generovaný textPokud 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 ;-) Podpora v prohlížečíchNN4 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čeK 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číchNN4 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čeK 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číchNN4 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 uvozovekPro 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číchNN4 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ěrDnes 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.
|
Search Software
Search Google
|
||||||||||||||||||||||||||||||||||||||||||||||
©Pavel Kysilka - 2003-2024 | maillinuxsoft.cz | Design: www.megadesign.cz |