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

來源:互聯網
上載者:User
css|基礎教程
本 章 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">


相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

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

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