Rumah >hujung hadapan web >tutorial css >CSS：list-style列表样式的用法详解
CSS：list-style列表样式的用法详解
- 黄舟asal
- 2017-06-29 09:17:564017semak imbas
解析CSS列表样式属性list-style
平时制作页面中可对属性list-style在list-item对象中常用，但用的都不深。一般都设为none重置整个页面就差不多OK，可能很多人包括本人对属性list-style-type更细节方面的属性并不是很了解，更有可能对属性list-style和属性list-style-type概念会比较模糊，现有必要把它提出来重新学习一下，故整理如下。
义和用法
list-style 简写属性在一个声明中设置所有的列表属性。
说明
该属性是一个简写属性，涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素，所以在普通的 HTML 和 XHTML 中只能用于 li 元素，不过实际上它可以应用到任何元素，并由 list-item 元素继承。
可以按顺序设置如下属性：
•list-style-type
•list-style-position
•list-style-image
◆list-style
定义:用于在一个声明中设置一个列表的所有属性的简写属性，该属性是一个简写属性，涵盖了所有其他列表样式属性，仅作用于具有display值等于list-item的对象(如li对象)。
相关:list-style-imagelist-style-positionlist-style-type
◆list-style-image
说明:设置或检索作为对象的列表项标记的图像。若此属性值为none或指定url地址的图片不能被显示时，list-style-type属性将发生作用。
取值:
none: 默认值。不指定图像
url(url): 使用绝对或相对url地址指定图像
把图像设置为列表中的项目标记：
ul
{
list-style-image:url("/i/arrow.gif");
list-style-type:square;
}例
<html>
<head>
<style type="text/css">
ul
{
list-style-image: url('/i/eg_arrow.gif')
}
</style>
</head>
<body>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
</body>
</html>◆list-style-position
说明:设置或检索作为对象的列表项标记如何根据文本排列。假如一个列表项目的左外补丁(margin-left)被设置为0，则列表项目标记不会被显示。左外补丁(margin-left)最小可以被设置为30。仅作用于具有display属性值等于list-item的对象。如li对象。
取值:
outside: 默认值。列表项目标记放置在文本以外，且环绕文本不根据标记对齐
inside: 列表项目标记放置在文本以内，且环绕文本根据标记对齐
实例
规定列表中列表项目标记的位置：
ul
{
list-style-position:inside;
}实例
<html>
<head>
<style type="text/css">
ul.inside
{
list-style-position: inside
}
ul.outside
{
list-style-position: outside
}
</style>
</head>
<body>
<p>该列表的 list-style-position 的值是 "inside"：</p>
<ul class="inside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>
<p>该列表的 list-style-position 的值是 "outside"：</p>
<ul class="outside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>
</body>
</html>浏览器支持
所有浏览器都支持 list-style-position 属性。
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
◆list-style-type
说明:设置或检索对象的列表项所使用的预设标记。若list-style-image属性值为none或指定url地址的图片不能被显示时，此属性将发生作用。
实例
本例改变列表的类型：
<html>
<head>
<script type="text/javascript">
function changeList()
{
document.getElementById("ul1").style.listStyle="decimal inside";
}
</script>
</head>
<body>
<ul id="ul1">
<li>Coffee</li>
<li>Tea</li>
<li>Water</li>
<li>Soda</li>
</ul>
<input type="button" onclick="changeList()"
value="Change list style" />
</body>
</html>Atas ialah kandungan terperinci CSS：list-style列表样式的用法详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!