Название

Изменение внешнего вида маркеров списка. CSS.

По умолчанию, маркированные списки, которые размещаются на веб-страницах имеют вот такой стандартный маркер:

03-04-2014 5-29-59

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

Эти маркеры можно довольно просто менять с помощью технологии CSS. В этой небольшой заметке я хочу продемонстрировать, как это можно делать.

Итак, за внешний вид элементов списка отвечает специальное свойство CSS:

list-style-type: circle | disc | square | armenian | decimal | decimal-leading-zero | georgian | lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-latin | upper-roman | none | inherit

Значений у этого свойства довольно много. Что обозначает каждое из них, можете посмотреть в этой таблице:

02-04-2014 19-55-24

Также, ниже находится описание этого свойства в официальной спецификации CSS:

http://www.w3.org/TR/2011/REC-CSS2-20110607/generate.html#propdef-list-style-type

Ну и несколько примеров на практике, чтобы стало более понятно, как это работает.

HTML:

<ul class="list1">
 <li>Элемент списка 1</li>
 <li>Элемент списка 2</li>
 <li>Элемент списка 3</li>
</ul>

CSS:

.list1 li {list-style-type:armenian;}


HTML:

<ul class="list2">
 <li>Элемент списка 1</li>
 <li>Элемент списка 2</li>
 <li>Элемент списка 3</li>
</ul>

CSS:

.list2 li {list-style-type:lower-alpha;}

HTML:

<ul class="list3">
 <li>Элемент списка 1</li>
 <li>Элемент списка 2</li>
 <li>Элемент списка 3</li>
</ul>

CSS:

.list3 li {list-style-type:decimal;}

В целом, ничего сложного нет. Попробуйте.

Назад Далее