What are the CSS Control List style properties List-style? How to use it?

What are the types of CSS list style properties List-style? What should I pay attention to when using different types of CSS control list styles?

This is a question raised by W3cschool user Shirley in the W3cschool programming question in 2016-11-10. Yunnan Small Angel's answer is very good to help many meet the same problem of the original address http://www.w3cschool.cn/css3/question-10231611.html

Here is the original answer:

What is a CSS list?

CSS list is a useful way to display HTML, you can put the relevant side-by-side content neatly arranged vertically, so that the page looks neat and professional, and let the visitors have a sense of a glance. Style sheets Add some functionality to the list, and the style of the control list includes list styles, graphic symbols, and three parts of the list position.

1. The list symbol list symbol refers to the symbol identifier that is displayed for each list item. The basic format is as follows: List-style-type: Parameter parameter value range: disc: Round circle: Hollow Round Square: Block decimal: decimal digit lower-roman: lowercase roman Numerals · Upper-roman: Uppercase Roman numeral Lower-alpha: lowercase Greek letter upper-alpha: Uppercase Greek letter None: Unsigned display {background: color} The disc in the Safe display list character parameter is the default option. 2. Graphical symbols graphical symbols refer to the original list of bullets that can be replaced with graphics. The basic format is as follows: List-style-image:urlurl is the address of a graphic file used in place of bullets and can use relative or absolute addresses. 3. List location list where the position description list is displayed. The basic format is as follows: List-style-position: Parameter value range: inside: Display inside the box model outside: Outside the box model

Second, CSS list classification

CSS list styles are categorized into ordered, unordered, and defined lists.

• Unordered table (can be nested) <ul></ul> Declaration lists are unordered and <li></li> contain a list of items.

• Sequential list (can be nested) <ol></ol> The declaration list is ordered to <li></li> contain a column of items.

• Define a list ( dt define concept, dd interpretation; indent)

<dl></dl> Declaration Definition List <dt></dt> explanation of concept <dd></dd> concept

The sequence list is arranged in order such as 12345, ABCDE, etc.;
Unordered lists contain dots, squares, hollow circles, and so on.
The common syntax for CSS List property styles is as follows:

650) this.width=650; "Src="//upload-images.jianshu.io/upload_images/2642238-367735381dc6cf3d.png?imagemogr2/ auto-orient/strip%7cimageview2/2/w/1240 "alt=" 1240 "/>

1, control displays: Display
Grammar:

{Display:none|block|inline|list-item}

Function: Change the display value of the element, you can transform the element type line, the block and the list item to each other.
Description

None does not display elements block block display, set line breaks before and after elements inline delete lines before and after the elements, merging them into other element flows List-item Set the element to a row in the list note: Available display The property value generates an insert title and a complement list or makes the graphic appear on the line.

2, Control blank: White-space
Grammar:

{White-space:normal|pre|nowarp}

Function: Controls the whitespace inside the element.
Description

Normal does not change, keep the default value, wrap at the browser page length. pre requires that the document display be formatted in the source code. Nowarp does not allow visitors to wrap within an element.

3. List of symbols: List-style-type
Grammar:

{List-style-type:none|disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha}

Role: Specifies the type of accent or number used for the manifest
Description

None-no accent Disc-disc accent (solid circle) Circle-round accent (hollow Circle) Square-square accent (solid) decimal-decimal number accent Lower-roman-lowercase roman accent Upper -roman-Uppercase Roman accent Lower-alpha-Small letter accent Upper-alpha-Uppercase accent

Example:

Li.square {list-style-type:square}ul.plain {list-style-type:none}ol {list-style-type:upper-alpha}/* A B C D E et C. */ol ol {List-style-type:decimal}/* 1 2 3 4 5 etc. */ol ol ol {List-style-type:lower-roman}/* I II III IV v etc . */

4. Picture list: List-style-image
Grammar:

{List-style-image:url}

Function: Used to replace the standard accent in the list with the selected graphic
Description

URL-Graphics URL address

Example:

