The UL and Li Styles in CSS are detailed list-type

Turn from Sina blog http://blog.sina.com.cn/u/2539885750

　The UL and Li lists are commonly used elements when using CSS to layout pages. In CSS, there are properties that specifically control the performance of lists, commonly used List-style-type properties,list-style-image properties,list-style-position properties, and The List-style property.

　　First,List-style-type properties

　　The List-style-type property is used to define the bullets of the Li List, which is the decoration in front of the list. The List-style-type property is an inheritable property. The syntax structure is as follows: (Enumerate some common property values)

　　List-style-type:none/disc/circle/square/demical/lower-alpha/upper-alpha/lower-roman/upper-roman

　　There are a lot of property values for the List-style-type property, and here we just list some of the more common ones.

• None: bullets are not used.
• Disc: Solid Circle.
• Circle: Hollow Circle.
• Square: solid block.
• Demical: Arabic numerals.
• Lower-alpha: lowercase English letters.
• Upper-alpha: Uppercase English letters.
• Lower-roman: Lowercase roman numerals.
• Upper-roman: Uppercase Roman numerals.
• ................

the sample code for using the List-style-type property is as follows:

li{
List-style-type:square;}

<ul>
<li> here is the list content </li>
<li> here is the list content </li>
<li> here is the list content </li>
</ul>

　　Second,list-style-image properties

　　The List-style-image property is used to define the use of pictures instead of bullets. It is also an inheritable property with the following syntax structure:

　　List-style-image:none/url

　　The List-style-image property can take two values:

• None: There are no pictures to replace.
• URL: The path to replace the picture.

Take a look at the code:

li{
List-style-image:url (images/bg03.gif);}

<ul>
<li> here is the list content </li>
<li> here is the list content </li>
<li> here is the list content </li>
</ul>

　　Third,list-style-position properties

　　The List-style-position property is a property that defines where bullets are displayed in a list. It is also an inheritable property with the following syntax structure:

　　List-style-position:inside/outside

• Inside: bullets are placed within the text.
• Outside: Bullets are placed outside the text.

An example of using the List-style-position property is as follows:

li{
List-style-type:square;
List-style-position:outside;}

<ul>
<li> Here is an example using the List-style-position property value of outside. Note the position of the bullet after the line break. </li>
<li> here is the list content </li>
<li> here is the list content </li>
</ul>

Then look at the style of the property value inside.

li{
List-style-type:square;
List-style-position:inside;}

<ul>
<li> Here is an example using the List-style-position property value of inside. Note the position of the bullet after the line break. </li>
<li> here is the list content </li>
<li> here is the list content </li>
</ul>

　　Iv..List-style Properties

　　The List-style property is an attribute that sets the Li style synthetically, and is an inherited property, with the following syntax:

　　Li-style:list-style-type/list-style-image/list-style-position

The position of each value can be exchanged. Like what:

li{
List-style:url (images/bg03.gif) inside;}

<ul>
<li> Here is an example of using the List-style property. Note the position of the bullet after the line break. </li>
<li> here is the list content </li>
</ul>

If you want to change the list character to an image:

UL li{List-style-type:none; 　　List-style-image:url (images/icon.gif); }

The UL and Li Styles in CSS are detailed list-type