第四章　顏色背景的ＣＳＳ

本　章　Ｃ　Ｓ　Ｓ　的　主　要　作　用

在前面的章節介紹完了聲明與應用的方法及 一些特性之後，從這章開始，便要正式進入ＣＳＳ的指令介紹了！本章有兩個介紹的主 題，第一個部份介紹的是顏色與背景性質的ＣＳＳ，其主要的作用在于設定元素的前景 顏色、背景顏色與背景圖形等樣式設定的性質；而第二部份為您介紹的是用于控制擺放 元素位置的ＣＳＳ的指令。

顏　色　背　景　的　Ｃ　Ｓ　Ｓ　指　令

color　設定前景顏色

支　持：ＩＥ３、ＩＥ４、ＮＣ４

適　用：所有元素

可能值： 設定顏色，請參考第一章顏色使用的相關說明

預設值：視瀏覽器而定

繼承性：有

一般范例：SPAN { color : BLUE }

同軸范例：

background-color　設定背景顏色

支　持：ＩＥ４、ＮＣ４

適　用：所有元素

可能值： 設定顏色，請參考第一章顏色使用的相關說明

transparent 將父元素(顏色或圖案)的背景透明化

預設值：transparent

繼承性：無

一般范例：BODY { background-color : BLUE }

同軸范例：

background-image　設定背景圖形

支　持：ＩＥ４、ＮＣ４

適　用：所有元素

可能值： 設定圖檔URL，請參考第一章URL表示的相關說明

none 不使用背景圖案

預設值：transparent

繼承性：無

一般范例：

BODY { background-image : URL("http://yourweb/path/file_name") }

同軸范例：

background-repeat　設定背景重復

支　持：ＩＥ４、ＮＣ４

適　用：所有元素

可能值： repeat 重復背景圖形填滿頁面

repeat-x 水平方向重復背景圖形

repeat-y 垂直方向重復背景圖形

no-repeat 不重復顯示背景圖形

預設值：repeat

繼承性：無

一般范例：BODY { background-repeat : repeat-x }

同軸范例：

background-attachment　設定背景附著

支　持：ＩＥ４、ＮＣ４

適　用：所有元素

可能值： scroll 背景圖形隨著卷軸卷動

fixed 背景圖形隨著卷軸卷動(浮水印)

預設值：scrool

繼承性：無

一般范例：BODY { background-attachment : fixed }

同軸范例：

background-position　設定背景位置

支　持：ＩＥ４、ＮＣ４

適　用：區塊元素

可能值： X% Y% 圖形上X% Y%的點對準元素的X% Y%位置

X Y 將圖形左上角置于元素左上角水平 X垂直 Y之處

center 背景圖形置于中央

left 背景圖形對　左邊

right 背景圖形對　右邊

top 背景圖形對　頂部

bottom 背景圖形對　底部

預設值：0% 0%

繼承性：無

一般范例：BODY { background- position : 100% 50% }

同軸范例：

background　綜合設定背景性質

支　持：ＩＥ３、ＩＥ４、ＮＣ４

適　用：所有元素

可能值： background-color 設定背景顏色

background-image 設定背景圖形

background-repeat 設定背景重復

background-attachment 設定背景附著

background-position 設定背景位置

預設值：無

繼承性：無

一般范例：

BODY { BLUE url(image/gif) repeat-x fixed center }

同軸范例：

位　置　擺　放　的　Ｃ　Ｓ　Ｓ　指　令

float　設定浮動性質(多用于文繞圖的情形)

支　持：ＩＥ４、ＮＣ４

適　用：區塊元素或圖形

可能值： left 元素靠左，文字圍繞其右

right 元素靠右，文字圍繞其左

none 以預設的方法顯示

預設值：none

繼承性：無

一般范例：DIV { float : right }

同軸范例：

clear　設定清除性質(設定是否允許浮動元素之存在)

支　持：ＩＥ４

適　用：區塊元素或圖形

可能值： both 若兩邊有浮動元素，則該元素移至浮動元素下方

left 若左邊有浮動元素，則該元素移至浮動元素下方

right 若右邊有浮動元素，則該元素移至浮動元素下方

none 以預設的方法顯示

預設值：none

繼承性：無

一般范例：DIV { clear : right }

同軸范例：

width　設定寬度

支　持：ＩＥ４、ＮＣ４

適　用：區塊元素或圖形

