Давайте рассмотрим основные свойства CSS, предопределяющие внешний вид списков.

Все эти свойства применяются как к упорядоченным, так и к неупорядоченным спискам.

Свойство LIST-STYLE-TYPE


Определяет каким будет вид маркера элементов списка: в виде букв, цифр, кружочков и т.д. Может принимать такие значения:

disk- маркер, имеющий закрашенный круг;
circle - маркер с незакрашенным кругом;
square - маркер в виде закрашенного квадрата;
decimal - арабские числа (1,2,3, и т. д.);
upper-roman - большие римские цифры ( I, II, III, IV, V) ;
lower-roman - маленькие римские цифры типа.
upper-alpha - большие буквы (A, B, C, D);
lower-alpha - малые буквы типа (a,b,c,d);
none - маркер списка отсутствует;

Например, можно переделать упорядоченный список в неупорядоченный. Для этого элементу OL (упорядоченный список) зададим свойство circle а элементу UL (неупорядоченный) - upper-alpha;

ol {list-style-type:circle;}
ul {list-style-type:upper-alpha;}

Свойство LIST-STYLE-POSITION


Данное свойство обозначает положение маркера. Бывает два значения:
outside - снаружи основного блока элементов списка;
inside - внутри основного блока списка.

К примеру, если мысленно обвести основной блок списка, то мы увидим:

LIST-STYLE-POSITION

Это устаревшее свойство и не факт что будет работать в новых версиях браузеров.

Свойство LIST-STYLE-IMAGE


Одно из самым интересных свойств в списках, позволяющее поставить вместо маркера любое изображение. Для этого указывается url, затем в круглых скобках путь к изображению. Вот так это выглядит:

ul {list-style-image: url(/kartinka.jpg);}

Запомните, url(kartinka.jpg) указывает путь к изображению kartinka.jpg, который лежит в той самой папке, что и css -файл.

Сокращенная форма LIST-STYLE


Данное свойство необходимо, если надо записать перечисленные выше свойства более компактно

Например, все это:

ul {
list-style-type:decimal;
list-style-position: outside;
list-style-image: url(/kartinka.jpg);
}

Можно записать сокращенно:

ul {list-style:decimal outside url(kartinka.jpg) }

Свойства указывают через пробел в неважно какой последовательности.

Если какое-либо свойство пропустить, ему будет присвоено значение по умолчанию.

Следующая - Оформить ссылку с помощью CSS

Предыдущая - Оформление текста в CSS