Zoznamy, generovaný obsah
V niektorých prípadoch je výhodné chcieť od prehliadača, aby sám naviac pridal obsah, ktorý nieje obsiahnutý priamo v strome HTML dokumentu – pri zoznamoch môžeme chcieť automatické číslovanie položiek, pridať text, obrázok .
Komplexné nastavenie parametra list-style:
list-style:[ <list-style-type> ¦¦ <list-style-image> ¦¦ <list-style-position> ] ¦ inherit
list-style-type: disc ¦ circle ¦ square ¦ decimal ¦ decimal-leading-zero ¦lower-roman ¦ upper-roman ¦ lower-greek ¦ lower-alpha ¦ lower-latin ¦ upper-alpha ¦ upper-latin ¦ hebrew ¦ armenian ¦ georgian ¦ cjk-ideographic ¦ hiragana ¦ katakana ¦ hiragana- iroha ¦ katakana-iroha ¦ none ¦ inherit – táto vlastnosť špecifikuje vzhľad značky položky zoznamu.
- disc – plný krúžok
- circle – prázdny krúžok
- square – štvorček
číselný systém:
- decimal – dekadické (arabské) čísla, začínajúc 1.
- decimal-leading-zero – dekadické, doplnená nulami na rovnaký počet číslic (napr.: 01, 02, 03, …, 98, 99).
- lower-roman – rímske čísla písané malými písmenami – i, ii, iii, iv, v, atd.
- upper-roman – rímske čísla písané veľkými písmenami – I, II, III, IV, V, atd.
- hebrew – tradičné hebrejské číslovanie
- georgian – tradičné georgiánske číslovanie (an, ban, gan, …, he, tan, in, in-an, …)
- armenian – tradiční arménske číslovanie
- cjk-ideographic – jednoduché ideografické čísla
- hiragana – a, i, u, e, o, ka, ki, …
- katakana – A, I, U, E, O, KA, KI, …
- hiragana-iroha – i, ro, ha, ni, ho, he, to, …
- katakana-iroha – I, RO, HA, NI, HO, HE, TO, …
abecedný systém:
- lower-latin alebo lower-alpha – malé písmena ASCII (a, b, c, … z)
- upper-latin alebo upper-alpha – veľké písmena ASCII (A, B, C, … Z)
- lower-greek – malé písmena gréckej abecedy – alpha, beta, gamma, …
list-style-image: url ¦ none ¦ inherit – Táto vlastnosť špecifikuje obrázok, ktorý sa má použiť ako odrážka v zozname.
list-style-position: inside ¦ outside ¦ inherit – Táto vlastnosť špecifikuje umiestnenie značky
- outside – značka je umiestnená von z hlavného boxu. Keď chceme umiestnenie špecifikovať presne, použijeme markers
- inside – značka je prvým inline boxom vo vnútri hlavného boxu, ktorý ostatní obsah obteká.
marker-offset: dĺžka ¦ auto ¦ none – Táto vlastnosť definuje vzdialenosť medzi najbližšími hranami boxu značky a jemu príslušnému hlavného boxu.
Príklad:
marker-offset: 3em;
}
…
<ol>
<li>Toto je první položka.</li>
<li>Toto je druhá položka.</li>
<li>Toto je třetí položka.</li>
</ol>
Zobrazí sa takto:
1. Toto je prvá položka.
2. Toto je druhá položka.
3. Toto je tretia položka.
Pseudo-prvky :before a :after – slúžia na vkladanie nového obsahu pred alebo za obsah daného prvku.
content: text ¦ url ¦ počítadlo ¦ attr(X) ¦ open-quote ¦ close-quote ¦ no-open-quote ¦ no-close-quote – sa v spojení :before a :after na generovanie obsah dokumentu.
- text – vloží sa textový reťazec napr. content: “textik”
- url – adrese externého zdroja ( obrázku ). napr. content: url(“/obrazok.jpg”)
- počítadlo – počítadla môžu byť špecifikované dvoma funkciami counter() a counters(). Pred a za obsah prvku sa vloží hodnota týchto funkcií. Funkcia counter má dve formy counter (názov) counter (názov, štýl ).
- attr(X) – vloží hodnotu atribútu X zformátovanú ako reťazec. Keď daný prvok tento atribút nemá, vloží sa prázdny reťazec.
- open-quote , close-quote – hodnoty sú nahradené vhodným textovým reťazcom vlastnosti quotes.
- no-open-quote, no-close-quote – vloží prázdny textový reťazec, ale inkrementuje alebo dekrementuje stupeň vkladaného obsahu.
quotes: ¦<string><string>+ ¦ none – definuje zpôsob zobrazenia úvodzoviek a to pre ľubovoľný počet vnorení.
- <string><string>+ – zoznam párov úvodzoviek pre hodnoty open-quote a close-quote vlastnosti content. Pár najviac vľavo definuje najvyššiu úroveň úvodzoviek, najviac vpravo úroveň najnižšiu. Klient musí použiť príslušný pár úvodzoviek podľa aktuálnej úrovne vnorenia.
- none – nevytvoria sa žiadne úvodzovky
Príklad:
Q:before { content:open-quote }
Q:after { content:close-quote }
…
textik <Q> textik</Q>
…
textik „textik”
Automatické číslovanie je v CSS riadené pomocou vlastností counter-increment a counter-reset spoločne s názvami počítadiel, ktoré sa používajú vo funkciách counter() a counters() vo vlastnosti content.
counter-increment: ¦[<identifikátor><string>?]+ ¦ none – táto vlastnosť obsahuje zoznam jedného alebo viacerých počítadiel (identifikátor) a hodnotu typu integer na ktorú sa má počítadlo nastaviť pri výskyte elementu. Implicitne sa nastaví 0.
counter-reset: ¦[<identifikátor><string>?]+ ¦ none – táto vlastnosť obsahuje zoznam jedného alebo viacerých počítadiel (identifikátor) a hodnotu typu integer o ktorú sa má počítadlo zmeniť pri výskyte elementu. Implicitne sa nastaví 1. Zadávať môžeme aj 0 a záporné čísla.
Príklad číslovania kapitol a podkapitol.
content: “Kapitola” counter(kapitola) “. “;
counter-increment: kapitola;
counter-reset: podkapitola;
} H2:before {
content: counter(kapitola) “.” counter(podkapitola) ” “;
counter-increment: podkapitola;
} <h1>hlavané jedlá </h1>
<h2>1.1 polievky </h2>
<h1>nápoje</h1>
zobrazí sa takto:
Kapitola 1. hlavné jedlá
1.1 polievky
Kapitola 2. napoje
Ak použijeme počítadlo v potomkovi daného prvku automaticky sa vytvorí nová inštancia počítadla. Počítanie pri vnorených počítadiel je založené na princípe, že každý prvok, ktorý má definované counter-reset vytvára nové počítadlo, ktoré využíva prvok sám, jeho predchádzajúci súrodenci (prvky na rovnakej úrovni) a jeho potomkovia (prvky vnorené).
Príklad vnoreného číslovania:
LI { display: block; }
LI:before { content: counter(item) “. “; counter-increment: item; }
| <ol> <li> item </li> <li> item </li> <ol> <li>item </li> <li>item </li> <li>item </li> <ol> <li>item </li> </ol> <ol> <li>item </li> </ol> <li>item </li> </ol> <li>item </li> <li>item </li> </ol> <ol> <li>item </li> <li>item </li> </ol> |
<!– (set item[0] to 0 –> <!– increment item[0] (= 1) –> <!– increment item[0] (= 2) –> <!– (set item[1] to 0 –> <!– increment item[1] (= 1) –> <!– increment item[1] (= 2) –> <!– increment item[1] (= 3) –> <!– (set item[2] to 0 –> <!– increment item[2] (= 1) –> <!– ) –> <!– (set item[3] to 0 –> <!– increment item[3] (= 1) –> <!– ) –> <!– increment item[1] (= 4) –> <!– ) –> <!– increment item[0] (= 3) –> <!– increment item[0] (= 4) –> <!– ) –> <!– (reset item[4] to 0 –> <!– increment item[4] (= 1) –> <!– increment item[4] (= 2) –> <!– ) –> |
Značka vznikne nastavením vlastnosti display na hodnotu ‘marker’ v pseudo-prvkoch :before a :after. Značky (markers) niesu vo vnútri hlavného boxu (ako keď majú prvky :before a :after nastavené display:block alebo inline), ale vytvárajú vlastný, nezávislý box vo vnútri hlavného boxu. Značky sú formátované ako riadky. Majú oblasť padding a border, ale nemajú margin. Výška boxu je zadaná vlastnosťou line-height, zvislé zarovnanie vlastnosťou vertical-align. Vlastnosti pozadia sa aplikujú iba na hlavní box, pozadie boxu značky je priehľadné. Keď má nejaký prvok už definovanou značku pomocou display:list-item, značka definovaná v :before či :after ju nahradí.
orphans: integer¦ inherit – určuje minimálny počet riadkov ktoré môžu ostať na spodnom okraji stránky – implicitna hodnota je 2
widows: integer¦ inherit – určuje, koľko riadkov môže ostať osamotených na začiatku strany – implicitne 2
page-break-after: auto ¦ always ¦ avoid ¦ left ¦ right ¦ inherit – určuje, či sa zalomenie stránky môže vložiť za prvkom v ktorom je tento štýl definovaný
page-break-before: auto ¦ always ¦ avoid ¦ left ¦ right ¦ inherit – určuje, či sa zalomenie stránky môže vložiť pre prvkom v ktorom je tento štýl definovaný
page-break-inside: avoid ¦ auto ¦ inherit – určuje, či sa zalomenie stránky môže vložiť do vnútra prvkvu