第四章 顏色背景的CSS

第四章 顏色背景的CSS

轉自:動態網製作指南 www.knowsky.com
本 章 C S S 的 主 要 作 用

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


顏 色 背 景 的 C S S 指 令

color 設定前景顏色
支 持:IE3、IE4、NC4
適 用:所有元素
可能值:
<color>設定顏色,請參考第一章顏色使用的相關說明
預設值:視瀏覽器而定
繼承性:
一般範例:SPAN { color : BLUE }
同軸範例:<SPAN style="color:BLUE">


background-color 設定背景顏色
支 持:IE4、NC4
適 用:所有元素
可能值:
<color>設定顏色,請參考第一章顏色使用的相關說明
transparent將父元素(顏色或圖案)的背景透明化
預設值:transparent
繼承性:
一般範例:BODY { background-color : BLUE }
同軸範例:<BODY style="background-color:BLUE">


background-image 設定背景圖形
支 持:IE4、NC4
適 用:所有元素
可能值:
<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 設定背景重複
支 持:IE4、NC4
適 用:所有元素
可能值:
repeat重複背景圖形填滿頁面
repeat-x水平方向重複背景圖形
repeat-y垂直方向重複背景圖形
no-repeat不重複顯示背景圖形
預設值:repeat
繼承性:
一般範例:BODY { background-repeat : repeat-x }
同軸範例:<BODY style="background-repeat: repeat-x">


background-attachment 設定背景附著
支 持:IE4、NC4
適 用:所有元素
可能值:
scroll背景圖形隨著卷軸捲動
fixed背景圖形隨著卷軸捲動(浮水印)
預設值:scrool
繼承性:
一般範例:BODY { background-attachment : fixed }
同軸範例:<BODY style="background-attachment:fixed">


background-position 設定背景位置
支 持:IE4、NC4
適 用:區塊元素
可能值:
<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 綜合設定背景性質
支 持:IE3、IE4、NC4
適 用:所有元素
可能值:
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">
位 置 擺 放 的 C S S 指 令

float 設定浮動性質(多用於文繞圖的情形)
支 持:IE4、NC4
適 用:區塊元素或圖形
可能值:
left元素靠左,文字圍繞其右
right元素靠右,文字圍繞其左
none以預設的方法顯示
預設值:none
繼承性:
一般範例:DIV { float : right }
同軸範例:<DIV style="float:right">


clear 設定清除性質(設定是否允許浮動元素之存在)
支 持:IE4
適 用:區塊元素或圖形
可能值:
both若兩邊有浮動元素,則該元素移至浮動元素下方
left若左邊有浮動元素,則該元素移至浮動元素下方
right若右邊有浮動元素,則該元素移至浮動元素下方
none以預設的方法顯示
預設值:none
繼承性:
一般範例:DIV { clear : right }
同軸範例:<DIV style="clear:right">


width 設定寬度
支 持:IE4、NC4
適 用:區塊元素或圖形
可能值:
<length>長度單位,請參考第一章基本單位的相關說明
<percentage>百分比,以父元素寬度爲基準
auto以固定比例自動變化大小
預設值:auto
繼承性:
一般範例:DIV { width : 300pt }
同軸範例:<DIV style="width:300pt">


height 設定高度
支 持:IE4、NC4
適 用:區塊元素或圖形
可能值:
<length>長度單位,請參考第一章基本單位的相關說明
<percentage>百分比,以父元素寬度爲基準
auto以固定比例自動變化大小
預設值:auto
繼承性:
一般範例:DIV { height : 300pt }
同軸範例:<DIV style="height:300pt">


position 設定位置
支 持:IE4、NC4
適 用:區塊元素
可能值:
absolute以父元素爲基準,擺設在特定位置上
relative以相鄰元素爲基準,擺設在特定位置上
static預設位置,以該元素於原始碼中位置而定
預設值:absolute
繼承性:
一般範例:DIV { position : static }
同軸範例:<DIV style="position:static">


top 設定頂端位置
支 持:IE4、NC4
適 用:區塊元素
可能值:
<length>長度單位,請參考第一章基本單位的相關說明
<percentage>百分比,以父元素寬度爲基準
auto以正常方式顯示
預設值:auto
繼承性:
一般範例:DIV { top : 30pt }
同軸範例:<DIV style="top:30pt">


left 設定左端位置
支 持:IE4、NC4
適 用:區塊元素
可能值:
<length>長度單位,請參考第一章基本單位的相關說明
<percentage>百分比,以父元素寬度爲基準
auto以正常方式顯示
預設值:auto
繼承性:
一般範例:DIV { left : 30pt }
同軸範例:<DIV style="left:30pt">


clip 設定裁剪(設定某區域形狀及大小,區域外通透)
支 持:IE4、NC4
適 用:區塊元素
可能值:
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 設定溢位處理(控制當元素內容超過該元素大小時的顯示方式)
支 持:IE4
適 用:區塊元素
可能值:
visible元素將不會依所設訂大小顯示,而能看見所有內容
hidden超過元素所設訂大小之部份將被隱藏不予顯示
scroll如有必要出現卷軸可讓使用者看到全部的內容
auto以預設的方式顯示
預設值:auto
繼承性:
一般範例:DIV { overflow : scroll }
同軸範例:<DIV style="overflow:scroll">


visibility 設定可視度
支 持:IE4、NC4
適 用:所有元素
可能值:
visible設定該元素顯示
hidden設定該元素不顯示,但仍佔據空間
inherit以父元素可視度決定
預設值:inherit
繼承性:
一般範例:DIV { visibility : hidden }
同軸範例:<DIV style="visibility:hidden">


z-index 設定Z軸參數(三度空間)
支 持:IE4、NC4
適 用:區塊元素
可能值:
<number>十進位數值,數值大的元素會出現在數值小的元素的上方
auto當元素位置重複時,原始碼中寫在後面元素會出現在寫在前面元素的上方
預設值:auto
繼承性:
一般範例:DIV { z-index : 3 }
同軸範例:<DIV style="z-index:3">
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章