Списъците в HTML биват два вида - подредени (номерирани) и неподредени (без номерация). CSS Ви дава възможност да променяте символите, числата или буквите, които се използват за отбелязване на отделните елементи на списъците. Можете дори да задавате свои картинки за символ на списък.

Вид на символ за списък

Вид на символ за списъчен елемент се задава със свойството list-style-type, а възможните стойности са следните:

Неподредени списъци

• none - без символ
• disc - запълнен кръг (това е символа по подразбиране)
• circle - незапълнен кръг
• square - квадрат

Подредени списъци

• none - без символ
• disc - запълнен кръг
• circle - незапълнен кръг
• square - квадрат
• decimal - числа с арабски цифри: 1, 2, 3...
• decimal-leading-zero - като decimal, но с допълваща нула за числата от 1 до 9, напр. 01, 02, 03
• lower-latin - малки латински букви:a, b, c, d, e...
• lower-greek - малки гръцки букви: α, β, γ, δ...
• lower-roman - числа с латински цифри, малки: i, ii, iii, iv, v...
• upper-latin - главни латински букви: A, B, C, D, E...
• upper-roman - числа с латински цифри, главни: I, II, III, IV, V...

Позициониране на списък

Позицията на списъка може да се управлява допълнително със свойството list-style-position. Възможните стойности са:

• outside - стойността по подразбиране
• inside - ще зададе допълнителен отстъп за списъка

Използване на собствено изображение

Вместо няколкото символа, които Ви предлагат браузърите, можете да използвате собствено изображение за отбелязване на списъчни елементи. Това се прави по следния начин:

1. ul {
2. list-style-image:url(kartinka.gif)
3. }

На мястото на kartinka.gif сложете името на файла, който ще използвате.

Зададена по този начин, картинката ще се показва с малко по-различна позиция в зависимост от използвания браузър. За да постигнете еднакъв стил, независим от браузъра, който ползват посетителите на страниците Ви, трябва да укажете фоновото изображение не за списъка като цяло, а за отделните му елементи:

• ul {
• list-style-type:none;
• padding:0px;
• margin:0px;
• }
• li {
• background-image:url(kartinka.gif);
• background-repeat:no-repeat;
• background-position:0px 5px;
• padding-left:17px;
• }

За списъка като цяло не се указва изображение (list-style-type:none), а свойствата padding и margin са със стойност 0, за да няма различия в резултата между браузърите.

За отделните списъчни елементи (li) е указано изображението, което разбира се не трябва да се повтаря (background-repeat:no-repeat). С background-position свойството точно можете да позиционирате изображението, а padding-left е необходимо, за да се отмести текста вдясно, иначе ще се получи наслагване на текст и изображение.

Съкратен запис на стил за списъци

Стиловете за списъците могат да бъдат задавани и със съкратен запис:

• ol {list-style: lower-latin inside:}
• ul {list-style: inside image-url(kartinka.gif);}

Стойностите на list-style се отделят помежду си само с интервал и се задават в реда type, position, image, но не е нужно всичките 3 да бъдат указвани едновременно.

Ако имате затруднения или въпроси по темата или пък просто искате да допълните нещо моля направете го в коментарите след урока!