3.4、边框属性
3.5、鼠标光标属性
3.6、定位属性
3.7、区块属性
3.8、列表属性
3.3.4、边框属性
不同方向的边框属性如表所示：
| 边框属性 |
描述 |
| border |
边框 |
| border-top |
上边框 |
| border-left |
左边框 |
| border-right |
右边框 |
| border-bottom |
下边框 |
对于边框的样式，可以按照下表中所示进行设置：
| 边框样式属性值 |
描述 |
| none |
无边框 |
| dotted |
边框由点组成 |
| dash |
边框由短线组成 |
| solid |
边框是实线 |
| double |
边框是双实线 |
| groove |
边框带有立体感的沟槽 |
| ridge |
边框成脊型 |
| inset |
边框内嵌一个立体边框 |
| outset |
边框外嵌一个立体边框 |
范例文件：13-18.htm
1 <!-- ------------------------------ -->
2 <!-- 文件范例：13-18.htm -->
3 <!-- 文件说明：CSS边框 -->
4 <!-- ------------------------------ -->
5 <HTML>
6 <HEAD>
7 <TITLE>CSS背景图像位置</TITLE>
8 <Style Type="text/css">
9 <!--
10 P{
11 border-top: 2px solid #990000;
12 border-right: 2px solid #3399FF;
13 border-bottom: 2px solid #00FF33;
14 border-left: 2px solid #CC33FF;
15 }
16 -->
17 </Style>
18 </HEAD>
19 <BODY>
20 <H1>主流的网页设计软件</H1>
21 <p>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
22 </BODY>
23 </HTML>
文件说明：
第10～15行分别设定了上、右、下、左4个边框的宽度、边框样式和颜色。
显示结果：
3.4.5、鼠标光标属性
| 鼠标光标属性值 |
描述 |
| hand |
手 |
| crosshair |
交叉十字 |
| text |
文本选择符号 |
| wait |
Windows 的沙漏形状 |
| default |
默认的鼠标形状 |
| help |
带问号的鼠标 |
| e-resize |
向东的箭头 |
| ne-resize |
指向东北方的箭头 |
| n-resize |
向北的箭头 |
| nw-resize |
指向西北方的箭头 |
| w-resize |
向西的箭头 |
| sw-resize |
指向西南方的箭头 |
| s-resize |
向南的箭头 |
| se-resize |
指向东南方的箭头 |
范例文件：13-19.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-19.htm -->
<!-- 文件说明：CSS鼠标光标属性 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS鼠标光标属性</TITLE>
<Style Type="text/css">
<!--
Body{
CURSOR:CROSSHAIR
}
IMG{
Cursor:help
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的网页设计软件</H1>
<img src=13-19.jpg align=left>
<P>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
</BODY>
</HTML>
显示结果：
3.4.6、定位属性
| 定位属性 |
描述 |
| position |
“absolute”（绝对定位）、“relative”（相对定位） |
| top |
层距离顶点纵坐标的距离 |
| left |
层距离顶点横坐标的距离 |
| width |
层的宽度 |
| height |
层的高度 |
| z-index |
决定层的先后顺序和覆盖关系，值高的元素会覆盖值比较低的元素 |
| clip |
限定只显示裁切出来的区域，裁切出的区域为矩形。只要设定两个点即可，一个是矩形左上角的顶点，由top和right两项的设置完成，另一个是右下角的顶点，由bottom和 right 两项设置完成 |
| overflow |
当层内的内容超出层所能容纳的范围时：
visible：层的大小、内容都会显示出来
hidden：会隐藏超出层大小的内容
scrol：不管内容是否超出层的范围，选中此项都会为层添加滚动条
auto：只在内容超出层的范围时才显示滚动条
|
| visibility |
这一项是针对嵌套层的设置，嵌套层是插入在其他层中的层，分为嵌套的层（子层）和被嵌套的层（父层）
inherit：子层继承父层的可见性，父层可见，子层也可见；父层不可见，子层也不可见
visible：无论父层可见与否，子层都可见
hidden：无论父层可见与否，子层都隐藏
|
范例文件：13-20.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-20.htm -->
<!-- 文件说明：CSS定位属性 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS定位属性</TITLE>
<Style Type="text/css">
<!--
.self{
position:absolute;
top:80px;
left:50px;
width:300px;
height:100px;
overflow:auto;
background-color:#336699;
color:#FFFFFF;
z-index:1;
visibility:visible;
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的网页设计软件</H1>
<div class="self">目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</div>
</BODY>
</HTML>
显示结果：
3.4.7、区块属性
| 区块属性 |
描述 |
| width |
设定对象的宽度 |
| height |
设定对象的高度 |
| float |
让文字环绕在一个元素的四周 |
| clear |
指定在某一个元素的某一边是否允许有环绕的文字或对象 |
| padding |
决定了究竟在边框与内容之间应该插入多少空间距离，它有4个属性，分别是：top、bottom、left、right，分别用于设定上下左右的填充距离 |
| margin |
设置一个元素在4个方向上与浏览器窗口边界或上一级元素的边界的距离。与“padding”类似，它也有上下左右4个属性，分别控制4个方向 |
范例文件：13-21.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-21.htm -->
<!-- 文件说明：CSS区块属性 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS区块属性</TITLE>
<Style Type="text/css">
<!--
.self{
width:300px;
height:100px;
MARGIN-TOP: 20PX;
MARGIN-RIGHT: 30PX;
MARGIN-BOTTOM: 20PX;
MARGIN-LEFT: 30PX
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的网页设计软件</H1>
<div class=self>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</div>
</BODY>
</HTML>
显示结果：
3.4.8、列表属性
| 列表属性 |
描述 |
| list-style-type |
设定引导列表选项的符号类型 |
| bullet |
选择图像作为项目的引导符号 |
| position |
决定列表项目缩进的程度，outside：列表贴近左侧边框；inside：列表缩进 |
| 列表符号类型属性值 |
描述 |
| disc |
在文本行前面加“●”实心园 |
| circle |
在文本行前面加“○”空心园 |
| square |
在文本行前面加“■”实心方块 |
| decimal |
在文本行前面加普通的阿拉伯数字 |
| lower-roman |
在文本行前面加小写罗马数字 |
| upper-roman |
在文本行前面加大写罗马数字 |
| lower-alpha |
在文本行前面加小写英文字母 |
| upper-alpha |
在文本行前面加大写英文字母 |
| none |
不显示任何项目符号或编号 |
范例文件：13-22.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-22.htm -->
<!-- 文件说明：CSS列表属性 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS列表属性</TITLE>
<Style Type="text/css">
<!--
li{
list-style-type:upper-roman;
}
-->
</Style>
</HEAD>
<BODY>
<H2>图像设计软件</H2>
<OL>
<LI>Photoshop</LI>
<LI>Illustrator</LI>
<LI>Freehand</LI>
<LI>CorelDraw</LI>
</OL>
</BODY>
</HTML>
显示结果：
posted on 2007-10-08 17:18
CoderDream 阅读(4193)
评论(2) 编辑 收藏 所属分类:
CSS