How to set the li style in css: 1. Define the bullets of the li list through the list-style-type attribute; 2. Use pictures instead of bullets through the list-style-image attribute; 3. Use the list- The style attribute can comprehensively set the li style.
The operating environment of this tutorial: windows7 system, css3 version, Dell G3 computer.
Recommended: css video tutorial
The default style of the li tag is a small dot or a number in front of it. So how to change the default style of the li tag?
How to set the style of li tag in css?
ul and li lists are commonly used elements when using CSS to layout pages. In CSS, there are attributes that specifically control list performance. Commonly used attributes include list-style-type attributes, list-style-image attributes, list-style-position attributes, and list-style attributes.
1. List-style-type attribute
The list-style-type attribute is used to define the bullet of the li list, that is, the modification in front of the list. The list-style-type attribute is an inheritable attribute. Its grammatical structure is as follows: (List some commonly used attribute values)
list-style-type: none/disc/circle/square/demical/lower-alpha/upper-alpha/lower-roman/upper-roman
There are many attribute values for the list-style-type attribute. Here we only list a few of the more commonly used ones.
none: Do not use bullet points.
disc: solid circle.
circle: hollow circle.
square: solid square.
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 attribute is as follows:
li{ list-style-type:square; }
2. List-style-image attribute
list-style-image Property used to define the use of pictures instead of bullets. It is also an inheritable attribute, and its syntax structure is as follows:
list-style-image:none/url
list-style-image attribute can take two values:
none: There is no replaced image.
url: The path of the image to be replaced.
Let’s look at a piece of code:
li{ list-style-image:url(images/bg03.gif); }
3. List-style-position attribute
list-style-position attribute is used to define items Properties of the symbol's display position in the list. It is also an inheritable attribute, and the syntax structure is as follows:
list-style-position:inside/outside
inside: The bullet is placed inside the text.
outside: Bullets are placed outside the text.
An example of using the list-style-position attribute is as follows:
li{ list-style-type:square; list-style-position:outside; }
Let’s take a look at the style with the attribute value inside.
li{ list-style-type:square; list-style-position:inside; }
4. List-style attribute
The list-style attribute is an attribute that comprehensively sets the li style. It is also an inheritable attribute. The syntax structure is as follows:
li-style:list-style-type/list-style-image/list-style-position
The positions of each value can be exchanged. For example:
li{ list-style:url(images/bg03.gif) inside; }
The above is the detailed content of How to set the style of li with css. For more information, please follow other related articles on the PHP Chinese website!