CSS list-style 属性
来源:互联网 发布:mac epub mobi 转换 编辑:程序博客网 时间:2024/04/30 04:02
CSS list-style 属性
定义和用法
list-style 简写属性在一个声明中设置所有的列表属性。
说明
该属性是一个简写属性,涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素,所以在普通的 HTML 和 XHTML 中只能用于 li 元素,不过实际上它可以应用到任何元素,并由 list-item 元素继承。
可以按顺序设置如下属性:
- list-style-type
- list-style-position
- list-style-image
可以不设置其中的某个值,比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值。
可能的值
实例
把图像设置为列表中的列表项目标记:
<html><head><style type="text/css">ul {list-style: square inside url('/i/eg_arrow.gif')}</style></head><body><ul><li>咖啡</li><li>茶</li><li>可口可乐</li></ul></body></html>
查看结果:
CSS list-style-type 属性
实例
设置不同的列表样式:
ul.circle {list-style-type:circle;}ul.square {list-style-type:square;}ol.upper-roman {list-style-type:upper-roman;}ol.lower-alpha {list-style-type:lower-alpha;}
CSS list-style-position 属性
实例
规定列表中列表项目标记的位置:
<style type="text/css">ul.inside {list-style-position: inside}ul.outside {list-style-position: outside}</style></head><body><p>该列表的 list-style-position 的值是 "inside":</p><ul class="inside"><li>Earl Grey Tea - 一种黑颜色的茶</li><li>Jasmine Tea - 一种神奇的“全功能”茶</li><li>Honeybush Tea - 一种令人愉快的果味茶</li></ul><p>该列表的 list-style-position 的值是 "outside":</p><ul class="outside"><li>Earl Grey Tea - 一种黑颜色的茶</li><li>Jasmine Tea - 一种神奇的“全功能”茶</li><li>Honeybush Tea - 一种令人愉快的果味茶</li></ul>
CSS list-style-image 属性
值实例
把图像设置为列表中的项目标记:
ul { list-style-image:url("/i/arrow.gif"); list-style-type:square; }
转自 w3school
0 0
- CSS list-style 属性
- CSS列表属性list-style-type 和 list-style-image
- CSS list-style属性控制li标签样式
- CSS list-style修改列表属性控制li标签样式
- CSS style属性大全
- CSS style属性大全
- CSS border-style 属性
- CSS border-style 属性
- CSS outline-style 属性
- CSS list-style样式集锦
- list-style-type 属性设置
- JavaScript CSS Style属性参考
- CSS border-style 属性查询
- CSS控制列表样式属性list-style有哪些?怎么用?
- 列表属性list-style-type、图像符号list-style-image、列表缩进list-style-position
- css reset中的list-style:none
- CSS: list-style 和 inline 用法详解
- 列表样式类型属性(list-style-type)
- linux下apache+SVN搭建完美版
- XDL-(1)Linux文件操作命令
- ceph存储 object的attr和omap操作
- C++ STL迭代器相应型别的推导总结
- 八大排序算法
- CSS list-style 属性
- WSTMall 微信登录配置
- Qt中文手册 之 QTreeWidgetItem
- 谈论谋略
- 101. Symmetric Tree [easy] (Python)
- leetcode Gas Station
- 自己写的字符处理函数+字符处理函数
- Android多个activity退出问题处理
- JAV开发笔记系列--1-在MAC上利用Android Studio开发JAVA项目