Самый простой способ - использовать
нумерованный список ol.
- кошка
- собака
<ol>
<li>кошка</li>
<li>собака</li>
</ol>
Атрибут start установит номер, с которого начнётся список. Для li его аналог value.
- конь
- корова
<ol start="3">
<li>конь</li>
<li value="10">корова</li>
</ol>
Атрибут type определит вид маркера как для ol, так и для отдельного пункта li.
type="A" | type="a" | type="I" | type="i" | type="1" |
- пункт
- пункт
- пункт
| - пункт
- пункт
- пункт
| - пункт
- пункт
- пункт
| - пункт
- пункт
- пункт
| - пункт
- пункт
- пункт
|
Для
ненумерованного списка ul другие маркеры. Это условно, браузеры в настоящее время поддерживают любой вариант type для ul и ol.
type="disc" | type="circle" | type="square" |
| | |
Также можно воспользоваться свойством list-style к тегам, которым присвоено display: list-item. Первое его значение показывает вид маркера, а именно:
armenian | georgian | decimal | decimal-leading-zero | lower-greek |
- пункт
- пункт
- пункт
| - пункт
- пункт
- пункт
| - пункт
- пункт
- пункт
| - пункт
- пункт
- пункт
| - пункт
- пункт
- пункт
|
lower-alpha | upper-alpha | lower-roman | upper-roman | none |
- пункт
- пункт
- пункт
| - пункт
- пункт
- пункт
| - пункт
- пункт
- пункт
| - пункт
- пункт
- пункт
| - пункт
- пункт
- пункт
|
circle | disc | square | url(адрес_изо) |
- пункт
- пункт
- пункт
| - пункт
- пункт
- пункт
| - пункт
- пункт
- пункт
| - пункт
- пункт
- пункт
|
Второе определяет будет ли маркер вынесен за границы элемента. По умолчанию outside.
- пункт
- пункт
- пункт
<ol>
<li style="list-style: upper-latin outside;">пункт</li>
<li style="list-style: lower-latin inside;">пункт</li>
<li style="list-style: upper-latin;">пункт</li>
</ol>
А теперь коснёмся автоматической нумерации, сразу перейдя к образцу.
<style type="text/css">
.numer {
counter-reset: schetchik 1; /* задаётся имя и начальное значение отсчёта, по умолчанию 0 */
}
.numer dt {position: relative; padding-right: 20px; background: #f4f1e9; border-top:1px solid #666;}
.numer dt:after { /* это стиль числа, обязательно с :before или :after */
content: " - " counter(schetchik, upper-alpha) " - "; /* вставляется знак " - ", имя счётчика, определяется тип маркера и снова " - " */
counter-increment: schetchik 2; /* задаётся имя и значение, на которое будет увеличиваться счётчик, по умолчанию 1 */
position: absolute;
right: 0; top: 0;
color: #f4f1e9;
background: #666;
}
</style>
<dl class="numer">
<dt>Заголовок</dt>
<dd>Содержание</dd>
<dt>Заголовок</dt>
<dd>Содержание</dd>
<dt>Заголовок</dt>
<dd>Содержание</dd>
</dl>
- Зачем
- Единственная причина, по которой имеет смысл так усложнять - красивый вид счётчика. К нему можно применить любые стили, скажем, расположить справа.
- Пример
- Где можно применить? Например, в комментариях (практическое применение).
- Последствия
- К теме поведенческих факторов: на такой список обратишь внимание. Фоновые же изображения к каждой цыфре добавлять не экономично.
Сноска CSS
Автоматическая нумерация строк таблицы
Комментариев нет: