CSS list styles
We learned in the HTML chapter earlier:
1. Unordered list - list items are marked with special graphics (such as small black dots, small boxes, etc.)
2. Yes Sequence List - List items are marked with numbers or letters
Let’s take a look at lists in CSS.
Detailed explanation of ul and li styles in CSS
The ul and li lists use CSS to layout the page Commonly used elements. 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 bullets of the li list, that is Decoration at the front of the list. The list-style-type attribute is an inheritable attribute. Its syntax 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:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
li{list-style-type:square;}
</style>
</head>
<body>
<ul>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>
</body>
</html>2. List-style-image attribute
The list-style-image attribute is 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
The list-style-image attribute can take two values:
none: No replacement image. url: The path of the image to be replaced.
Let’s look at a piece of code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
li{list-style-image:url(http://php.cn/style/images/sqpurple.gif);}
</style>
</head>
<body>
<ul>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>
</body>
</html>##3. List-style-position attribute
list-style-position attribute , is an attribute used to define the display position of bullets in the list. It is also an inheritable attribute, and the syntax structure is as follows: List-style-position: inside/outsideinside: The bullet is placed inside the text. outside: Bullets are placed outside the text. Examples of using the list-style-position attribute are as follows:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
li{list-style-type:square;list-style-position:outside;}
</style>
</head>
<body>
<ul>
<li>这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。
这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。
这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>
</body>
</html> 4. List-style attribute
list- The 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:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
li{list-style:url( inside;}
</style>
</head>
<body>
<ul>
<li>这里是使用list-style属性的示例。请注意换行以后项目符号的位置。
这里是使用list-style属性的示例。请注意换行以后项目符号的位置。
这里是使用list-style属性的示例。请注意换行以后项目符号的位置。</li>
<li>这里是列表内容</li>
</ul>
</body>
</html>Browser Compatibility Solution
Also in all browsers, the following example will display the image tag:
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding -left: 14px;
}
Example explanation:
ul:
Set the list style type to not delete the list item Tag
Set padding and margin to 0px (browser compatibility)
all li in ul:
Set the URL of the image and set it to be displayed only once (no duplicates )
Position the image you need (0px left and 5px top and bottom)
Use the padding-left attribute to place the text in the list
