Работа с маркерами списков ol на CSS

Маркеры списка ul также меняются с помощью свойства list-style-type. Давайте посмотрим, какие значения оно может принимать для списка ol.

Значение lower-roman

Значение lower-roman делает вместо обычных цифр римские:

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> ol { list-style-type: lower-roman; }

:

Значение upper-roman

Значение upper-roman делает заглавные римские цифры:

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> ol { list-style-type: upper-roman; }

:

Значение lower-roman

Значение lower-alpha делает нумерацию маленькими латинскими буквами:

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> ol { list-style-type: lower-alpha; }

:

Значение upper-alpha

Значение upper-alpha делает нумерацию большими латинскими буквами:

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> ol { list-style-type: upper-alpha; }

:

Значение lower-greek

Значение lower-greek делает нумерацию маленькими греческими буквами:

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> ol { list-style-type: lower-greek; }

:

Значение upper-greek

Значение upper-greek делает нумерацию большими греческими буквами:

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> ol { list-style-type: upper-greek; }

:

Значение decimal-leading-zero

Значение decimal-leading-zero делает нумерацию в виде чисел, но нулем впереди для цифр меньше десяти (01, 02, 03,...):

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> ol { list-style-type: decimal-leading-zero; }

:

Практические задачи

Повторите страницу по данному образцу:

Повторите страницу по данному образцу:

Повторите страницу по данному образцу: