CSS 列表

Posted 2022-03-06 niujifei

　　CSS 为列表结构定义了几个专门属性，如下说明：

一、list-style-type 设计项目符号类型

　　使用该属性定义列表项目符号的类型，取值说明如下：

属性值	说明
disc	实心圆，默认值
circle	空心圆
square	实心方块
decimal	阿拉伯数字
lower-roman	小写罗马数字
lower-latin	小写拉丁字母
upper-roman	大写罗马数字
lower-alpha	小写英文字母
upper-alpha	大写英文字母
none	不适用项目符号
upper-latin	大写拉丁字母

 

二、list-style-image 自定义项目符号

　　使用该属性允许指定一个外部图标文件，来满足个性化设计需求。

　　语法：

list-style-image: none | <url>

• •     none：表示默认值，没有项目符号；
    
  •      url：表示指定的外部文件的路径；

　　Tips：同时定义项目符号和自定义项目符号时，自定义项目符号将覆盖默认的符号类型。

三、list-style-position 定义列表项目符号的显示位置

　　该属性定义项目符号的显示位置。

　　语法：

list-style-position: outside | inside ;

• •       outside：表示默认值，表示把项目符号显示在列表项的文本行以外；
  •       inside：表示把项目符号显示在列表项文本行以内。

　Tips：项目符号显示在里面和外面会影响项目符号与列表文本之间的距离，同时影响列表项的缩进效果。不同浏览器在解析时会存在差异。

四、list-style 复合属性

　　该属性是一个复合属性，可以设置与列表项目相关的内容。

　　Demo：

li list-style : url(example.gif) square inside

　　Tips：list-style 的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。