Списки в css

В этом уроке мы рассмотрим, как применять списки CSS к внешнему виду сайту и поработаем с тремя основными свойствами.
Свойство list-style-type вид маркера
Свойство list-style-position положение маркера
Свойство list-style-image изображение вместо маркера

1) Свойство list-style-type нужно чтоб указать вид маркера которыми можно обозначать список например это могут быть цифры, буквы, кружочки, квадратики. И ещё мы вспомним работу с элементами <ol>></ol> – обозначающий упорядоченный список и <ul> </ul> – обозначающий неупорядоченный список. Смотрите ниже список основных обозначений списка в CSS.

• none – маркер списка отсутсвует
• upper-roman – большие римские цифры: I, II, III
• lower-roman – маленькие римские цифры: i, ii, iii
• decimal – обычные числа: 1,2,3
• upper-alpha – большие буквы: A, B, C
• ower-alpha – малые буквы: a,b,c
• square – закрашенный квадрат
• disk – закрашенный круг
• circle – не закрашенный круг

Пример HTML упорядоченного и неупорядоченного списка на веб странице.

<ol>
<li> Первый </li>
<li> Второй </li>
<li> Третий </li>
</ol>
<ul>
<li> Первый </li>
<li> Второй </li>
<li> Третий </li>
</ul>

Пример содержание файла style.css для свойства list-style-type.

ol {list-style-type:decimal;}
ul {list-style-type:circle;}

Обратите внимание в файле style.css которая показана выше мы указали, что упорядоченный список будет обозначаться обычными числами, а неупорядоченный маркируется в виде не закрашенных кружочков. Теперь смотрите ниже, где показано как это будет выглядеть в браузере.

1. Первый
2. Второй
3. Третий

• Первый
• Второй
• Третий

2) Свойство list-style-position указывает положение маркера в списке работает с двумя элементами, такими как inside – определяющее что маркер будет расположен внутри основного блока и outside – маркер расположен за пределами основного блока списка.
Пример HTML упорядоченного и неупорядоченного списка на веб странице.

<ol>
<li> Первый </li>
<li> Второй </li>
<li> Третий </li>
</ol>
<ul>
<li> Первый </li>
<li> Второй </li>
<li> Третий </li>
</ul>

Пример содержание файла style.css.

ol {
list-style-type:decimal;
list-style-position:inside;
}

ul {
list-style-type:disk;
list-style-position:outside;
}

Посмотрите ниже на скриншоте мы обвели красным границы основного блока для того чтоб нам легче было понять суть работы свойства list-style-position. Мы видим, что нумерация упорядоченного списка отображается обычными числами и находится внутри основного блока, а непорядочная отображается в виде закрашенного круга и находится за пределами границы блока как мы и указали в файле style.css.

3) Свойство list-style-image оно выводит изображение в списке вместо маркера. Обратите внимание, размер картинки имеет значение, оно влияет на вид списка. Ниже смотрите пример списка на веб странице и пример содержания файла style.css.
Пример HTML списка на веб странице.

<ul>
<li> Первый </li>
<li> Второй </li>
<li> Третий </li>
</ul>

Пример содержание файла style.css.

ul {list-style-image:url(image/marker.gif);}

Смотрите ниже на результат в браузере вместо маркера у нас выводится изображение.

Теперь вы умеете работать над списками в CSS на сайте, конечно всё это сразу может быть и не понятно, но со временем немного попрактикуетесь и всё станет на свои места.
Источник