В работе со списками удобно использовать правило сокращенной записи:

Возможные значения свойства list-style-type для отображения маркера можно посмотреть в следующей таблице:

Возможные значения свойства list-style-type для списков

NN	Значение	Пояснение	Для IE	Пример
1	none	Маркер отсутствует		* 01 * * 02 * * 03 *
2	circle	Маркер в виде круга		* 01 * * 02 * * 03 *
3	disc	Маркер в виде заполненного круга, это значение по умолчанию.		* 01 * * 02 * * 03 *
4	square	Маркер в виде квадрата		* 01 * * 02 * * 03 *
5	armenian	Армянская нумерация.		* 01 * * 02 * * 03 * * 04 * * 05 * * 06 * * 07 * * 08 * * 09 * * 10 *
6	cjk-ideographic	cjk-ideographic		* 01 * * 02 * * 03 * * 04 * * 05 * * 06 * * 07 * * 08 * * 09 * * 10 *
7	decimal	Маркер а виде цифры.		* 01 * * 02 * * 03 * * 04 * * 05 * * 06 * * 07 * * 08 * * 09 * * 10 *
8	decimal-leading-zero	Цифры с нулем перед началом (т.е. ноль ставится для чисел, которые меньше 10)		* 01 * * 02 * * 03 * * 04 * * 05 * * 06 * * 07 * * 08 * * 09 * * 10 *
9	georgian	Грузинская нумерация.		* 01 * * 02 * * 03 * * 04 * * 05 * * 06 * * 07 * * 08 * * 09 * * 10 *
10	hebrew	Еврейская нумерация		* 01 * * 02 * * 03 * * 04 * * 05 * * 06 * * 07 * * 08 * * 09 * * 10 *
11	hiragana	Японская нумерация Хирагана		* 01 * * 02 * * 03 * * 04 * * 05 * * 06 * * 07 * * 08 * * 09 * * 10 *
12	hiragana-iroha	Японская нумерация Хирагана (старая)		* 01 * * 02 * * 03 * * 04 * * 05 * * 06 * * 07 * * 08 * * 09 * * 10 *
13	katakana	Японская нумерация Катакана		* 01 * * 02 * * 03 * * 04 * * 05 * * 06 * * 07 * * 08 * * 09 * * 10 *
14	katagana-iroha	Японская нумерация Катакана (старая)		* 01 * * 02 * * 03 * * 04 * * 05 * * 06 * * 07 * * 08 * * 09 * * 10 *
15	lower-alpha	Альфа, нижний регистр.		* 01 * * 02 * * 03 * * 04 * * 05 * * 06 * * 07 * * 08 * * 09 * * 10 *
16	lower-greek	Греческий алфавит, нижний регистр.		* 01 * * 02 * * 03 * * 04 * * 05 * * 06 * * 07 * * 08 * * 09 * * 10 *
17	lower-latin	Латынь, нижний регистр.		* 01 * * 02 * * 03 * * 04 * * 05 * * 06 * * 07 * * 08 * * 09 * * 10 *
18	lower-roman	Римские цифры, нижний регистр.		* 01 * * 02 * * 03 * * 04 * * 05 * * 06 * * 07 * * 08 * * 09 * * 10 *
19	upper-alpha	Альфа, верхний регистр.		* 01 * * 02 * * 03 * * 04 * * 05 * * 06 * * 07 * * 08 * * 09 * * 10 *
20	upper-latin	Латынь, верхний регистр.		* 01 * * 02 * * 03 * * 04 * * 05 * * 06 * * 07 * * 08 * * 09 * * 10 *
21	upper-roman	Римские цифры, верхний регистр.		* 01 * * 02 * * 03 * * 04 * * 05 * * 06 * * 07 * * 08 * * 09 * * 10 *
22	inherit	Значение наследуется от элемента родителя.		* 01 * * 02 * * 03 * * 04 * * 05 * * 06 * * 07 * * 08 * * 09 * * 10 *

Значения по умолчанию: "disc" для <ul> и "decimal" для <ol>.

Для позиционирования маркеров используются значения inside и outside (это значение по умолчанию) свойства list-style-position:

• Маркер за пределами области значений списка.
• Без определения значения list-style-position

• Маркер за пределами области значений списка.
• list-style-position:outside;
• Это значение по умолчанию.

• Маркер в пределах области значений списка.
• list-style-position:inside;

Для использования графических файлов для маркеров используются значения имени файла вместе с путем к нему свойства list-style-image:

• Для маркеров данного списка используем файл sqpurple.gif
• list-style-image:url('sqpurple.gif');

• Для маркеров данного списка используем файл arrow.png
• list-style-image:url('arrow.png');

• Для маркеров данного списка используем файл heart24-16x16.png
• list-style-image:url('heart24-16x16.png');

• Для маркеров данного списка используем файл no_file.gif
• list-style-image:url('no_file.gif');
• Т.о., мы видим, если требуемый файл отсутствует, использует маркер по умолчанию.

Обратите внимание, что если одновременно используется свойство list-style-type и свойство list-style-image, например:
list-style: upper-latin url('sqpurple.gif');
то будет сделана попытка использовать именно url('sqpurple.gif'), т.к. свойство list-style-image имеет более высокий приоритет, чем list-style-type. Но если файл sqpurple.gif отсутствует, то будет использовано свойство list-style-type:upper-latin;

Теперь созданные классы в файле стилей CSS мы можем использовать в нашем учебном тестовом примере.
css_015_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_015_001.zip ← скачайте пример, чтобы установить на свой сайт...