Home > Article > Web Front-end > How to use css list-style-type attribute

How to use css list-style-type attribute

青灯夜游Original: 2019-05-29 11:40:173880browse

css list-style-type attribute is used to set the type of list item tag. Different list item tags can be set through different attribute values. All browsers support the list-style-type attribute.

How to use the css list-style-type attribute?

list-style-type attribute sets the type of list item tag.

Setable attribute values:

● None: No tag.

● Disc: Default. Markers are filled circles.

●circle: The mark is a hollow circle.

● Square: The mark is a solid square.

● Decimal: The token is a number.

● Decimal-leading-zero: digital mark starting with 0. (01, 02, 03, etc.)

● lower-roman: lowercase Roman numerals (i, ii, iii, iv, v, etc.)

● upper-roman: upper case Roman numerals (I, II, III, IV, V, etc.)

● lower-alpha: lowercase English letters The marker is lower-alpha (a, b, c, d, e, etc.)

● upper-alpha: uppercase English letters The marker is upper-alpha (A, B, C, D, E, etc.)

● lower-greek: lowercase Greek letters (alpha , beta, gamma, etc.)

● Lower-latin: lowercase Latin letters (a, b, c, d, e, etc.)

● upper-latin: uppercase Latin letters (A, B, C, D, E, etc.)

● hebrew: traditional Hebrew numbering system

● armenian: traditional Armenian numbering system

● Georgian traditional Georgian numbering (an, ban, gan, etc.)

● cjk-ideographic: simple ideographic numbers

● hiragana: markers are: a, i, u, e, o, ka, ki, etc. (Japanese katakana)

●Katakana: Marks are: A, I, U, E, O, KA, KI, etc. (Japanese katakana)

●hiragana-iroha: Marks are: i, ro, ha, ni, ho, he, to, etc. (Japanese katakana)

● katakana-iroha: Marks are: I, RO, HA, NI, HO, HE, TO, etc. (Japanese katakana)

Note:

All browsers support the list-style-type attribute. Any version of Internet Explorer (including IE8) does not support the attribute values "decimal-leading-zero", "lower-greek", "lower-latin", "upper-latin", "armenian", "georgian" or " inherit".

css list-style-type attribute example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>

<body>
<p>无序列表实例:</p>

<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>有序列表实例:</p>

<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

</body>
</html>

Rendering:

How to use css list-style-type attribute

The above is the detailed content of How to use css list-style-type attribute. For more information, please follow other related articles on the PHP Chinese website!

css

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use css column-span attributeNext article：How to use css column-span attribute

See more

How to use css list-style-type attribute

Related articles