List-style-type · WebPlatform Docs

Trang chủ » Html List Style Disc » List-style-type · WebPlatform Docs

Có thể bạn quan tâm

list-style-type

Summary

Specifies the type of list-item marker in a list.

Overview table

Initial value disc Applies to elements with ‘display: list-item’ Inherited Yes Media visual Computed value as specified Animatable No

CSS Object Model Property :

Syntax

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

Values

armenian The marker is traditional Armenian numbering circle circle decimal number. This is default for <ol> decimal-leading-zero number with leading zeros (01, 02, 03, etc.) disc filled circle. This is default for <ul> georgian traditional Georgian numbering inherit The value of the listStyleType property is inherited from parent element lower-alpha lower-alpha (a, b, c, d, e, etc.) lower-greek lower-greek lower-latin lower-latin (a, b, c, d, e, etc.) lower-roman lower-roman (i, ii, iii, iv, v, etc.) none No marker is shown square square upper-alpha upper-alpha (A, B, C, D, E, etc.) upper-latin upper-latin (A, B, C, D, E, etc.) upper-roman upper-roman (I, II, III, IV, V, etc.)

Examples

The following examples use the list-style-type attribute and the list-style-type property to set the markers.

This example uses ul as a selector in an embedded (global) style sheet to change the marker type to circle.

<style> ul { list-style-type:circle } </style>

View live example

This example demonstrates the use of decimal-leading-zero.

<style type="text/css"> .decleadzero { list-style-type: decimal-leading-zero; } ... </style> <body> <ol class="decleadzero"> <li>This is the first item. </li> <li>This is the second item. </li> <li>This is the third item. </li> </ol> ... </body>

View live example

Using the list-style-type on ordered lists

/** * using list-style-type on ordered lists * the default for ol's is list-style-type: decimal */ .list-style--leading-zero { list-style-type: decimal-leading-zero; } .list-style--roman { list-style-type: upper-roman; /* you can also use lower-roman */ }

View live example

If the left padding of a line item is set to 0 and the list has list-style-position: outside; (which is the default) the list-item markers will not show.

/* If the left padding is set to 0 the list-item markers do not show This happens only if the list-style-position is set on outside (which is the default) */ ul { padding:0; } .list-position--inside { list-style-position: inside; }

View live example

Example for unordered lists

/* Example for unordered lists */ .list-style--circle { list-style-type: circle; } .list-style--square { list-style-type: square; } .list-style--square { list-style-type: none; /* use none to remove the bullets */ }

View live example

Example for unordered lists with list-style-type set as none which removes the default bullet style of the unordered list.

/** * Example of list-style-type One value for the list-style-type is none which just removes the bullets and all. This example includes two unordered lists one with list-style-type set as none and other set as square bullets. */ #withBullets ul { color: #f06; font: italic 100% Georgia, serif; width: 500px; padding:10px; margin:10px; list-style-type:none; /*To remove the default bullet style*/ } #withBullets li{ display:inline; margin:8px; padding:4px; } #withBullets li:hover{ border-bottom:3px solid black; border-radius:4px; } ul{ color: #f06; font: italic 100% Georgia, serif; width: 500px; padding:10px; margin:10px; list-style-type:square; } li{ margin:8px; } a:link{text-decoration:none;color:green;} a:hover{text-decoration:none;color:green;} a:active{text-decoration:none;color:green;} a:visited{text-decoration:none;color:green;}

View live example

Usage

The list-style-type CSS property specifies appearance of a list item element. As it is the only one who defaults to display:list-item, this is usually a <li> element, but can be any element with this display value.

Notes

Notes

  • The color of the marker will be the same as the computed color of the element it applies to.

  • Some list-style-types require a suitable font installed to display as expected.

  • The CSS specification does not define how alphabetic systems wrap at the end of the alphabet. For instance, after 26 list items, upper-alpha rendering is undefined. Firefox and other browsers will continue as AA, AB, AC,… For long lists, it is recommended that authors specify true numbers.

  • The list styles hebrew, cjk-ideographs, hiragana, katakana, hiragana-iroha and katakana-iroha were specified in CSS2 but removed from CSS 2.1 due to lack of implementation experience. They are expected to return in the CSS3 Lists module.

  • The property also supports a shorthand syntax which is list-style

  • If the left padding of a list is set to 0 using one of the padding properties, the list-item markers do not show only if that list has the default list-style-position: inside; . For a better understanding see the examples.

See also

Related articles

Generated and Replaced Content

  • Generated and Replaced Content

  • content

  • counter-increment

  • counter-reset

  • list-style-image

  • list-style-type

  • object-fit

Related pages

  • CSSStyleDeclarationCSSStyleDeclaration
  • currentStylecurrentStyle
  • runtimeStyleruntimeStyle
  • stylestyle

Attributions

  • Mozilla Developer Network cc-by-sa-small-wpd.svg: Article

  • Microsoft Developer Network: [Windows Internet Explorer API reference Article]

Từ khóa » Html List Style Disc