Home >Web Front-end >CSS Tutorial >CSS: list-style modifies the list attribute to control the li tag style
CSS: list-style modifies the list attribute to control the li tag style
- 黄舟Original
- 2017-06-29 09:34:142339browse
list_style attribute is used to modify list attributes, list-style-type is used to set the list item type, list-style-position is used to set This list item position, list-style-image is used to set the use of image to replace the list item mark
list_style attribute is used to modify the attributes of the list
The format is as follows:
list_style: list item mark type list item mark position list item mark;
You can also set the list item mark separately:
list-style-type is used to set the list item type :
The default value is disc, which is a solid circle,
Commonly used values: none, empty
circle, hollow circle
square, solid square
decimal numbers
lower-latin lowercase Latin letters a, b, c....
upper-latin uppercase letters A, B, C....
list-style-position is used to set the position of this list item:
The default value outside means outside the li tag. This is to add a border to li: 1px solid red; you can see the position of the mark.
inside means that the mark is inside the li tag, which can be clearly seen when adding a border.
list-style-image is used to set the use of images to replace list item tags:
Default value: none
Optional value: URL, the format is url("url address ");
Example:
The code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
ul {
border:1px solid red;
}
li{
border:1px solid red;
list-style:disc outside url(news_list.gif);
list-style-position:5px;
}
</style>
</head>
<ul>
<li>你好</li>
<li>我好</li>
</ul>
<body>
</body>
</html>Specifies a "list-style-type" attribute in case the image is not available.
The above is the detailed content of CSS: list-style modifies the list attribute to control the li tag style. For more information, please follow other related articles on the PHP Chinese website!