css列表样式
CSS | 样式表 (CSS | Styling Lists)
The
CSS styling propertyis used to set different list item markers and styles for ordered and unordered lists. Some of the values are for unordered lists while some are for ordered lists.
CSS样式属性用于为有序列表和无序列表设置不同的列表项标记和样式。 一些值用于无序列表，而某些值用于有序列表。
The
list-styleis the shorthand property that can be used with the default values disc outside none for type, position, and image respectively.
列表样式是一种简写属性，可与默认值disc分别用于类型，位置和图像，而不用于它们之外。
List-item properties: 列表项属性：-
list-style-type
列表样式类型
-
list-style-image
列表样式图像
-
list-style-position
列表样式位置
li
{
list-style-type : value;
}
列表样式类型的属性 (list-style-type property)
This property is used to define the shape or type of bullet point used for each list-item.
此属性用于定义用于每个列表项目的项目符号点的形状或类型。
The default value is disc.
默认值为光盘。
Other values are,
其他值是
- decimal : In this value, a marker is a number. 小数 ：在此值中，标记是数字。
- disc : In this value, the circle marker is filled. disc ：在该值中，圆圈标记被填充。
- circle : In this value, the marker is a circle shape. circle ：在此值中，标记是圆形。
- square : In this value, the marker is a square shape. 正方形 ：在此值中，标记是正方形。
- lower-roman : In this value marker is of lower-roman type. lower-roman ：在此值标记中为lower-roman类型。
- upper-roman : In this value marker is of upper case roman type. upper-roman ：在此值标记中为大写罗马字体。
<!DOCTYPE html>
<html>
<head>
<style>
ul.list1 {
list-style-type: decimal;
}
ul.list2 {
list-style-type: disc;
}
ul.list3 {
list-style-type: circle;
}
ul.list4 {
list-style-type: square;
}
ul.list5 {
list-style-type: lower-roman;
}
ul.list6 {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<p><b>Indian cities...</b></p>
<ul class="list1">
<li>New Delhi</li>
<li>Mumbai</li>
<li>Banglore</li>
</ul>
<p><b>Indian cities...</b></p>
<ul class="list2">
<li>New Delhi</li>
<li>Mumbai</li>
<li>Banglore</li>
</ul>
<p><b>Indian cities...</b></p>
<ul class="list3">
<li>New Delhi</li>
<li>Mumbai</li>
<li>Banglore</li>
</ul>
<p><b>Indian cities...</b></p>
<ul class="list4">
<li>New Delhi</li>
<li>Mumbai</li>
<li>Banglore</li>
</ul>
<p><b>Indian cities...</b></p>
<ul class="list5">
<li>New Delhi</li>
<li>Mumbai</li>
<li>Banglore</li>
</ul>
<p><b>Indian cities...</b></p>
<ul class="list6">
<li>New Delhi</li>
<li>Mumbai</li>
<li>Banglore</li>
</ul>
</body>
</html>
列表样式图像属性 (list-style-image property)
This property determines whether the list-item icon is set with an image and accepts a value of none or a URL that points to an image.
此属性确定是否为列表项图标设置了图像，并接受无值或指向图像的URL。
An image is used instead of a marker.
使用图像代替标记。
Example: 例：<!DOCTYPE html>
<html>
<head>
<style>
li {
list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>
<ul class="list">
<li>red</li>
<li>green</li>
<li>blue</li>
</ul>
</body>
</html>
In the above example a URL is used to point bullet image to each list item.
在上面的示例中，URL用于将项目符号图像指向每个列表项。
列表样式位置属性 (list-style-position property )
This property defines where to position the list-item marker.
该属性定义列表项标记的位置。
list-style-positionaccepts one of two values:
list-style-position接受以下两个值之一：
- Inside : it means the bullets will be inside of the list item. 内部 ：这意味着项目符号将在列表项的内部。
- Outside : it means the bullets will be outside of the list item. 外部 ：这意味着项目符号将不在列表项之内。
<!DOCTYPE html>
<html>
<head>
<style>
ul.list1 {
list-style-position: inside;
}
ul.list2 {
list-style-position: outside;
}
</style>
</head>
<body>
<p><b>Inside property example...</b></p>
<ul class="list1">
<li>red</li>
<li>green</li>
<li>blue</li>
</ul>
<p><b>Outside property example...</b></p>
<ul class="list2">
<li>red</li>
<li>green</li>
<li>blue</li>
</ul>
</body>
</html>
翻译自: https://www.includehelp.com/code-snippets/styling-lists-in-css.aspx
css列表样式