Списки

list-style-type

list-style-type - тип маркера.

Значения:

• disc - закрашенный кружок (по умолчанию для <ul>);
• circle - кружок с обводкой;
• square - квадрат;
• decimal - обычная нумерация (1,2,3…) для <ol>;
• decimal-leading-zero - числа с ведущим нулём (01,02,03…);
• upper-roman - заглавные римские цифры;
• lower-roman - строчные римские цифры;
• upper-alpha - заглавные буквы;
• lower-alpha - строчные буквы;
• none - убирает маркеры.

Например. Изменим файл index.html:

<ul class="custom-list-ul">
    <li>Пункт 1</li>
    <li>Пункт 2</li>
    <li>Пункт 3</li>
</ul>

<ol class="custom-list-ol">
    <li>Пункт 1</li>
    <li>Пункт 2</li>
    <li>Пункт 3</li>
</ol>

Изменим файл styles.css:

.custom-list-ul {
    list-style-type: square;
}

.custom-list-ol {
    list-style-type: decimal-leading-zero;
}

list-style-image

list-style-image - маркер-изображение.

Например. Изменим файл index.html:

<ol class="pepe-img">
    <li>Пункт 1</li>
    <li>Пункт 2</li>
    <li>Пункт 3</li>
    <li>Пункт 4</li>
</ol>

Изменим файл styles.css:

.pepe-img {
    list-style-image: url('/images/css/pepe-002-icon.png');
}

list-style-position

list-style-position - позиция маркера.

Например. Изменим файл index.html:

<ul>
    <li>Пункт 1</li>
    <li>Пункт 2</li>
    <li>Пункт 3</li>
</ul>

<ul class="custom-list">
    <li>Пункт 1</li>
    <li>Пункт 2</li>
    <li>Пункт 3</li>
</ul>

Изменим файл styles.css:

.custom-list {
    list-style-position: inside;
}

list-style

list-style - короткая запись для list-style-type, list-style-position и list-style-image.

Например. Изменим файл index.html:

<ul class="custom-list">
    <li>Пункт 1</li>
    <li>Пункт 2</li>
    <li>Пункт 3</li>
</ul>

Изменим файл styles.css:

.custom-list {
    list-style: square inside none;
}