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 @
2007-10-08 17:18 CoderDream 阅读(610) |
评论 (2) |
编辑 收藏
3.3、颜色和背景属性
3.3.1、颜色
3.3.2、背景颜色
3.3.3、背景图像
3.3.4、背景图像重复
3.3.5、背景图像位置
| 文本属性 |
描述 |
| color |
定义颜色 |
| background-color |
设定一个元素的背景颜色 |
| background-image |
设定一个元素的背景图像 |
| background-repeat |
决定一个指定的背景图像如何被重复 |
| background-position |
设置水平和垂直方向上的位置 |
3.2.1、 颜色
颜色 color 属性允许网页制作者指定一个元素的颜色，一般用RGB，#FFFFFF（16进制数）表示。
文件范例：13-13.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-13.htm -->
<!-- 文件说明：CSS颜色 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS颜色</TITLE>
<Style Type="text/css">
<!--
H1 {
color:#336699
}
.text {
color:#ffcc00
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的网页设计软件</H1>
<p class=text>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
</BODY>
</HTML>
显示结果：
3.2.2、背景颜色
文件范例：13-14.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-14.htm -->
<!-- 文件说明：CSS背景颜色 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS背景颜色</TITLE>
<Style Type="text/css">
<!--
body {
background-color:#336699
}
H1 {
background-color:#ffffff
}
.text {
background-color:#ffcc00
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的网页设计软件</H1>
<p class="text">目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
</BODY>
</HTML>
显示结果：
3.2.3、背景图像
文件范例：13-15.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-15.htm -->
<!-- 文件说明：CSS背景图像 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS背景图像</TITLE>
<Style Type="text/css">
<!--
body {
Background-image:url(13-15.gif)
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的网页设计软件</H1>
<p class=text>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
</BODY>
</HTML>
显示结果：
3.2.4、背景图像重复
| 背景图像重复属性值 |
描述 |
| repeat-x |
图像横向重复 |
| repeat-y |
图像纵向重复 |
| repeat |
图像横向纵向重复 |
| no-repeat |
图像不重复（只显示一张图，无任何方向的平铺） |
文件范例：13-16.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-16.htm -->
<!-- 文件说明：CSS背景图像重复 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS背景图像重复</TITLE>
<Style Type="text/css">
<!--
body {
Background-image:url(13-15.gif);
background-repeat: repeat-y
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的网页设计软件</H1>
<p class="text">目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
</BODY>
</HTML>
显示结果：
3.2.5、背景图像位置
| 背景图像位置属性值 |
描述 |
| left |
背景图像居左 |
| right |
背景图像居右 |
| center |
背景图像水平居中，垂直居中 |
| top |
背景图像上对齐 |
| bottom |
背景图像下对齐 |
与 background-repeat 属性结合使用，否则没有任何效果，因为 background-repeat 的默认属性为repeat。
文件范例：13-17.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-17.htm -->
<!-- 文件说明：CSS背景图像位置 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS背景图像位置</TITLE>
<Style Type="text/css">
<!--
body {
Background-image:url(13-15.gif);
background-repeat:repeat-y;
Background-position:right top
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的网页设计软件</H1>
<p class=text>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
</BODY>
</HTML>
显示结果：
posted @
2007-10-08 14:40 CoderDream 阅读(268) |
评论 (0) |
编辑 收藏
3.2、文本属性
3.2.1、字母间隔
3.2.2、文字修饰
3.2.3、文字排列
3.2.4、文本缩进
3.2.5、行间距
| 文本属性 |
描述 |
| letter-spacing |
定义一个附加在字符之间的间隔数量 |
| text-decoration |
文本修饰属性允许通过五个属性中的一个来修饰文本 |
| text-align |
设置文本的水平对齐方式，包括左对齐、右对齐、居中、两端对齐 |
| text-indent |
文字的首行缩进 |
| line-height |
行高属性接受一个控制文本基线之间的间隔的值 |
3.2.1、 字母间隔
letter-spacing 属性定义一个附加在字符之间的间隔数量，改值必须符合长度格式，允许使用负值。一个设为0的值会阻止文字的调整。
文件范例：13-8.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-8.htm -->
<!-- 文件说明：CSS字母间隔 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS字母间隔</TITLE>
<Style Type="text/css">
<!--
H1{
letter-spacing: -10px
}
.text {
letter-spacing: 5px
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的网页设计软件</H1>
<p class=text>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
</BODY>
</HTML>
显示结果：
3.2.2、文字修饰
| 文字修饰属性值 |
描述 |
| underline |
下划线 |
| overline |
上划线 |
| line-through |
删除线 |
| blink |
闪烁，只适用 NetScape 浏览器 |
| none |
无任何修饰 |
文件范例：13-9.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-9.htm -->
<!-- 文件说明：CSS文字修饰 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS文字修饰</TITLE>
<Style Type="text/css">
<!--
a:link {
font-family: "宋体";
text-decoration: none
}
a:visited {
font-family: "宋体";
text-decoration: none
}
a:hover{
font-family:"宋体";
text-decoration: underline
}
.text {
text-decoration: underline
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的网页设计软件</H1>
<p class="text">目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、FIireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
<A href=mailto:husong@elong.com>给我来信</A>
</BODY>
</HTML>
显示结果：
3.2.3、文本排列
| 文字排列属性值 |
描述 |
| left |
左对齐 |
| center |
居中对齐 |
| right |
右对齐 |
| justify |
两端对齐 |
文件范例：13-10.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-10.htm -->
<!-- 文件说明：CSS文本排列 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS文本排列</TITLE>
<Style Type="text/css">
<!--
H1 {
text-align:center
}
.text {
text-align:justify
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的网页设计软件</H1>
<p class=text>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
<A href=mailto:husong@elong.com>给我来信</A>
</BODY>
</HTML>
显示结果：
3.2.4、文本缩进
文本缩进 text-indent 属性可以应用于块级元素（P，H1等），定义该元素第1行可以接受的缩进的数量。改值必须是一个长度或一个百分比，若为百分比，则视上级元素的宽度而定。通用的文本缩进用法是用于段缩进。
文件范例：13-11.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-11.htm -->
<!-- 文件说明：CSS文本缩进 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS文本缩进</TITLE>
<Style Type="text/css">
<!--
H1 {
text-indent:100pt
}
.text {
text-indent:24pt
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的网页设计软件</H1>
<p class="text">目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
<A href=mailto:husong@elong.com>给我来信</A>
</BODY>
</HTML>
显示结果：
3.2.5、行间距
行间距 line-height 属性可以接受一个控制文本基线之间的间隔的值。当值为百分比数字时，行高由元素字体大小的量与该数字相乘所得，百分比的值相对于元素字体的大小而定，不允许使用负值。
文件范例：13-12.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-12.htm -->
<!-- 文件说明：CSS行间距 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS行间距</TITLE>
<Style Type="text/css">
<!--
.text {
line-height:24pt
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的网页设计软件</H1>
<p class="text">目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
<A href=mailto:husong@elong.com>给我来信</A>
</BODY>
</HTML>
显示结果：
posted @
2007-10-08 14:14 CoderDream 阅读(374) |
评论 (0) |
编辑 收藏
3、CSS的属性和值
3.1、字体属性
3.1.1、字体族科
3.1.2、字体大小
3.1.3、字体风格
3.1.4、字体加粗