Чрез CSS свойствата, показани в този урок, можете да стилизирате списъците. Тези указания се отнасят за HTML елементите ul и ol. Можете да настроите подредените и неупорядъчени списъци според вашите желания.
Общи указания за списъка
Свойството list-style е обобщение на следните три свойства:
• list-style-type
• list-style-position
• list-style-image
Чрез list-style можете да контролирате визуалното представяне на маркиращите символи пред изброяванията и тяхната отстъпка. Указанията се записват, разделени със запетая, и редът им не е от значение. Също така не е необходимо да се задава стойност за всяко свойство.
Един пример:
<!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>В браузъра това изглежда по следния начин:
Графични маркери
Можете да посочите собствена графика като маркер за означаване. За целта се използва свойството list-style-image. Възможни са следните стойности:
• url – името на файла и евентуалния път към графиката
• none – няма да се показва графика.
Един пример:
ul {
list-style-image: url(bullet.gif);
}
Внимавайте, че пътят към специфицираната URL графика е правилен.
Ако е посочен грешен път, браузърите трябва да се върнат към стандартната маркировка.
Позиция на маркерите за означаване
Чрез list-style-position се дефинира как да се отнасят номерирането или маркерите за означаване спрямо отстъпа.
• inside – първият ред е отстъпен достатъчно, за да маркерите и списъчните елементи да завършат ляво-вдясно.
• outside – маркерите са отляво на списъчния елемент.
В следващия пример се използват двете стойности inside и 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>Една списък вътре:</p>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<p>Една списък отвън:</p>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>Така можете непосредствено да видите разликите във въздействието на тези две стойности. 
Структуриране на външния вид на маркерите за означаване
Можете да определите явно външния вид на маркерите или означаващите символи. Също така можете да влияете на представянето на номерирани списъци. За целта се използва свойството list-style-type. Позволени варианти са следните стойности:
• decimal – за списъци ol: Номерирането 1, 2, 3 и т.н.
• lower-roman – за списъци ol: Номерирането i., ii., iii. и т.н.
• upper-roman – за списъци ol: Номерирането I., II., III., IV и т.н.
• lower-alpha или lower-latin – за списъци ol-: Номерирането I., II., III., IV. и т.н.
• upper-alpha или upper-latin – за списъци ol: Номерирането A., B., C., D. и т.н.
• disc – за списъци ul: Пълен кръг като булет
• circle – за списъци ul: Празен кръг като булет
• square – за списъци ul: Правоъгълник като булет
• none – нито маркер, нито номерация
• lower-greek – за списъци ol: Номерирането с гръцки букви
• hebrew – за списъци ol: Номерирането с ивритски букви
• decimal-leading-zero – за списъци ol: Номерирането с водеща нула 0: 01., 02., 03., 04. и т.н.
• cjk-ideographic – за списъци ol: Номериране с идеографски знаци
• hiragana – за списъци ol: Японско номериране (с малки букви)
• katakana – за списъци ol: Японско номериране (с главни букви)
• hiragana-iroha – за списъци ol: Японско номериране (с малки букви)
• katakana-iroha – за списъци ol: Японско номериране (с главни букви)
В следващия пример се използват някои от посочените варианти.
<!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>В браузъра се вижда следната картинка:
Броячи
С помощта на списъците ol може да нумерирате съдържание. В по-сложни приложения този вид нумерация обаче не е наистина удобен. CSS предлага алтернатива с броячи.
Показвам ви как може да се използва броячите.
Първо трябва да дефинирам нов брояч за елемента body.
body {
counter-reset: kapitel;
}Благодарение на тази дефиниция, броячът kapitel съществува в документа. Вече може да се използва този брояч.
h1 {
counter-increment: kapitel;
}
С помощта на показаната синтакса броячът се увеличава автоматично със стойност 1, всеки път когато се появи нов елемент h1. Проблемът е, че за момента все още нищо не се вижда от броенето. Това може лесно да се промени чрез използването на псевдоелементи.
h1::before {
content: counter(kapitel) ". ";
}
Пълното приложение може да изглежда по следния начин:
<!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>Капител</h1>
<h1>Капител</h1>
</body>
</html>И ето как изглежда резултатът в браузъра:
В примера се показва, как числители може да се използват за мощно броене.
content: counter(kapitel) ". "
Възможни са също влагани броене. За целта се дефинира броячът на мястото, където отново трябва да започне отначало.
h1 {
counter-increment: kapitel;
counter-reset: unterkapitel;
}Така в този пример броячът се нулира винаги, когато се появи нов елемент h1. Следващият пример показва типично приложение за влагани броячи.
<!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>Капител</h1>
<h2>Подкапител</h2>
<h2>Подкапител</h2>
<h2>Подкапител</h2>
<h1>Капител</h1>
<h2>Подкапител</h2>
<h2>Подкапител</h2>
<h2>Подкапител</h2>
</body>
</html>В браузъра цялото изглежда по следния начин:
Примерите показват колко функционални могат да бъдат броячите.
