解析CSS列表样式属性list-style

来源:ayan2006的日志 时间:2009-03-26 13:16:00 

平时制作页面中可对属性list-style在list-item对象中常用,但用的都不深。一般都设为none重置整个页面就差不多OK,可能很多人包括本人对属性list-style-type更细节方面的属性并不是很了解,更有可能对属性list-style和属性list-style-type概念会比较模糊,现有必要把它提出来重新学习一下,故整理如下。

● list-style

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

相关 : list-style-image || list-style-position || list-style-type

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

取值:

none :  默认值。不指定图像
url ( url ) :  使用绝对或相对 url 地址指定图像

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

取值:

outside :  默认值。列表项目标记放置在文本以外,且环绕文本不根据标记对齐
inside :  列表项目标记放置在文本以内,且环绕文本根据标记对齐

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

取值:

disc :  CSS1 实心圆
circle :  CSS1 空心圆
square :  CSS1 实心方块
decimal :  CSS1 阿拉伯数字
lower-roman :  CSS1 小写罗马数字
upper-roman :  CSS1 大写罗马数字
lower-alpha :  CSS1 小写英文字母
upper-alpha :  CSS1 大写英文字母
none :  CSS1 不使用项目符号
armenian :  CSS2 传统的亚美尼亚数字
cjk-ideographic :  CSS2 浅白的表意数字
georgian :  CSS2 传统的乔治数字
lower-greek :  CSS2 基本的希腊小写字母
hebrew :  CSS2 传统的希伯莱数字
hiragana :  CSS2 日文平假名字符
hiragana-iroha :  CSS2 日文平假名序号
katakana :  CSS2 日文片假名字符
katakana-iroha :  CSS2 日文片假名序号
lower-latin :  CSS2 小写拉丁字母
upper-latin :  CSS2 大写拉丁字母

补充:此CSS2.1提出的.IE6,Firefox1.5+,Opera9+支持此属性,所以以数字方式显示列表也可以用ul来指定,并不一定必需要用ol来写。

标签:css,属性,列表,list-style
0
投稿

猜你喜欢

  • DreamweaverMX2004技巧两则

    2010-09-05 21:10:00
  • 在MySQL中创建实现自增的序列(Sequence)的教程

    2024-01-25 02:42:13
  • JS中模拟函数重载

    2008-01-03 16:46:00
  • Windows下nodejs安装及环境配置的实战步骤

    2024-05-03 15:36:22
  • 详解Python程序与服务器连接的WSGI接口

    2021-11-19 03:57:10
  • python练习之循环控制语句 break 与 continue

    2022-04-15 12:31:20
  • mysql累积聚合原理与用法实例分析

    2024-01-25 14:23:43
  • Python 虚拟机集合set实现原理及源码解析

    2023-11-20 11:36:13
  • python中datetime模块中strftime/strptime函数的使用

    2023-11-15 15:02:46
  • Pytorch 实现sobel算子的卷积操作详解

    2022-02-22 10:11:37
  • js显示动态时间的方法详解

    2024-05-05 09:12:35
  • Pytorch:Conv2d卷积前后尺寸详解

    2021-01-18 23:36:54
  • 表单系列·出错字段排行榜

    2008-07-01 12:57:00
  • 在Golang代码中如何自动生成版本号的方法示例

    2023-10-14 23:25:36
  • 解决Mac下使用python的坑

    2021-02-26 21:47:38
  • python中的列表和元组实例详解

    2023-07-26 23:04:12
  • Tag与Tagging

    2009-10-15 12:59:00
  • 详解Numpy中的广播原则/机制

    2023-11-15 02:49:44
  • 史上最全Python文件类型读写库大盘点

    2021-01-28 22:08:26
  • 对python3 Serial 串口助手的接收读取数据方法详解

    2023-05-31 17:39:01
  • asp之家 网络编程 m.aspxhome.com