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

王朝数码·作者佚名  2009-04-28
窄屏简体版  字體: |||超大  

平时制作页面中可对属性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来写。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航