Что такое маркированный список html

"маркированный список html" - что такое "маркированный список"? Живые примеры маркированных списков + маркировка своим знаком!

Подробно о маркированном списке

1. Видео о маркированном списке
2. Маркированный список по умолчанию.
3. Как сделать маркированный список по умолчанию.
4. Маркированный список квадратом.
5. Маркированный список диском.
6. Маркированный список любым знаком.
7. Сделать маркированный список картинкой.

Видео о маркированном списке

В видео рассказывается о том, как сделать маркированный список:

Маркированный список по умолчанию.

Для того, чтобы сделать маркированный список по умолчанию нам понадобится:

Начальный тег для создания маркированного списка тег <ul></ul>:

<ul></ul>

Внутренний тег- <li></li>, без которого - маркированный список невозможен:

<li></li>

Если никакие стили не перекрываются, то достаточно вывести вот таким образом маркированный список и вы получите маркированный список по умолчанию!

<ul>
  <li>Пример строки в маркированном списке по умолчанию - 1</li>
  <li>Пример строки в маркированном списке по умолчанию - 2</li>
</ul>

Пример маркированного спика по умолчанию

Здесь мы видим маркированный список в виде закрашенной точки впереди строки с текстом:

• Пример строки в маркированном списке по умолчанию - 1
• Пример строки в маркированном списке по умолчанию - 2

Как сделать маркированный список по умолчанию

Сверху вы увидели маркированный список по умолчанию.

Здесь нужно сделать отступление :

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



Потому, что кроме данного списка вы видите нумерацию - а нумерация затрагивает наши списки по умолчанию!

Восстановить стили маркированного списка по умолчанию!

Но мы хотим и нам нужно восстановить стили маркированного списка по умолчанию!

Для этого нам понадобится прописать отдельные стили:

Добавим нашему списку атрибут class со значением "example"

<ul class=example>
  <li>Пример строки в маркированном списке по умолчанию - 1</li>
  <li>Пример строки в маркированном списке по умолчанию - 2</li>
</ul>

Поскольку у нас на теге "li+before" висят счетчики "counter-increment" + "content", их надо выключить "unset"

ul.example li:before {
counter-increment: unset;
content: unset;
}


И добавить к нашему классу примеру свойство маркированного списка по умолчанию "list-style-type: disc;"

ul.example {
list-style-type: disc;
}


Выведем восстановленный маркированный список по умолчанию:

Как видим - наш список выглядит аналогично списку по умолчанию... выше и здесь...

• Пример строки в маркированном списке по умолчанию - 1
• Пример строки в маркированном списке по умолчанию - 2

Маркированный список квадратом.

Следующий маркированный список - это маркирование "квадратом":

square — квадратные маркеры.

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

Начальный тег для создания маркированного списка тег <ul></ul>:

<ul></ul>

Внутренний тег- <li></li>, без которого - маркированный список невозможен:

<li></li>

Если никакие стили не перекрываются, то достаточно вывести вот таким образом маркированный список и вы получите маркированный список по умолчанию!

<ul class="marker_square">
  <li>Пример строки в маркированном списке квадратом - 1</li>
  <li>Пример строки в маркированном списке квадратом - 2</li>
</ul>

Нам опять нужно уничтожить те свойства, которые существуют на странице, что мы делал в пункте "маркер по умолчанию" И добавить свойство маркера квадрата "list-style-type: square;"

ul.marker_square li:before {
counter-increment: unset;
content: unset;
}
ul.marker_square {
list-style-type: square;
}

И далее выведем наш маркированный список квадратом на странице:

Пример маркированного списка квадратом.

• Пример строки в маркированном списке квадратом - 1
• Пример строки в маркированном списке квадратом - 2

Маркированный список диском.

Далее рассмотрим маркированный список диском....

circle — маркеры в виде незакрашенного кружка;

Всё абсолютно аналогично предыдущему пункту лишь надо заменить

square на circle
Css :

ul.marker_circle li:before {
counter-increment: unset;
content: unset;
}
ul.marker_circle{
list-style-type: circle;
}

Html:

<ul class="marker_circle">
  <li>Пример строки в маркированном списке диском - 1</li>
  <li>Пример строки в маркированном списке диском - 2</li>
</ul>

Пример маркированного списка диском.

• Пример строки в маркированном списке диском - 1
• Пример строки в маркированном списке диском - 2

Маркированный список любым знаком.

Промаркируем список любым знаком!

Для этого вам нужно найти "css" обозначения для знаков, например :

Знак кавычки html : &#171;

Если я его выведу, как он есть прямо здесь, то мы получим:

«

Этот же знак в css :

\00AB

Создаем маркер у списка из своего знака:

Для того, что промаркировать список своим знаком, нам понадобится:

Html :
Список маркированный с классом(no_marker):
<ul class="no_marker">
  <li>Пример маркированного списка знаком - 1</li>
  <li>Пример маркированного списка знаком - 2</li>
</ul>
Убираем маркер у li заменяем "list-item"
li { display: list-item; }
На
ul.no_marker li {
display: block;
}

Добавляем псевдо элемент before, с некоторыми стилями...:
ul.no_marker li:before {
counter-increment: unset;
content: "\00AB";
color: red;
font-size: 20px;
margin: 0px 10px 0 -23px;
}

Html:

<ul class="no_marker">
  <li>Пример маркированного списка знаком - 1</li>
  <li>Пример маркированного списка знаком - 2</li>
</ul>

Css :

ul.no_marker li:before {

counter-increment: unset;

content: "\00AB";

color: red;

font-size: 20px;

margin: 0px 10px 0 -23px;

}

ul.no_marker li {

display: block;

}

Вывод примера маркированного списка знаком

• Пример маркированного списка знаком - 1
• Пример маркированного списка знаком - 2

Сделать маркированный список картинкой.

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

Нам потребуется картинка - возьмем первую попавшуюся! Пусть это будет вот такая звезда:

Если вам нужна эта картинка - нажмите по ней, чтобы загрузить!



Нам опять потребуется маркированный список:

+ Добавим ему новый класс - "marker_img"

<ul class="marker_img">
<li>Пример маркированного списка знаком - 1</li>
<li>Пример маркированного списка знаком - 2</li>
</ul>

Нам нужны стили для маркированного списка с картинкой:

Css для маркированного списка картинкой

<style>

ul.marker_img li {

  display:block;

}

ul.marker_img li:before {

  content: "";

  display: inline-block;

  height: 15px;

  width: 15px;

  background-image: url(https://dwweb.ru/__new_img/list/000_markirovannyiy_spisok.png);

  background-size: contain;

  background-repeat: no-repeat;

  background-color: unset;

  position: absolute;

  margin: 4px 0 0 -26px;

}

</style>

Пример маркированного списка картинкой png

• Пример маркированного списка картинкой png - 1
• Пример маркированного списка картинкой png - 2