Списки ul и ol

Элемент HTML  <ol> или нумерованый список  представляет упорядоченный список элементов - как правило, отображается в виде нумерованного списка.

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

Пример вложения списков:

<ol>
  <li>нумерованый список</li>
  <li>
    <ul>
      <li>маркерованый список</li>
      <li>маркерованый список</li>
      <li>маркерованый список</li>
    </ul>
  </li> 
  <li>нумерованый список</li>
</ol>

на практике маркеры и нумерацию как-правило скрывают, и используют списки для разных меню, баянов, вкладок.

Как задать стиля для нумерованого <ol> и  или маркерованого <ul> списка?

Для этого существует три параметра которые определяю форму и положение маркера или номера:

• list-style-type
• list-style-position
• list-style-image

Ну и давайте разберем эти три способа отображения маркера:

list-style-type - определяет вид маркера:

list-style-type: disc;    /* диск */
list-style-type: circle;  /* круг */
list-style-type: square;  /* квадрат */
list-style-type: decimal; /* десятичный */
list-style-type: '\1F44D'; /* вложить значение шрифтовой иконки или сымвола */
list-style-type: none; /* СКРЫТЬ маркер */

------
list-style-type: custom-counter-style;  /* тип счетчика  !пока только в планах html */  

смотрти поддержку всех видов маркеров на странице MDN

list-style-position - Определяет где должен быть маркер, в пределах списка или за его границей.

list-style-position: inside; /* в границах списка */
list-style-position: outside; /* за границами списка */

list-style-image - вместо стандартного маркера можно сделать вывод картинки.

list-style-image: url("../images/rocket.svg");
list-style-image: none;

---

Как задать вид цифры в нумерованом списке <ol>?

• type - устанавливает вид маркера списка.
• reversed - порядок нумерация
• start - значение первого числового маркера.

TYPE

<ol type="A">
  <li>запись один</li>
  <li>запись два</li>
  <li>запись три</li>
</ol>
* покажет вот такой список:
A. запись один
B. запись два
C. запись три

Возможны такие выводи цифр:

• a - это строчные буквы
• A - это заглавные буквы
• i - это строчные римские цифры
• I - это заглавные римские цифры
• 1 - это цифры

reversed - меняет порядок нумерации на противоположный

<ol reversed>
  <li>запись один</li>
  <li>запись два</li>
  <li>запись три</li>
</ol>
* покажет вот такой список:
 запись три
 запись два
 запись один

start  - устанавливает номер, с которого будет начинаться нумерованный список, атрибут start одинаково работает и с римскими и с арабскими числами.

  <ol type="I" start="4">
    <li>шарнир</li>
    <li>болт</li>
    <li>гайка</li>
  </ol>
*браузер сделает такой вывод
IV. шарнир
V. болт
VI. гайка

А уже все другие параметры внешнего вида списков определяются в стилях CSS

- автоматическая нумерация списка на css