Главная » Языки программирования

List item html css

На чтение 9 мин
Содержание
  1. List item html css
  2. Examples
  3. Ordered list
  4. Result
  5. Ordered list with a custom value
  6. Result
  7. Unordered list
  8. Result
  9. Technical summary
  10. Specifications
  11. Browser compatibility
  12. See also
  13. Found a content problem with this page?
  14. MDN
  15. Support
  16. Our communities
  17. Developers
  18. CSS Lists
  19. Example
  20. An Image as The List Item Marker
  21. Example
  22. Position The List Item Markers
  23. Example
  24. Remove Default Settings
  25. Example
  26. List — Shorthand property
  27. Example
  28. Styling List With Colors
  29. Example
  30. More Examples
  31. All CSS List Properties
  32. Полное руководство по спискам в HTML и CSS
  33. Что такое списки
  34. Списки в HTML
  35. Виды списков
  36. Что такое упорядоченный список?
  37. Значения по умолчанию:
  38. Что такое неупорядоченный список?
  39. Значения по умолчанию:
  40. Что такое список определений?
  41. Что такое вложенные списки?
  42. Стиль списка
  43. list-style-type
  44. list-style-image
  45. list-style-position
  46. А теперь давайте поиграем с цветами списка
  47. Расцвеченный маркированный список
  48. Расцвеченный нумерованный список

List item html css

This element includes the global attributes.

type Deprecated Non-standard

This character attribute indicates the numbering type:

  • a : lowercase letters
  • A : uppercase letters
  • i : lowercase Roman numerals
  • I : uppercase Roman numerals
  • 1 : numbers

This type overrides the one used by its parent element, if any.

Note: This attribute has been deprecated; use the CSS list-style-type property instead.

Examples

For more detailed examples, see the and pages.

Ordered list

ol> li>first itemli> li>second itemli> li>third itemli> ol>

Result

Ordered list with a custom value

ol type="I"> li value="3">third itemli> li>fourth itemli> li>fifth itemli> ol>

Result

Unordered list

ul> li>first itemli> li>second itemli> li>third itemli> ul>

Result

Technical summary

Content categories None.
Permitted content Flow content.
Tag omission The end tag can be omitted if the list item is immediately followed by another element, or if there is no more content in its parent element.
Permitted parents An , , or element. Though not a conforming usage, the obsolete can also be a parent.
Implicit ARIA role listitem when child of an ol , ul or menu
Permitted ARIA roles menuitem , menuitemcheckbox , menuitemradio , option , none , presentation , radio , separator , tab , treeitem
DOM interface HTMLLIElement

Specifications

Browser compatibility

BCD tables only load in the browser

