3.3、顏色和背景屬性
3.3.1、顏色
3.3.2、背景顏色
3.3.3、背景圖像
3.3.4、背景圖像重復(fù)
3.3.5、背景圖像位置
| 文本屬性 |
描述 |
| color |
定義顏色 |
| background-color |
設(shè)定一個(gè)元素的背景顏色 |
| background-image |
設(shè)定一個(gè)元素的背景圖像 |
| background-repeat |
決定一個(gè)指定的背景圖像如何被重復(fù) |
| background-position |
設(shè)置水平和垂直方向上的位置 |
3.2.1、 顏色
顏色 color 屬性允許網(wǎng)頁制作者指定一個(gè)元素的顏色，一般用RGB，#FFFFFF（16進(jìn)制數(shù)）表示。
文件范例：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>主流的網(wǎng)頁設(shè)計(jì)軟件</H1>
<p class=text>目前，網(wǎng)頁技術(shù)進(jìn)入了一個(gè)新的階段，現(xiàn)在的網(wǎng)頁再也不是圖片的堆積和枯燥無味的文本了，人們現(xiàn)在追求的是網(wǎng)頁的動(dòng)態(tài)效果和交互性。而Macromedia公司的網(wǎng)頁設(shè)計(jì)三劍客軟件Dreamweaver、Flash、Fireworks正是交互性網(wǎng)頁設(shè)計(jì)的杰出代表，其最新版本MX繼承了前期版本的優(yōu)點(diǎn)，進(jìn)行了功能的進(jìn)一步整合，非常適合于網(wǎng)頁設(shè)計(jì)和網(wǎng)站建設(shè)的需要。</P>
</BODY>
</HTML>
顯示結(jié)果：
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>主流的網(wǎng)頁設(shè)計(jì)軟件</H1>
<p class="text">目前，網(wǎng)頁技術(shù)進(jìn)入了一個(gè)新的階段，現(xiàn)在的網(wǎng)頁再也不是圖片的堆積和枯燥無味的文本了，人們現(xiàn)在追求的是網(wǎng)頁的動(dòng)態(tài)效果和交互性。而Macromedia公司的網(wǎng)頁設(shè)計(jì)三劍客軟件Dreamweaver、Flash、Fireworks正是交互性網(wǎng)頁設(shè)計(jì)的杰出代表，其最新版本MX繼承了前期版本的優(yōu)點(diǎn)，進(jìn)行了功能的進(jìn)一步整合，非常適合于網(wǎng)頁設(shè)計(jì)和網(wǎng)站建設(shè)的需要。</P>
</BODY>
</HTML>
顯示結(jié)果：
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>主流的網(wǎng)頁設(shè)計(jì)軟件</H1>
<p class=text>目前，網(wǎng)頁技術(shù)進(jìn)入了一個(gè)新的階段，現(xiàn)在的網(wǎng)頁再也不是圖片的堆積和枯燥無味的文本了，人們現(xiàn)在追求的是網(wǎng)頁的動(dòng)態(tài)效果和交互性。而Macromedia公司的網(wǎng)頁設(shè)計(jì)三劍客軟件Dreamweaver、Flash、Fireworks正是交互性網(wǎng)頁設(shè)計(jì)的杰出代表，其最新版本MX繼承了前期版本的優(yōu)點(diǎn)，進(jìn)行了功能的進(jìn)一步整合，非常適合于網(wǎng)頁設(shè)計(jì)和網(wǎng)站建設(shè)的需要。</P>
</BODY>
</HTML>
顯示結(jié)果：
3.2.4、背景圖像重復(fù)
| 背景圖像重復(fù)屬性值 |
描述 |
| repeat-x |
圖像橫向重復(fù) |
| repeat-y |
圖像縱向重復(fù) |
| repeat |
圖像橫向縱向重復(fù) |
| no-repeat |
圖像不重復(fù)（只顯示一張圖，無任何方向的平鋪） |
文件范例：13-16.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-16.htm -->
<!-- 文件說明：CSS背景圖像重復(fù) -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS背景圖像重復(fù)</TITLE>
<Style Type="text/css">
<!--
body {
Background-image:url(13-15.gif);
background-repeat: repeat-y
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的網(wǎng)頁設(shè)計(jì)軟件</H1>
<p class="text">目前，網(wǎng)頁技術(shù)進(jìn)入了一個(gè)新的階段，現(xiàn)在的網(wǎng)頁再也不是圖片的堆積和枯燥無味的文本了，人們現(xiàn)在追求的是網(wǎng)頁的動(dòng)態(tài)效果和交互性。而Macromedia公司的網(wǎng)頁設(shè)計(jì)三劍客軟件Dreamweaver、Flash、Fireworks正是交互性網(wǎng)頁設(shè)計(jì)的杰出代表，其最新版本MX繼承了前期版本的優(yōu)點(diǎn)，進(jìn)行了功能的進(jìn)一步整合，非常適合于網(wǎng)頁設(shè)計(jì)和網(wǎng)站建設(shè)的需要。</P>
</BODY>
</HTML>
顯示結(jié)果：
3.2.5、背景圖像位置
| 背景圖像位置屬性值 |
描述 |
| left |
背景圖像居左 |
| right |
背景圖像居右 |
| center |
背景圖像水平居中，垂直居中 |
| top |
背景圖像上對齊 |
| bottom |
背景圖像下對齊 |
與 background-repeat 屬性結(jié)合使用，否則沒有任何效果，因?yàn)?nbsp;background-repeat 的默認(rèn)屬性為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>主流的網(wǎng)頁設(shè)計(jì)軟件</H1>
<p class=text>目前，網(wǎng)頁技術(shù)進(jìn)入了一個(gè)新的階段，現(xiàn)在的網(wǎng)頁再也不是圖片的堆積和枯燥無味的文本了，人們現(xiàn)在追求的是網(wǎng)頁的動(dòng)態(tài)效果和交互性。而Macromedia公司的網(wǎng)頁設(shè)計(jì)三劍客軟件Dreamweaver、Flash、Fireworks正是交互性網(wǎng)頁設(shè)計(jì)的杰出代表，其最新版本MX繼承了前期版本的優(yōu)點(diǎn)，進(jìn)行了功能的進(jìn)一步整合，非常適合于網(wǎng)頁設(shè)計(jì)和網(wǎng)站建設(shè)的需要。</P>
</BODY>
</HTML>
顯示結(jié)果：
posted on 2007-10-08 14:40
CoderDream 閱讀(6565)
評論(0) 編輯 收藏 所屬分類:
CSS