Как стилизовать списки с помощью CSS

Обзор HTML-списков

В HTML есть два основных типа списков - упорядоченные и неупорядоченные .

В упорядоченных списках (

    ), важен порядок элементов списка. Элементы могут отображаться в порядке номеров, римских цифр, буквенно-цифровых знаков или маркеров другого типа. Маркер по умолчанию для упорядоченных списков - это число (или decimal):

    В неупорядоченных списках (

      ) порядок элементов списка не имеет значения. Элементы отображаются в формате маркера. Маркер по умолчанию для неупорядоченных списков - круглая точка или disc.

      Каждый элемент списка в упорядоченном или неупорядоченном списке создается с помощью тега.

      Специфичные для списка стили

      Есть три общих свойства специфичны для укладки и стайлинга списков: list-style-type, list-style-positionи list-style-image. Существует также сокращенное свойство, которое включает все три.

      list-style-type

      Маркеры (или маркеры), которые появляются в упорядоченных и неупорядоченных списках, могут быть стилизованы по-разному. Свойство CSS для стилизации типа маркера - list-style-type. Значение по умолчанию list-style-typeдля упорядоченного списка - decimal, тогда как значение по умолчанию для неупорядоченного списка - disc.

      Пример упорядоченного списка:

      /* css */ ol { list-style-type: upper-roman; }

      Пример неупорядоченного списка:

      /* css */ ul { list-style-type: square; }

      Пример без маркера:

      /* css */ ul { list-style-type: none; }

      Допустимые значения для list-style-typeсвойства включают:

      Неупорядоченный:

      • диск (по умолчанию )
      • круг
      • площадь

      Упорядоченный:

      • десятичный (по умолчанию )
      • десятичный ведущий ноль
      • нижний римский
      • верхний римский
      • нижнегреческий
      • нижнелатинский
      • верхнелатинский
      • армянский
      • грузинский
      • нижняя альфа
      • верхняя альфа

      Другие:

      • никто

      Примечание: все значения свойств, перечисленные выше, могут использоваться для стилизации как упорядоченных, так и неупорядоченных списков (например, упорядоченный список с squareмаркерами списка).

      list-style-position

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

      Поместите маркер outsideэлемента элемента списка, и все текстовые строки и подстроки каждого элемента списка будут выровнены по вертикали:

      /* css */ ul { list-style-position: outside; /* default */ }

      Поместите маркер inside, и первая текстовая строка каждого элемента списка будет иметь отступ, чтобы освободить место для маркера. Любые подстроки одного и того же элемента списка будут выровнены по маркеру, а не по первой текстовой строке:

      /* css */ ul { list-style-position: inside; }

      list-style-image

      list-style-imageСвойство принимает URL изображения вместо списка маркеров. Значение по умолчанию для этого свойства - none.

      /* css */ ul { list-style-image: url(//url-to-image); }

      list-style Shorthand

      list-style is a shorthand property for the three style properties listed above. The order of values list-style accepts is list-style-type, list-style-position, and list-style-image. If any value is omitted, the default value for that property will be used.

      Example:

      /* css */ ul { list-style: circle inside none; }

      More List-Specific Styling

      Ordered list tags also accept attributes that control the flow, count, or specific marker values of its list items. These include the start, reversed, and value attributes. See the MDN resources listed below for further details.

      General Styling

      List content can be styled just like other p or div elements. color, font-family, margin, padding, or border are just a few examples of properties that can be added to either the ul, ol, or li elements.

      Note that any styles added to the ul or ol element will affect the entire list. Styles added directly to the li elements will affect the individual list items. In the example below, the border and background-color properties are styled differently between the list and list item elements:

      /* css */ ul { list-style-type: circle; border: 2px solid blue; background-color: lightblue; } li { margin: 5px; background-color: lightyellow; }

      List Spacing

      You may notice extra spacing in front of the list items when list-style-type is set to none. Setting padding to 0 (or whatever spacing is preferred) on the list element will override this default padding.

      /* css */ ul { list-style: none; padding: 0; } li { padding: 5px 10px; background-color: #EEEEEE; border: 1px solid #DDDDDD; }

      Sources:

      The links below were referenced in compiling information found in this article. Please visit them for further details about this topic.

      More Information:

      MDN - Styling Lists

      W3Schools - CSS Lists

      CSS Tricks - list-style