See also

  • Other list-related HTML Elements: , , , and the obsolete ;
  • CSS properties that may be specially useful to style the
  • element:
    • the list-style property, to choose the way the ordinal is displayed,
    • CSS counters, to handle complex nested lists,
    • the margin property, to control the indent of the list item.

    Found a content problem with this page?

    This page was last modified on Jul 17, 2023 by MDN contributors.

    Your blueprint for a better internet.

    MDN

    Support

    Our communities

    Developers

    Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
    Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

    Источник

    CSS Lists

    The list-style-type property specifies the type of list item marker.

    The following example shows some of the available list item markers:

    Example

    ol.c list-style-type: upper-roman;
    >

    ol.d list-style-type: lower-alpha;
    >

    Note: Some of the values are for unordered lists, and some for ordered lists.

    An Image as The List Item Marker

    The list-style-image property specifies an image as the list item marker:

    Example

    Position The List Item Markers

    The list-style-position property specifies the position of the list-item markers (bullet points).

    «list-style-position: outside;» means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically. This is default:

    «list-style-position: inside;» means that the bullet points will be inside the list item. As it is part of the list item, it will be part of the text and push the text at the start:

    Example

    ul.a <
    list-style-position: outside;
    >

    ul.b list-style-position: inside;
    >

    Remove Default Settings

    Example

    List — Shorthand property

    The list-style property is a shorthand property. It is used to set all the list properties in one declaration:

    Example

    When using the shorthand property, the order of the property values are:

    • list-style-type (if a list-style-image is specified, the value of this property will be displayed if the image for some reason cannot be displayed)
    • list-style-position (specifies whether the list-item markers should appear inside or outside the content flow)
    • list-style-image (specifies an image as the list item marker)

    If one of the property values above is missing, the default value for the missing property will be inserted, if any.

    Styling List With Colors

    We can also style lists with colors, to make them look a little more interesting.

      or
      tag, affects the entire list, while properties added to the
      tag will affect the individual list items:

    Example

    ol <
    background: #ff9999;
    padding: 20px;
    >

    ul background: #3399ff;
    padding: 20px;
    >

    ol li background: #ffe5e5;
    color: darkred;
    padding: 5px;
    margin-left: 35px;
    >

    ul li background: #cce5ff;
    color: darkblue;
    margin: 5px;
    >

    More Examples

    Customized list with a red left border
    This example demonstrates how to create a list with a red left border.

    Full-width bordered list
    This example demonstrates how to create a bordered list without bullets.

    All the different list-item markers for lists
    This example demonstrates all the different list-item markers in CSS.

    All CSS List Properties

    Property Description
    list-style Sets all the properties for a list in one declaration
    list-style-image Specifies an image as the list-item marker
    list-style-position Specifies the position of the list-item markers (bullet points)
    list-style-type Specifies the type of list-item marker

    Источник

    Полное руководство по спискам в HTML и CSS

    Подпишись на наш телеграм-канал TechRocks WEB-разработка?

    Перевод статьи «A complete guide about lists in HTML and CSS».

    Список в html

    Что такое списки

    Список это способ представления набора данных или информации. Таким образом этот набор данных становится более понятным, чем при любой другой форме изложения. Например, список покупок выглядит куда понятнее, если имеет вид именно списка, а не простого абзаца, где наименования идут просто через запятую.

    Списки в HTML

    Если вы хотите представлять на своих веб-страницах какие-то данные, являющиеся наборами чего-либо, список является прекрасным вариантом оформления. Благодаря спискам пользователи легче воспринимают информацию.

    Виды списков

    В HTML списки бывают трех видов:

    Что такое упорядоченный список?

    Упорядоченный список это набор элементов, представленных в определенном порядке. Форма упорядоченного списка лучше всего подходит для представления наборов данных, где порядок элементов имеет значение.

    Примерами могут послужить кулинарные рецепты, где действия следует выполнять в определенном порядке, или списки инструкций простой программы.

    Подобные списки делают упорядоченными, потому что без нужной последовательности изложения эта информация теряет свой смысл. Упорядоченные списки также называют нумерованными.

    Для создания упорядоченных списков используется тег (ordered list – «упорядоченный список»), а для каждого из его элементов – тег (list – «список»).

    1. Налейте воду в кастрюлю.
    2. Добавьте сахар, чайные листья и специи.
    3. Доведите до кипения и подержите на медленном огне около минуты.
    4. Добавьте молоко.
    5. Доведите до кипения и подержите на медленном огне 3-5 минут.
    6. Процедите чай и перелейте его в чайник.
    1. Налейте воду в кастрюлю.
    2. Добавьте сахар, чайные листья и специи.
    3. Доведите до кипения и подержите на медленном огне около минуты.
    4. Добавьте молоко.
    5. Доведите до кипения и подержите на медленном огне 3-5 минут.
    6. Процедите чай и перелейте его в чайник.

    Значения по умолчанию:

    По умолчанию пункты списка обозначаются арабскими цифрами.

    Это можно изменить, используя разные значения CSS-свойства list-style-type.

    list-style-type: upper-alpha

    list-style-type: upper-roman

    list-style-type: lower-alpha

    list-style-type: lower-roman

    Это самые часто используемые значения свойства list-style-type. Но есть множество других значений, которые мы рассмотрим дальше.

    Что такое неупорядоченный список?

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

    Примеры таких списков – списки покупок, списки запланированных дел.

    Для создания упорядоченных списков используется тег (unordered list), а для каждого из его элементов – тег (как и в упорядоченном списке).

    Значения по умолчанию:

    По умолчанию маркеры элементов представлены в виде кружочков. Это можно изменить, используя все то же CSS-свойство list-style-type.

    list-style-type: circle

    list-style-type: square

    list-style-type: disc

    Дальше мы разберем и другие варианты стилей.

    Что такое список определений?

    Список определений отличается тем, что каждый его пункт состоит из двух элементов. Первый из них – термин, а второй – его определение.

    Вы можете создать список определений при помощи тега (definition list – «список определений»). В пунктах списка термины (term) создаются при помощи тега , а описание (description) – при помощи тега .

    See the Pen definition-list by Amrish Kushwaha (@isamrish) on CodePen.

    Что такое вложенные списки?

    Иногда бывают ситуации, когда вам нужно представить информацию в виде списка, причем его пункты сами могут быть отдельными списками. Такая структура называется вложенным списком.

    See the Pen nested-list by Amrish Kushwaha (@isamrish) on CodePen.

    Стиль списка

    Для придания стилей списку используются три CSS-свойства.

    list-style-type

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

    Это свойство может принимать несколько значений:

    • disc (круг)
    • square (квадрат)
    • circle (окружность)
    • decimal (арабские цифры)
    • lower-alpha (строчные латинские буквы, =lower-latin)
    • lower-roman (римские цифры в нижнем регистре)
    • lower-latin (строчные латинские буквы, =lower-alpha)
    • lower-greek (строчные греческие буквы)
    • upper-alpha (заглавные латинские буквы, =upper-latin)
    • upper-roman (римские цифры в верхнем регистре)
    • upper-latin (заглавные латинские буквы, =upper-alpha)

    С полным списком возможных значений свойства list-style-type можно ознакомиться здесь.

    list-style-image

    Это свойство используется, чтобы в качестве маркера списка установить изображение. Свойство может принимать два значения: url изображения или none.

    See the Pen list-style-image by Amrish Kushwaha (@isamrish) on CodePen.

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

    list-style-position

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

    Пример применения значения inside

    Пример применения значения outside

    А теперь давайте поиграем с цветами списка

    Расцвеченный маркированный список

    Вариант 1: элементы списка и маркеры имеют один цвет.

    Вариант 2: элементы списка и маркеры имеют разные цвета.

    Расцвеченный нумерованный список

    Вариант 1: элементы списка и их номера имеют один цвет.

    Вариант 2: элементы списка и их номера имеют разные цвета.

    Надеемся, статья вам понравилась. Если знаете о списках еще что-то интересное, добавляйте в комментарии!

    Источник

    Читайте также:  Unique page title - My Site
Оцените статью
© 2023 Программирование