Мой Справочник | HTML | Списки

Три основных свойства

• list-style-type: - тип маркеров
  circle | disc | decimal | upper-greek | upper-roman | none |

• list-style-position: - позиция маркеров
  outside* - будет выходить за границы контейнера, если будет убран padding,
  inside - маркер будет включен в размер <li>

• list-style-image: url(img/...) - маркер-картинка

Краткая запись list-style: list-style-type | list-style-position | list-style-image

Системные стили у списков в браузерах: padding-left: 40px; margin: 18px 0;

Ненумерованный список
<ul>     <li>Пункт №1</li>     <li>Пункт №2</li>     <li>Пункт №3</li> </ul>		Пункт №1 Пункт №2 Пункт №3	<ul> - ненумер. список <li> - элемент
<ul type="square">     <li type="circle">Пункт №1</li>     <li>Пункт №2</li>     <li>Пункт №3</li>     <li>Пункт №4</li>     <li type="disc">Пункт №5</li> </ul>		Пункт №1 Пункт №2 Пункт №3 Пункт №4 Пункт №5	маркеры: type="disc" - по ум. type="square" - квадрат type="circle" - круг CSS (маркеры): list-style: square outside url(...); list-style-type: list-style-type: upper-alpha; list-style-position: inside*, outside list-style-image: url(...); list-style: none; - без маркеров
Многоуровневый список
<ul>     <li>Пункт №1       <ul>         <li>Пункт №1.1</li>         <li>Пункт №1.2          <ul>           <li>Пункт №1.2.1</li>          </ul>         </li>       </ul>     <li>Пункт №2</li>     <li>Пункт №3</li> </ul>		Пункт №1 Пункт №1.1 Пункт №1.2 Пункт №1.2.1 Пункт №2 Пункт №3	У вложенных списков по ум. меняются маркеры
Нумерованный список
<ol>     <li>Пункт №1</li>     <li>Пункт №2</li>     <li>Пункт №3</li> </ol>		Пункт №1 Пункт №2 Пункт №3	<ol> - нумер. список <li> - элемент списка
<ol start="8" type="I">     <li>Пункт</li>     <li>Пункт</li>     <li>Пункт</li>     <li>Пункт</li>     <li>Пункт</li>     <li>Пункт</li> </ol>		Пункт Пункт Пункт Пункт Пункт Пункт	start="8" - начать с ... type="number" - цифры (по ум.) type="i" - мал. римские type="I" - бол. римские type="a" - мал. буквы type="A" - бол. буквы
Список определений
<dl>     <dt>Термин №1</dt>     <dd>Определение №1</dd>     <dt>Термин №2</dt>     <dd>Определение №2</dd>     <dt>Термин №3</dt>     <dd>Определение №3</dd> </dl>		Термин №1 Определение №1 Термин №2 Определение №2 Термин №3 Определение №3	<dl> - список опр. <dt> - термин <dd> - определение

Редактирование маркеров у ul (маркеры станут красными и поменяют вид)

ul > li {list-style-type: none;}
ul > li::before {
    content: '— ';
    color: red;
}

---

Редактирование цифр у ol

ol {
  counter-reset: myCounter;
  margin-bottom: 60px;
}
ol > li {list-style: none;}
ol > li::before {
  counter-increment: myCounter;
  content:counter(myCounter);
  color: #ff7301;
  font-weight: bold;
  display: inline-block;
  text-align: center;
  margin: 5px;
  margin-left: 0;
  font-size: 14px;
  line-height: 14px;
  width: 20px;
  height: 20px;
}

СПИСКИ часто используют для создания МЕНЮ

Раскрывающийся(интерактивный) список в товых тегах <details> и <summary>

При открытии у тега details появляется артрибут [open], и можно стилизовать это состояние detail[open] {...}.

Элемент <summary> это первый потомок элемента <details> для краткого описания раскрывающегося списка.

<details>
  <summary>Раскройте список </summary>
  <p>текст №1</p>
  <p>текст №2</p>
  <p>текст №3</p>
  <p>текст №4</p>
  <p>текст №5</p>
</details>

---

Раскройте список

текст №1

текст №2

текст №3

текст №4

текст №5