CSS中如何利用属性进行控制列表样式，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。控制列表样式的属性：1、“list-style-type
CSS中如何利用属性进行控制列表样式，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
控制列表样式的属性：1、“list-style-type”，设置列表标记的类型；2、“list-style-position”，设置标记的放置位置；3、“list-style-image”，将图像设为列表标记；4、“list-style”。
本教程操作环境：windows7系统、css3&&HTML5版、Dell G3电脑。
列表(List) 属性
| 属性 | 说明 | CSS |
|---|---|---|
| list-style | 在一个声明中设置所有的列表属性 | 1 |
| list-style-image | 将图像设置为列表项标记 | 1 |
| list-style-position | 设置列表项标记的放置位置 | 1 |
| list-style-type | 设置列表项标记的类型 | 1 |
（1）list-style-type：用于控制标记符的外观形状。
对于无序列表，该属性取值如下：1. none，没有标记符；2. disc（默认值），填充的圆；3. circle，空心圆；4. square，填充的正方形。
对于有序列表，该属性取值如下：1. decimal，数字；2. decimal-leading-zero，前面加0的数字；3. lower-alpha，小写字母；4. upper-alpha，大写字母；5. lower-roman，小写罗马字母；6. upper-roman，大写罗马字母。
（2）list-style-position： 该属性用于声明列表标志相对于列表项内容的位置。
外部 (outside) 标志会放在离列表项边框边界一定距离处，不过这距离在 CSS 中未定义。内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。对于嵌套列表，可以使用值inherit，规定应该从父元素继承 list-style-position 属性的值。
（3）list-style-image：指定图像作为标记。
使用方式如下：
li { list-style-image: url("haha.gif") }需要注意的是，如果正在使用嵌套列表，该属性会继承父元素，为了防止继承，须将list-style-image设置为none。
（4）list-style：简写形式
可以一次性表达以上三个属性中的多个属性，可以以任意顺序出现。
测试效果图如下：
CSS代码如下：
li { border: red solid thin; }
ul { list-style: square outside }
ol { list-style: upper-alpha inside; }
ul.one { list-style: url("test1.jpg") inside; }html代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "Http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta charset="utf-8" />
<base href="/testsmarty/templates/"></base>
<title>CSS控制列表样式</title>
<link rel="stylesheet" type="text/css" href="test1.css">
</head>
<body>
<table width="700" border="1">
<tr>
<td>无序列表样式</td>
<td>有序列表样式</td>
<td>使用图片做标记符</td>
</tr>
<tr>
<td>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</td>
<td>
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
</td>
<td>
<ul class="one">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</td>
</tr>
<tr>
<td colspan="3">注意outside与inside其标记符与li元素框的位置</td>
</tr>
</table>
</body>
</html>关于css中如何利用属性进行控制列表样式问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注编程网JavaScript频道了解更多相关知识。
--结束END--
本文标题: css中如何利用属性进行控制列表样式
本文链接: https://lsjlt.com/news/87499.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0