Dzwebs.Net

撰写电脑技术杂文十余年

CSS之Lists及Classification对象说明、例子

Admin | 2008-5-16 22:07:40 | 被阅次数 | 7155

温馨提示!

如果未能解决您的问题,请点击搜索;登陆可复制文章,点击登陆

一:list-style

语法:
 
list-style : list-style-image || list-style-position || list-style-type
 
参数:
 
该属性是复合属性。请参阅各参数对应的属性。
 
说明:
 
设置列表项目相关内容。  
 
示例:
 
li { list-style: url("http://www.dzwebs.net/logo/logo.gif"), inside, circle; }
ul { list-style: outside, upper-roman; }
ol { list-style: square; }

二:list-style-image

语法:
 
list-style-image : none | url (url)
 
参数:
 
none :  不指定图像
url :  使用绝对或相对地址指定背景图像
 
说明:
 
设置或检索作为对象的列表项标记的图像。
若list-style-image属性为none或指定图像不可用时,list-style-type属性将发生作用。 
 
示例:
 
ul.out { list-style-position: outside; list-style-image: url("images/ie.gif"); }

三:list-style-position

语法:
 
list-style-position : outside | inside
 
参数:
 
outside :  列表项目标记放置在文本以外,且环绕文本不根据标记对齐
inside :  列表项目标记放置在文本以内,且环绕文本根据标记对齐
 
说明:
 
设置或检索作为对象的列表项标记如何根据文本排列。
仅作用于具有display值等于list-item的对象(如li对象)。
 
示例:
 
ul.in { display: list-item; list-style-position: inside; }

四:list-style-type

语法:
 
list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin
 
参数:
 
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 大写拉丁字母
 
说明:
 
设置或检索对象的列表项所使用的预设标记。
若list-style-image属性为none或指定图像不可用时,list-style-type属性将发生作用。
仅作用于具有display值等于list-item的对象(如li对象)。
 
示例:
 
li { list-style-type: square }

五:marker-offset

语法:
 
marker-offset : auto | length
 
参数:
 
auto :  浏览器自动设置间距
length :  由浮点数字和单位标识符组成的长度值。可为负值。请参阅长度单位
 
说明:
 
设置或检索标记容器和主容器之间水平补白。即两个容器靠近的一边的间距。 
 
示例:
 
li:before { display: marker; marker-offset: 5px; }

六:cursor

cursor : auto | crosshair | default | hand | move | help | wait | text | w-resize |s-resize | n-resize |e-resize | ne-resize |sw-resize | se-resize | nw-resize |pointer | url (url)
 
参数: crosshair default hand pointer
move help wait text
w-resize s-resize n-resize e-resize
ne-resize sw-resize se-resize nw-resize
auto url(imgs/123.gif)

您将鼠标在上方的表格内移动,就能看到本属性在您当前的软件环境下可以使用的样式。
以这种颜色为背景色的是IE5.5尚不支持的值。
 
说明:
 
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 
 
示例:
 
p { cursor: text; }
a { cursor: pointer; }
body { cursor: url("mycursor.gif"), url("images/cursors/footcursor.jpg"), default; }

七:behavior

语法:
 
behavior : url (url) | url (#objID ) | url (#default#behaviorName)
 
参数:
 
url (url) : 使用绝对或相对地址指定DHTML行为组件(.htc)
url (#objID ) : 用二进制实现DHTML行为,#objID为object对象指定的id特性
url (#default#behaviorName) : IE的默认行为。由behaviorName指定
 
说明:
 
设置或检索对象的DHTML行为。
多个行为之间用空格隔开。 
 
示例:
 
div { behavior: url(fly.htc) url(shy.htc); }

八:filter

语法:
 
filter : filter
 
参数:
 
filter :  要使用的滤镜效果。多个滤镜之间用空格隔开。具体请参阅我的相关著作
 
说明:
 
设置或检索对象所应用的滤镜效果。
要使用该属性,对象必须具有height,width,position三个属性中的一个。
滤镜的机制是可扩展的。可以开发和使用第三方滤镜。
该属性在MAC平台上不可用。 
 
示例:
 
div { width:200px; filter:blur(strength=50) flipv() ; }
img { filter: invert(); }

九:zoom

语法:
 
zoom : normal | number
 
参数:
 
normal :  使用对象的实际尺寸
number :  百分数|无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的normal值
 
说明:
 
设置或检索对象的缩放比例。  
 
示例:
 
div {zoom : 0.75; }


该杂文来自: 网页制作杂文

上一篇:CSS之Content和Paddings用法介绍

下一篇:使用CSS中的Scrollbar属性Properties来设置滚动条

网站备案号:

网站备案号:滇ICP备11001339号-7

版权属性:

Copyright 2007-2021-forever Inc. all Rights Reserved.

联系方式:

Email:dzwebs@126.com QQ:83539231 访问统计