在前面的章節介紹完了聲明與應用的方法及 一些特性之後，從這章開始，便要正式進入ＣＳＳ的指令介紹了！本章有兩個介紹的主 題，第一個部份介紹的是顏色與背景性質的ＣＳＳ，其主要的作用在於設定元素的前景 顏色、背景顏色與背景圖形等樣式設定的性質；而第二部份為您介紹的是用於控制擺放 元素位置的ＣＳＳ的指令。
顏 色 背 景 的 Ｃ Ｓ Ｓ 指 令
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">
以上就是第四章 顏色背景的CSS的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
