Life style type css

list-style

The list-style CSS shorthand property allows you to set all the list style properties at once.

Try it

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* type */ list-style: square; /* image */ list-style: url("../img/shape.png"); /* position */ list-style: inside; /* type | position */ list-style: georgian inside; /* type | image | position */ list-style: lower-roman url("../img/shape.png") outside; /* Keyword value */ list-style: none; /* Global values */ list-style: inherit; list-style: initial; list-style: revert; list-style: revert-layer; list-style: unset; 

The list-style property is specified as one, two, or three keywords in any order. If list-style-type and list-style-image are both set, then list-style-type is used as a fallback if the image is unavailable.

Values

Accessibility concerns

In a notable exception, Safari will not recognize an ordered or unordered list as a list in the accessibility tree if it has a list-style value of none . This behavior is intentional and not considered a bug.

or
element in the markup. This will restore the list semantics without affecting the design:

ul role="list"> li>An itemli> li>Another itemli> ul> 

A CSS-only workaround is also available for those who do not have access to the markup: Adding pseudo-content before each list item can restore list semantics:

ul  list-style: none; > ul li::before  content: "+ "; > 

The added pseudo-content is tested by Safari to determine if it should be accessible or ignored. Accessible pseudo-content restores list semantics, while ignored pseudo-content does not.

Generally, text or images are determined to be things that should be accessible, which is why the content: «+ «; declaration in the previous example works.

A declaration of content: «»; (an empty string) is ignored, as are content values that contain only spaces, such as content: » «; , so these do not work.

If the intent is to keep list item markers visually hidden, this can often be managed with a zero-width space, ​ , which is \200B in CSS and \u200B in JavaScript:

ul  list-style: none; > ul li::before  content: "\200B"; > 

Another visually hidden approach is to apply an to the list-style property:

nav ol, nav ul  list-style: none; > /* becomes */ nav ol, nav ul  list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E"); > 

These CSS workarounds should be used only when the HTML solution is not available, and only after testing to ensure that they don’t result in unexpected behaviors that may negatively impact users’ experiences.

Formal definition

• list-style-type : disc
• list-style-position : outside
• list-style-image : none

• list-style-image : The keyword none or the computed
• list-style-position : as specified
• list-style-type : as specified

• list-style-image : discrete
• list-style-position : discrete
• list-style-type : discrete

Formal syntax

Examples

Setting list style type and position

HTML

ul class="one"> li>List Item1li> li>List Item2li> li>List Item3li> ul> List 2 ul class="two"> li>List Item Ali> li>List Item Bli> li>List Item Cli> ul> 

CSS

.one  list-style: circle; > .two  list-style: square inside; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 26, 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.

Источник

list-style-type

list-style-type: circle | disc | square | armenian | decimal | decimal-leading-zero | georgian | lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-latin | upper-roman | none | inherit

Значения

Значения зависят от того, к какому типу списка они применяются: маркированному или нумерованному.

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

Нумерованный список

armenian Традиционная армянская нумерация. decimal Арабские числа (1, 2, 3, 4. ). decimal-leading-zero
Арабские числа с нулем впереди для цифр меньше десяти (01, 02, 03. ). georgian Традиционная грузинская нумерация. lower-alpha Строчные латинские буквы (a, b, c, d. ). lower-greek Строчные греческие буквы (α, β, γ, δ. ). lower-latin Это значение аналогично lower-alpha . lower-roman Римские числа в нижнем регистре (i, ii, iii, iv, v. ). upper-alpha Заглавные латинские буквы (A, B, C, D. ). upper-latin Это значение аналогично upper-alpha . upper-roman Римские числа в верхнем регистре (I, II, III, IV, V. ). none Отменяет маркеры для списка. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

1. Lorem ipsum dolor sit amet
2. Consectetuer adipiscing elit
3. Sed diem nonummy nibh euismod
4. Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства list-style-type

Объектная модель

[window.]document.getElementById(» elementID «).style.listStyleType

Браузеры

