Підсумок списків 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