第4章　顏色背景的ＣＳＳ|蘿卜系統下載站

網站建設是指使用標識語言（markup language)，通過一系列設計、建模、和執行的過程將電子格式的信息通過互聯網傳輸，最終以圖形用戶界面（GUI）的形式被用戶所瀏覽。簡單來說，網頁設計的目的就是產生網站。簡單的信息如文字，圖片（GIF，JPEG，PNG）和表格，都可以通過使超文件標示語言、可擴展超文本標記語言等標示語言放置到網站頁面上。

本　章　Ｃ�。印。印〉摹≈鳌∫∽鳌∮�

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

顏　色　背　景　的�。谩。印。印≈浮×�

color　設定前景顏色

支　持：ＩＥ３、ＩＥ４、ＮＣ４
適　用：所有元素
可能值：

<color>

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

預設值：視瀏覽器而定
繼承性：有

一般范例：SPAN { color : BLUE }
同軸范例：<SPAN style="color:BLUE">

background-color　設定背景顏色

支　持：ＩＥ４、ＮＣ４
適　用：所有元素
可能值：

<color>	設定顏色，請參考第一章顏色使用的相關說明
transparent	將父元素（顏色或圖案）的背景透明化

預設值：transparent
繼承性：無

一般范例：BODY { background-color : BLUE }
同軸范例：<BODY style="background-color:BLUE">

background-image　設定背景圖形

支　持：ＩＥ４、ＮＣ４
適　用：所有元素
可能值：

<url>	設定圖檔URL，請參考第一章URL表示的相關說明
none	不使用背景圖案

預設值：transparent
繼承性：無

一般范例：
BODY { background-image : URL("http://yourweb/path/file_name") }
同軸范例：
<BODY style="background-image:URL('http://yourweb/path/file_name')">

background-repeat　設定背景重復

支　持：ＩＥ４、ＮＣ４
適　用：所有元素
可能值：

repeat	重復背景圖形填滿頁面
repeat-x	水平方向重復背景圖形
repeat-y	垂直方向重復背景圖形
no-repeat	不重復顯示背景圖形

預設值：repeat
繼承性：無

一般范例：BODY { background-repeat : repeat-x }
同軸范例：<BODY style="background-repeat: repeat-x">

background-attachment　設定背景附著

支　持：ＩＥ４、ＮＣ４
適　用：所有元素
可能值：

scroll	背景圖形隨著卷軸卷動
fixed	背景圖形隨著卷軸卷動（浮水�。�

預設值：scrool
繼承性：無

一般范例：BODY { background-attachment : fixed }
同軸范例：<BODY style="background-attachment:fixed">

background-position　設定背景位置

支　持：ＩＥ４、ＮＣ４
適　用：區塊元素
可能值：

<percent> X% Y%	圖形上X% Y%的點對準元素的X% Y%位置
<length> X Y	將圖形左上角置于元素左上角水平 X垂直 Y之處
center	背景圖形置于中央
left	背景圖形對　左邊
right	背景圖形對　右邊
top	背景圖形對　頂部
bottom	背景圖形對　底部

預設值：0% 0%
繼承性：無

一般范例：BODY { background- position : 100% 50% }
同軸范例：<BODY style="background- position:100% 50%">

background　綜合設定背景性質

支　持：ＩＥ３、ＩＥ４、ＮＣ４
適　用：所有元素
可能值：

background-color	設定背景顏色
background-image	設定背景圖形
background-repeat	設定背景重復
background-attachment	設定背景附著
background-position	設定背景位置

預設值：無
繼承性：無

一般范例：
BODY { BLUE url(image/gif) repeat-x fixed center }
同軸范例：
<BODY style="BLUE url(image/gif) repeat-x fixed center">

位　置　擺　放　的�。谩。印。印≈浮×�

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

支　持：ＩＥ４、ＮＣ４
適　用：區塊元素或圖形
可能值：

left	元素靠左，文字圍繞其右
right	元素靠右，文字圍繞其左
none	以預設的方法顯示

預設值：none
繼承性：無

一般范例：DIV { float : right }
同軸范例：<DIV style="float:right">

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

支　持：ＩＥ４
適　用：區塊元素或圖形
可能值：

both	若兩邊有浮動元素，則該元素移至浮動元素下方
left	若左邊有浮動元素，則該元素移至浮動元素下方
right	若右邊有浮動元素，則該元素移至浮動元素下方
none	以預設的方法顯示

