首頁 > 開發者 > CSS

CSS應用基礎教程(4) 顏色背景

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
css|基礎教程
本　章　Ｃ　Ｓ　Ｓ　的　主　要　作　用

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

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">


本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
output css css ellipsis css oblique css scheduler css selectors css alarms skin css
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More