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 on 2007-10-08 14:40
CoderDream 阅读(6554)
评论(0) 编辑 收藏 所属分类:
CSS