133 0  

Списки ul и ol

Оба элемента <ol> и <ul> представляют собой список элементов. Они отличаются тем, что в элементе <ol> соблюдается числовой порядок со смыслом.

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


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


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

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

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

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


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

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

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

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 */  


am смотрти поддержку всех видов маркеров на странице 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. гайка


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


Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2020