Pomocou vlastností CSS uvedených v tomto návode je možné formátovať zoznamy. Údaje sa vzťahujú na HTML prvky ul a ol. Týmto spôsobom môžete prispôsobiť usporiadané a neusporiadané zoznamy podľa vašich želaní.
Všeobecné informácie o zozname
Vlastnosť list-style je súhrn troch nasledujúcich vlastností:
• list-style-type
• list-style-position
• list-style-image
Pomocou vlastnosti list-style je možné ovplyvniť spôsob grafickej reprezentácie bodov pred zoznamami a ich odsadenie. Uvedené údaje sa zapisujú oddelené čiarkou. Poradie nie je dôležité. Okrem toho nie je nutné pre každú vlastnosť uviesť hodnotu.
Príklad:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>PSD-Tutorials.de</title>
<style>
ul {
list-style:square;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>V prehliadači to vyzerá nasledovne:
Grafické odrážky
Môžete zadať vlastnú grafiku ako odrážky. Na to sa používa vlastnosť list-style-image. Možné sú tieto hodnoty:
• url – názov súboru a prípadne cesta k obrázku
• none – žiadny obrázok nie je zobrazený.
Príklad:
ul {
list-style-image: url(obrazok.gif);
}
Dôležité je, aby cesta k zadanému obrázku v URL bola správna.
Ak bola zadaná nesprávna cesta, prehliadače by mali použiť štandardnú odrážku.
Poloha odrážok
Pomocou list-style-position sa určuje, ako by sa mali číslovanie alebo odrážky odsunúť.
• inside – prvý riadok je odsunutý tak, aby odrážky a položky zoznamu boli zarovnané vľavo.
• outside – odrážka je vľavo od položky zoznamu.
V nasledujúcom príklade sa používajú obe hodnoty inside a outside.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8><
<title>PSD-Tutorials.de</title><
<style><
ul.a {
list-style-position:inside;
}
ul.b {
list-style-position:outside;
}
</style><
</head><
<body><
<p>Inside zoznam:</p><
<ul class="a"><
<li>HTML</li><
<li>CSS</li><
<li>JavaScript</li><
</ul><
<p>Outside zoznam:</p><
<ul class="b"><
<li>HTML</li><
<li>CSS</li><
<li>JavaScript</li><
</ul><
</body><
</html><Takto je možné okamžite vidieť, aký rozdiel majú tieto dve hodnoty v skutočnosti.
Vzhľad odrážok určiť
Pre odrážky alebo číslované odrážky môžete explicitne určiť vzhľad. Taktiež je možné ovplyvniť zobrazenie číslovaných zoznamov. Na to sa používa vlastnosť list-style-type. Pri tejto vlastnosti sú povolené nasledujúce hodnoty:
• decimal – pre ol-zoznamy: číslovanie 1, 2, 3 atď.
• lower-roman – pre ol-zoznamy: číslovanie i., ii., iii. atď.
• upper-roman – pre ol-zoznamy: číslovanie I., II., III., IV. atď.
• lower-alpha alebo lower-latin – pre ol-zoznamy: číslovanie I., II., III., IV. atď.
• upper-alpha alebo upper-latin – pre ol-zoznamy: číslovanie A., B., C., D. atď.
• disc – pre ul-zoznamy: vyplnený kruh ako symbol odrážky
• circle – pre ul-zoznamy: prázdny kruh ako symbol odrážky
• square – pre ul-zoznamy: obdĺžnik ako symbol odrážky
• none – žiadne symboly odrážky ani číslovanie
• lower-greek – pre ol-zoznamy: číslovanie gréckymi písmenami
• hebrew – pre ol-zoznamy: číslovanie hebrejskými písmenami
• decimal-leading-zero – pre ol-zoznamy: číslovanie s vedúcou nulou 0: 01., 02., 03., 04. atď.
• cjk-ideographic – pre ol-zoznamy: číslovanie s ideografickými znakmi
• hiragana – pre ol-zoznamy: japonské číslovanie (s malými písmenami)
• katakana – pre ol-zoznamy: japonské číslovanie (s veľkými písmenami)
• hiragana-iroha – pre ol-zoznamy: japonské číslovanie (s malými písmenami)
• katakana-iroha – pre ol-zoznamy: japonské číslovanie (s veľkými písmenami)
V nasledujúcom príklade sa používajú niektoré z uvedených variantov.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
ul.a {
list-style-type:circle;
}
ul.b {
list-style-type:square;
}
ol.c {
list-style-type:upper-roman;
}
ol.d {
list-style-type:lower-alpha;
}
</style>
</head>
<body>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol class="c">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol class="d">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>V prehliadači sa zobrazí nasledujúci obrázok:
Čítač
Pomocou ol-zoznamov je možné číslovať obsahy. Pri komplexnejších aplikáciách však táto forma číslovania nie je skutočne praktická. CSS ponúka alternatívu v podobe počítadiel.
Ďalej vám ukážem, ako sa dajú čítačky využívať.
Najprv si nastavím nový čítač pre prvok body.
body {
counter-reset: kapitel;
}Vďaka tomuto nastaveniu existuje čítač kapitel v dokumente. Tento čítač je teraz možné použiť.
h1 {
counter-increment: kapitel;
}
Prostredníctvom uvedenej syntaxe sa čítač automaticky zvyšuje o hodnotu 1, keď sa objaví nový prvok h1. Problémom je, že zatiaľ nie je vidieť žiadne číslovanie. To sa však dá jednoducho zmeniť pomocou použitia pseudoprvku.
h1::before {
content: counter(kapitel) ". ";
}
Plné použitie by mohlo vyzerať nasledovne:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
body {
counter-reset: kapitel;
}
h1 {
counter-increment: kapitel;
}
h1::before {
content: counter(kapitel) ". ";
}
</style>
</head>
<body>
<h1>Kapitola</h1>
<h1>Kapitola</h1>
</body>
</html>A tu je výsledok v prehliadači:
V uvedenom príklade sa číslo na začiatku prvku h1 vytlačuje pomocou ::before. Aby sa číslo nelepilo priamo na text nadpisu, za číslo sa vloží bodka a medzera.
content: counter(kapitel) ". "
Vnorené číslovanie je tiež možné. Na dosiahnutie toho sa čítač definuje v bode, kde sa má nakoniec začať odznova.
h1 {
counter-increment: kapitel;
counter-reset: unterkapitel;
}V tomto príklade sa čítač vždy nuluje pri zobrazení nového prvku h1. Nasledujúci príklad ukazuje typické použitie pre vnorené čítačky.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
body {
counter-reset:kapitel;
}
h1 {
counter-reset:unterkapitel;
}
h1:before {
counter-increment:kapitel;
content: counter(kapitel) ". ";
}
h2:before {
counter-increment:unterkapitel;
content:counter(kapitel) "." counter(unterkapitel) " ";
}
</style>
</head>
<body>
<h1>Kapitola</h1>
<h2>Podkapitola</h2>
<h2>Podkapitola</h2>
<h2>Podkapitola</h2>
<h1>Kapitola</h1>
<h2>Podkapitola</h2>
<h2>Podkapitola</h2>
<h2>Podkapitola</h2>
</body>
</html>V prehliadači to vyzerá nasledovne:
Uvedené príklady ukázali, akú silnú funkčnosť majú čítačky.
