手机访问 | 设为首页 | 加入收藏 | 网站地图

当前位置:电脑中国 > 网络创业 > CSS DIV >

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

2017-05-18 11:23|来源:未知 |作者:dnzg |点击:

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

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

以下为回答原文:

一、什么是CSS列表?


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
1.列表符号
列表符号是指显示于每一个列表项目前的符号标识。
 
基本格式如下:list-style-type:参数参数取值范围:
·disc:圆形
·circle:空心圆
·square:方块
·decimal:十进制数字
·lower-roman:小写罗马数字
·upper-roman:大写罗马数字
·lower-alpha:小写希腊字母
·upper-alpha:大写希腊字母
·none:无符号显示
 {background: 颜色 } 安全显示列表符   
参数中的disc是默认选项。
 
2.图形符号
图形符号指原来列表的项目符号将可以使用图形来代替。
 
基本格式如下:list-style-image:URLURL是用来代替项目符号的图形文件的地址,可以使用相对地址或绝对地址。
 
3.列表位置列表位置描述列表在何处显示。
基本格式如下:list-style-position:参数参数取值范围:
·inside:在BOX模型内部显示
·outside:在BOX模型外部显示

二、CSS列表分类


CSS列表样式分为有序列表、无序列表和定义列表。

  • 无序列表(可嵌套)<ul></ul>声明列表是无序的<li></li>包含一列项目。

  • 有序列表(可嵌套)<ol></ol>声明列表是有序的<li></li>包含一列项目。

  • 定义列表(dt定义概念、dd解释;有缩进)

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

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

1240


1、 控制显示:display
语法:

1
{display:none|block|inline|list-item}

作用:改变元素的显示值,可以将元素类型线上,块和清单项目相互变换。
说明:

1
2
3
4
·none 不显示元素 
·block 块显示,在元素前后设置分行符 
·inline 删除元素前后的分行符,使其并入其它元素流中 
·list-item 将元素设置为清单中的一行 注意:可用 display 属性值生成插入标题和补加清单或让图形变成线上显示。

2、控制空白:white-space
语法:

1
{white-space:normal|pre|nowarp}

作用:控制元素內的空白。
说明:

1
2
3
·normal 不改变,保持缺省值,在浏览器页面长度处换行。 
·pre 要求文档显示中采用源代码中的格式。 
·nowarp 不让访问者在元素內换行。
(责任编辑:dnzg)