Stylování seznamlze ukazuje vlastnosti CSS v tomto tutoriálu. Tyto údaje se vztahují k HTML prvkům ul a ol. Můžete tedy upravit uspořádané a neuspořádané seznamy dle svých přání.
Obecné informace o seznamu
Při list-style se jedná o souhrnný zápis těchto tří vlastností:
• list-style-type
• list-style-position
• list-style-image
Pomocí list-style lze ovlivnit grafický vzhled bodů před výčtovými seznamy a jejich odsazení. Uvedené údaje jsou odděleny čárkou a pořadí není důležité. Navíc není nutné určit hodnotu pro každou vlastnost.
Pří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 prohlížeči to vypadá takto:
Grafické výčetní značky
Můžete určit vlastní grafiku pro výčetní značky. K tomu slouží vlastnost list-style-image. Možné hodnoty jsou:
• url – název souboru a případně cesta k grafice
• none – nebude zobrazena žádná grafika.
Příklad:
ul {
list-style-image: url(bullet.gif);
}
Ujistěte se, že cesta k uvedené grafice v URL je správná.
Pokud je uvedena nesprávná cesta, prohlížeče by měly použít standardní výčetní značky.
Umístění výčetních značek
Pomocí list-style-position se určuje, jak by měly být odsazení číslačky nebo výčetních značek.
• inside – první řádek bude odsazen tak, aby se výčetní značky a položka seznamu zarovnaly doleva.
• outside – výčetní značka je vlevo od položky seznamu.
V následujícím příkladu jsou použity obě 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>Vnitřní seznam:</p>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<p>Venkovní seznam:</p>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>Tímto způsobem je možné ihned vidět, jaký rozdíl tyto dvě hodnoty skutečně mají.
Uzamčení vzhledu výčetních značek
Pro styl výčetních značek můžete explicitně určit vzhled. Stejně tak lze ovlivnit zobrazení číslovaných seznamů. Pro toto se používá vlastnost list-style-type. U této vlastnosti jsou povoleny následující hodnoty:
• decimal – pro ol-seznamy: číslování 1, 2, 3 atd.
• lower-roman – pro ol-seznamy: číslování i., ii., iii. atd.
• upper-roman – pro ol-seznamy: číslování I., II., III., IV. atd.
• lower-alpha nebo lower-latin – pro ol-seznamy: číslování I, II, III, IV. atd.
• upper-alpha nebo upper-latin – pro ol-seznamy: číslování A, B, C, D. atd.
• disc – pro ul-seznamy: vyplněné kruhové označení jako výčetní značky
• circle – pro ul-seznamy: prázdný kruh jako výčetní značka
• square – pro ul-seznamy: obdélník jako výčetní značka
• none – žádná výčetní značka ani číslování
• lower-greek – pro ol-seznamy: číslování s řeckými písmeny
• hebrew – pro ol-seznamy: číslování hebrejskými písmeny
• decimal-leading-zero – pro ol-seznamy: číslování s přední nulou 0: 01., 02., 03., 04. atd.
• cjk-ideographic – pro ol-seznamy: číslování s ideografickými znaky
• hiragana – pro ol-seznamy: japonské číslování (s malými písmeny)
• katakana – pro ol-seznamy: japonské číslování (s velkými písmeny)
• hiragana-iroha – pro ol-seznamy: japonské číslování (s malými písmeny)
• katakana-iroha – pro ol-seznamy: japonské číslování (s velkými písmeny)
V následujícím příkladu jsou použity některé uvedené varianty.
<!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 prohlížeči vypadá následující obrázek:
Počítadlo
Pomocí seznamů ol je možné číselně označovat obsah. V případě složitějších aplikací však tento způsob číslování není zcela praktický. CSS zde nabízí alternativu v podobě počítadel.
Níže vám ukážu, jak lze počítadla využít.
Nejprve si vytvořím nové počítadlo pro prvek body.
body {
counter-reset: kapitel;
}Díky této definici existuje v dokumentu počítadlo kapitel. Tohoto počítadla lze nyní využít.
h1 {
counter-increment: kapitel;
}
Díky uvedené syntaxi se počítadlo automaticky zvýší o hodnotu 1, když se objeví nový prvek h1. Problém spočívá v tom, že zatím není nic vidět. To lze jednoduše změnit pomocí použití pseudoelementů.
h1::before {
content: counter(kapitel) ". ";
}
Úplná aplikace by mohla vypadat následovně:
<!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 zde je výsledek v prohlížeči:
V ukázaném příkladu je pomocí ::before vypsáno příslušné číslo na začátku prvku h1. Aby se číslice nelepila přímo na text nadpisu, je za ní vložena tečka a mezera.
content: counter(kapitel) ". "
Možné jsou i vnořené počítání. K tomu se počítadlo definuje na místě, kde se nakonec opět restartuje.
h1 {
counter-increment: kapitel;
counter-reset: unterkapitel;
}V tomto příkladu bude počítadlo vždy resetováno, když se objeví nový prvek h1. Následující příklad ukazuje typické použití vnořených počítadel.
<!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 prohlížeči to vypadá takto:
Příklady ukázaly, jak moc užitečná jsou počítadla.
