CSS控制列表样式属性list-style有哪些?怎么用?

本文详细介绍了CSS中的列表样式属性list-style,包括其类型、图像和位置的设置方法,以及如何通过list-style-image、list-style-position和list-style-type控制列表的显示效果。文章还提到了CSS列表的分类,如有序、无序和定义列表,同时提供了多个示例来帮助理解。
摘要由CSDN通过智能技术生成

CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么?

这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题。云南小天使的回答很好的帮助了众多遇到同样问题的网友原文地址http://www.w3cschool.cn/css3/question-10231611.html

以下为回答原文:

一、什么是CSS列表?


CSS列表是HTML里一种很有用的显示方式,可以把相关的并列内容整齐地垂直排列,使网页显得整洁专业,并让浏览者有一目了然的感觉。 样式表为列表增加了一些功能,控制列表的样式包括列表样式、图形符号、列表位置三个部分。

1.列表符号
列表符号是指显示于每一个列表项目前的符号标识。

基本格式如下:
list-style-type:参数

参数取值范围:
·disc:圆形
·circle:空心圆
·square:方块
·decimal:十进制数字
·lower-roman:小写罗马数字
·upper-roman:大写罗马数字
·lower-alpha:小写希腊字母
·upper-alpha:大写希腊字母
·none:无符号显示
 {background: 颜色 } 安全显示列表符   
参数中的disc是默认选项。

2.图形符号
图形符号指原来列表的项目符号将可以使用图形来代替。

基本格式如下:
list-style-image:URL
URL是用来代替项目符号的图形文件的地址,可以使用相对地址或绝对地址。

3.列表位置列表位置描述列表在何处显示。
基本格式如下:
list-style-position:参数

参数取值范围:
·inside:在BOX模型内部显示
·outside:在BOX模型外部显示

二、CSS列表分类


CSS列表样式分为有序列表、无序列表和定义列表。
* 无序列表(可嵌套)<ul></ul>声明列表是无序的<li></li>包含一列项目。
* 有序列表(可嵌套)<ol></ol>声明列表是有序的<li></li>包含一列项目。
* 定义列表dt定义概念、dd解释;有缩进)

<dl></dl>声明定义列表
<dt></dt>概念
<dd></dd>概念的解释

有序列表是按照顺序排列如12345、ABCDE等;
无序列表包含圆点、方块、空心圆等。
CSS列表属性样式常见语法如下:

1、 控制显示:display

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值