и значения inside свойства list-style-position , числа идущие с 10, начинают накладываться на текст списка.

Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения armenian , decimal-leading-zero , georgian , lower-greek , lower-latin , upper-latin , inheirt . Вместо них выводится нумерация арабскими числами. В этом браузере нумерация или маркеры не отображаются для плавающих элементов ( ul < float: left; >).

Internet Explorer 8 дополнительно понимает значение upper-greek , которое устанавливает нумерацию в виде заглавных греческих букв (Α, Β, Γ, Δ. ).

CSS по теме

Источник

list-style-type

list-style-type: circle | disc | square | armenian | decimal | decimal-leading-zero | georgian | lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-latin | upper-roman | none | inherit

Значения

Значения зависят от того, к какому типу списка они применяются: маркированному или нумерованному.

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

Нумерованный список

armenian Традиционная армянская нумерация. decimal Арабские числа (1, 2, 3, 4. ). decimal-leading-zero
Арабские числа с нулем впереди для цифр меньше десяти (01, 02, 03. ). georgian Традиционная грузинская нумерация. lower-alpha Строчные латинские буквы (a, b, c, d. ). lower-greek Строчные греческие буквы (α, β, γ, δ. ). lower-latin Это значение аналогично lower-alpha . lower-roman Римские числа в нижнем регистре (i, ii, iii, iv, v. ). upper-alpha Заглавные латинские буквы (A, B, C, D. ). upper-latin Это значение аналогично upper-alpha . upper-roman Римские числа в верхнем регистре (I, II, III, IV, V. ). none Отменяет маркеры для списка. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

1. Lorem ipsum dolor sit amet
2. Consectetuer adipiscing elit
3. Sed diem nonummy nibh euismod
4. Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства list-style-type

Объектная модель

[window.]document.getElementById(» elementID «).style.listStyleType

Браузеры

и значения inside свойства list-style-position , числа идущие с 10, начинают накладываться на текст списка.

Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения armenian , decimal-leading-zero , georgian , lower-greek , lower-latin , upper-latin , inheirt . Вместо них выводится нумерация арабскими числами. В этом браузере нумерация или маркеры не отображаются для плавающих элементов ( ul < float: left; >).

Internet Explorer 8 дополнительно понимает значение upper-greek , которое устанавливает нумерацию в виде заглавных греческих букв (Α, Β, Γ, Δ. ).

CSS по теме

Источник

list-style-type¶

Свойство list-style-type изменяет вид маркера для каждого элемента списка.

Это свойство используется только в случае, когда значение list-style-image установлено как none. Маркеры различаются для маркированного списка (элемент ) и нумерованного (элемент ).

Демо¶

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

/* Partial list of types */ list-style-type: disc; list-style-type: circle; list-style-type: square; list-style-type: decimal; list-style-type: georgian; list-style-type: cjk-ideographic; list-style-type: kannada; /* value */ list-style-type: '-'; /* Identifier matching an @counter-style rule */ list-style-type: custom-counter-style; /* Keyword value */ list-style-type: none; /* Global values */ list-style-type: inherit; list-style-type: initial; list-style-type: unset; 

Значения¶

Значения зависят от того, к какому типу списка они применяются: маркированному или нумерованному.

Маркированный список¶

Нумерованный список¶

armenian Традиционная армянская нумерация. decimal Арабские числа (1, 2, 3, 4. ). decimal-leading-zero Арабские числа с нулем впереди для цифр меньше десяти (01, 02, 03. ). georgian Традиционная грузинская нумерация. lower-alpha Строчные латинские буквы (a, b, c, d. ). lower-greek Строчные греческие буквы (α, β, γ, δ. ). lower-latin Это значение аналогично lower-alpha . lower-roman Римские числа в нижнем регистре (i, ii, iii, iv, v. ). upper-alpha Заглавные латинские буквы (A, B, C, D. ). upper-latin Это значение аналогично upper-alpha . upper-roman Римские числа в верхнем регистре (I, II, III, IV, V. ). none Отменяет маркеры для списка.

list-style-type: disc; /* для ul */ list-style-type: decimal; /* для ol */ 

Источник