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 閱讀(6563)
評論(0) 編輯 收藏 所屬分類:
CSS