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

转载 (原文地址) w3cshool 教程 前端 302阅读 2017-05-15 20:21:33 举报

CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么?
这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题。云南小天使的回答很好的帮助了众多遇到同样问题的网友原文地址http://www.w3cschool.cn/css3/question-10231611.html
以下为回答原文:

一、什么是CSS列表?


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

二、CSS列表分类


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

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

css 代码

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

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

1、 控制显示:display
语法:
css 代码

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

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

作用:控制元素內的空白。
说明:
·normal 不改变,保持缺省值,在浏览器页面长度处换行。
·pre 要求文档显示中采用源代码中的格式。
·nowarp 不让访问者在元素內换行。[/pre]
3、符号列表:list-style-type
语法:
css 代码

作用:指定清单所用的强调符或编号类型
说明:
css 代码

例子:
css 代码

4、图片列表:list-style-image
语法:
css 代码

作用:用于将清单中标准强调符换成所选的图形
说明:
css 代码

位置列表:list-style-position
语法:
css 代码

作用:用于设置强调符的缩排或伸排,这个属性可以让强调符突出于清单以外或与清单项目对齐。
说明:
css 代码

6、 目录列表:list-style
语法:
{list-style:目录样式类型|目录样式位置|url}[/pre]
作用:目录样式属性是目录样式类型、目录样式位置,和目录样式图象属性的略写
说明:
css 代码

注意:这些值的细节见各个属性部分。
例子:
css 代码

7、鼠标形状cursor
语法:
css 代码

作用:CSS提供了多达13种的鼠标形状,供我们选择。
说明:
css 代码

可参阅W3Cschool官网上的《CSS 列表样式(ul)》及《CSS list-style 属性

三、CSS列表样式属性list-style的使用方法


list-style
定义:
用于在一个声明中设置一个列表的所有属性的简写属性,该属性是一个简写属性,涵盖了所有其他列表样式属性,仅作用于具有display值等于list-item的对象(如li对象)。
相关 :
css 代码

list-style-image
说明:
设置或检索作为对象的列表项标记的图像。若此属性值为 none 或指定 url 地址的图片不能被显示时,list-style-type 属性将发生作用。
取值:
css 代码

list-style-position
说明:
设置或检索作为对象的列表项标记如何根据文本排列。假如一个列表项目的左外补丁( margin-left )被设置为 0 ,则列表项目标记不会被显示。左外补丁( margin-left )最小可以被设置为 30 。仅作用于具有 display 属性值等于 list-item 的对象。如 li 对象。
取值:
css 代码

list-style-type
说明:
设置或检索对象的列表项所使用的预设标记。若 list-style-image 属性值为 none 或指定 url 地址的图片不能被显示时,此属性将发生作用。
取值:
css 代码

使用背景图片改变列表符
css 代码

改变列表符位置
list-style-position:
css 代码

以上内容由W3Cschool小编整理自W3Cschool编程问答,希望可以帮助大家!

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复