可能值： 長度單位，請參考第一章基本單位的相關說明

百分比，以父元素寬度為基準

auto 以固定比例自動變化大小

預設值：auto

繼承性：無

一般范例：DIV { width : 300pt }

同軸范例：

height　設定高度

支　持：ＩＥ４、ＮＣ４

適　用：區塊元素或圖形

可能值： 長度單位，請參考第一章基本單位的相關說明

百分比，以父元素寬度為基準

auto 以固定比例自動變化大小

預設值：auto

繼承性：無

一般范例：DIV { height : 300pt }

同軸范例：

position　設定位置

支　持：ＩＥ４、ＮＣ４

適　用：區塊元素

可能值： absolute 以父元素為基準，擺設在特定位置上

relative 以相鄰元素為基準，擺設在特定位置上

static 預設位置，以該元素于原始碼中位置而定

預設值：absolute

繼承性：無

一般范例：DIV { position : static }

同軸范例：

top　設定頂端位置

支　持：ＩＥ４、ＮＣ４

適　用：區塊元素

可能值： 長度單位，請參考第一章基本單位的相關說明

百分比，以父元素寬度為基準

auto 以正常方式顯示

預設值：auto

繼承性：無

一般范例：DIV { top : 30pt }

同軸范例：

left　設定左端位置

支　持：ＩＥ４、ＮＣ４

適　用：區塊元素

可能值： 長度單位，請參考第一章基本單位的相關說明

百分比，以父元素寬度為基準

auto 以正常方式顯示

預設值：auto

繼承性：無

一般范例：DIV { left : 30pt }

同軸范例：

clip　設定裁剪(設定某區域形狀及大小，區域外通透)

支　持：ＩＥ４、ＮＣ４

適　用：區塊元素

可能值： rect(top,right,bottom,left) 設定矩形之上右下左長度，會自動比對對邊長度

一般 寫法為rect(0,長度,長度,0)

不可以寫為rect(0,0,長度,長度)

四個數值皆可以"auto"代替

auto 以正常方式顯示

預設值：auto

繼承性：無

一般范例：DIV { clip : rect(0,100px,50px,0) }

同軸范例：

overflow　設定溢位處理(控制當元素內容超過該元素大小時的顯示方式)

支　持：ＩＥ４

適　用：區塊元素

可能值： visible 元素將不會依所設訂大小顯示，而能看見所有內容

hidden 超過元素所設訂大小之部份將被隱藏不予顯示

scroll 如有必要出現卷軸可讓使用者看到全部的內容

auto 以預設的方式顯示

預設值：auto

繼承性：無

一般范例：DIV { overflow : scroll }

同軸范例：

visibility　設定可視度

支　持：ＩＥ４、ＮＣ４

適　用：所有元素

可能值： visible 設定該元素顯示

hidden 設定該元素不顯示，但仍占據空間

inherit 以父元素可視度決定

預設值：inherit

繼承性：無

一般范例：DIV { visibility : hidden }

同軸范例：

z-index　設定Ｚ軸參數(三度空間)

支　持：ＩＥ４、ＮＣ４

適　用：區塊元素

可能值： 十進位數值，數值大的元素會出現在數值小的元素的上方

auto 當元素位置重復時，原始碼中寫在後面元素會出現在寫在前面元素的上方

預設值：auto

繼承性：無

一般范例：DIV { z-index : 3 }

同軸范例：

本文作者:相關閱讀:

asp.NET中使用include

DOS下網絡瀏覽器的使用方法

MYSQL教程:如何選擇正確的數據列類型

Windows2008 最新版Apache2、PHP5、MySQL6、PHPMyadmin、ZendOptimizer安裝圖解

CSS 透明背景時,記得給容器加上width寬度

css圖片自適應大小

白刃之戰：PHP vs. ASP.NET(節選)－架構比較

MYSQL教程:MySQL的一些優化配置

ASP 千萬級數據分頁的存儲過程

IIS 6 的 PHP 最佳配置方法

JavaScript中Math對象使用說明

Notice: Undefined index: page in E:\PHP\test.php on line 14

JDBC連接Oracle數據庫常見問題及解決方法

用CSS構建iframe效果

總結

以上是生活随笔為你收集整理的html彩色背景指令,HTML_第四章　颜色背景的ＣＳＳ，本　章　Ｃ　Ｓ　Ｓ　的　主 - phpStudy...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。