Ul.check {list-style-image:url (/li-markers/checkmark.gif)}ul li.x {list-style-image:url (x.png)}

Location List: list-style-position

Grammar:

{List-style-position:inside|outside}

Function: Used to set the indentation or extension of the accent, which allows the accent to be highlighted outside the list or aligned with the list item.
Description

inside-indent, aligns the underscore with the left edge of the list item content outside-row, highlighting to the left border of the list item content

6. Directory list: List-style
Grammar:

{list-style: Directory style type | directory style location |url}

Role: Table of Contents style attributes are table of contents style type, directory style location, and table of contents style image attributes are slightly written
Description

List-style-type list-style-position List-style-image

Note: The details of these values are shown in the individual Properties section.
Example:

Li.square {List-style:square inside}ul.plain {list-style:none}ul.check {list-style:url (/li-markers/checkmark.gif) Circle}ol {List-style:upper-alpha}ol OL {List-style:lower-roman inside}

7, mouse shape cursor
Grammar:

{Cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}

Role: CSS provides up to 13 mouse shapes for us to choose from.
Description

hand Hand shape crosshair 10-shape text text wait hourglass move cross Arrow help question mark shape e-resize right arrow n-resize Upper arrow Nw-resize left Upper Arrow w-resize Left arrow shape s-resize down arrow shape se-resize right down arrow shape sw-resize left down arrow

See "CSS list style (UL)" and "CSS List-style properties" on the W3cschool website

Three, CSS list style attribute List-style use method

List-style
Defined:
A shorthand property that is used to set all properties of a list in a declaration, which is a shorthand property that covers all other list style properties, only for objects that have display values equal to List-item (such as Li objects).
Related:

List-style-image | | list-style-position | | List-style-type

List-style-image
Description
Sets or retrieves an image that is marked as a list item of an object. If this property value is None or the picture that specifies the URL address cannot be displayed, the List-style-type property will function.
Value:

None: Default value. Do not specify an image URL (URL): Specify an image with an absolute or relative URL address

List-style-position
Description
Sets or retrieves how the list item tags as objects are arranged according to text. If the left outer patch (MARGIN-LEFT) of a list item is set to 0, the list item tag is not displayed. The left outer patch (MARGIN-LEFT) minimum can be set to 30. Only for objects that have display property values equal to List-item. such as the Li object.
Value:

Outside: Default value. List item markers are placed outside of text, and wrapping text is not aligned according to tags inside: List item markers are placed within text, and wrapping text is aligned according to markers

List-style-type
Description
Sets or retrieves the preset tag used by the object's list item. This property will work if the List-style-image property value is None or the picture that specifies the URL address cannot be displayed.
Value:

Disc:css1 solid round circle:css1 Hollow round SQUARE:CSS1 solid block decimal:css1 Arabic numerals lower-roman:css1 lowercase roman numerals Upper-roman:css1 uppercase Roman numerals Lower-alpha:css1 lowercase English letter Upper-alpha:css1 Capital English alphabet None:css1 do not use bullets Armenian:css2 traditional Armenian numerals Cjk-ideographic:c SS2 Plain ideographic Numerals georgian:css2 traditional George numeral Lower-greek:css2 basic Greek Small Letter Hebrew:css2 Traditional Hebrew digital hiragana:css2 Japanese hiragana character Hiragana-ir Oha:css2 Japanese hiragana ordinal katakana:css2 Japanese katakana character katakana-iroha:css2 kana ordinal lower-latin:css2 lowercase latin alphabet upper-latin:css2 uppercase pull Ding Letter

Use a background image to change a list character

List-style-image:url (xxx.jpg);

Change the position of a list character
List-style-position:

Inside list item tags are placed inside text and aligned to the tag outsid (default) list items are placed outside the tag, not aligned to the tag

The above content by W3cschool small compiled from W3cschool programming quiz, hope can help everyone!

This article is from the "W3cschool" blog, make sure to keep this source http://w3cschool.blog.51cto.com/12235207/1926707

What are the CSS Control List style properties List-style? How to use it?