預設值：none
繼承性：無

一般范例：DIV { clear : right }
同軸范例：<DIV style="clear:right">

width　設定寬度

支　持：ＩＥ４、ＮＣ４
適　用：區塊元素或圖形
可能值：

<length>	長度單位，請參考第一章基本單位的相關說明
<percentage>	百分比，以父元素寬度為基準
auto	以固定比例自動變化大小

預設值：auto
繼承性：無

一般范例：DIV { width : 300pt }
同軸范例：<DIV style="width:300pt">

height　設定高度

支　持：ＩＥ４、ＮＣ４
適　用：區塊元素或圖形
可能值：

<length>	長度單位，請參考第一章基本單位的相關說明
<percentage>	百分比，以父元素寬度為基準
auto	以固定比例自動變化大小

預設值：auto
繼承性：無

一般范例：DIV { height : 300pt }
同軸范例：<DIV style="height:300pt">

position　設定位置

支　持：ＩＥ４、ＮＣ４
適　用：區塊元素
可能值：

absolute	以父元素為基準，擺設在特定位置上
relative	以相鄰元素為基準，擺設在特定位置上
static	預設位置，以該元素于原始碼中位置而定

預設值：absolute
繼承性：無

一般范例：DIV { position : static }
同軸范例：<DIV style="position:static">

top　設定頂端位置

支　持：ＩＥ４、ＮＣ４
適　用：區塊元素
可能值：

<length>	長度單位，請參考第一章基本單位的相關說明
<percentage>	百分比，以父元素寬度為基準
auto	以正常方式顯示

預設值：auto
繼承性：無

一般范例：DIV { top : 30pt }
同軸范例：<DIV style="top:30pt">

left　設定左端位置

支　持：ＩＥ４、ＮＣ４
適　用：區塊元素
可能值：

<length>	長度單位，請參考第一章基本單位的相關說明
<percentage>	百分比，以父元素寬度為基準
auto	以正常方式顯示

預設值：auto
繼承性：無

一般范例：DIV { left : 30pt }
同軸范例：<DIV style="left:30pt">

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

支　持：ＩＥ４、ＮＣ４
適　用：區塊元素
可能值：

rect(top,right,bottom,left)	設定矩形之上右下左長度，會自動比對對邊長度一般寫法為rect(0,長度,長度,0) 不可以寫為rect(0,0,長度,長度) 四個數值皆可以"auto"代替
auto	以正常方式顯示

預設值：auto
繼承性：無

一般范例：DIV { clip : rect(0,100px,50px,0) }
同軸范例：<DIV style="clip:rect(0,100px,50px,0)">

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

支　持：ＩＥ４
適　用：區塊元素
可能值：

visible	元素將不會依所設訂大小顯示，而能看見所有內容
hidden	超過元素所設訂大小之部份將被隱藏不予顯示
scroll	如有必要出現卷軸可讓使用者看到全部的內容
auto	以預設的方式顯示

預設值：auto
繼承性：無

一般范例：DIV { overflow : scroll }
同軸范例：<DIV style="overflow:scroll">

visibility　設定可視度

支　持：ＩＥ４、ＮＣ４
適　用：所有元素
可能值：

visible	設定該元素顯示
hidden	設定該元素不顯示，但仍占據空間
inherit	以父元素可視度決定

預設值：inherit
繼承性：無

一般范例：DIV { visibility : hidden }
同軸范例：<DIV style="visibility:hidden">

z-index　設定Ｚ軸參數（三度空間）

支　持：ＩＥ４、ＮＣ４
適　用：區塊元素
可能值：

<number>	十進位數值，數值大的元素會出現在數值小的元素的上方
auto	當元素位置重復時，原始碼中寫在後面元素會出現在寫在前面元素的上方

預設值：auto
繼承性：無

一般范例：DIV { z-index : 3 }
同軸范例：<DIV style="z-index:3">

大多數人在上網的時候，都會瀏覽網頁提供給我們的信息。

溫馨提示：喜歡本站的話，請收藏一下本站！

當前位置:蘿卜系統下載站 > 網頁設計教程 > 詳細頁面

第4章　顏色背景的ＣＳＳ

本類教程下載

系統下載排行

當前位置:蘿卜系統下載站 > 網頁設計教程 > 詳細頁面

第4章 顏色背景的ＣＳＳ

本類教程下載

系統下載排行

第4章　顏色背景的ＣＳＳ