CSS顏色及背景屬性

css

顏色
文法:  color: <顏色>
 
初始值:  由瀏覽器決定
 
適用於:  所有對象
 
向下相容:  是

顏色屬性允許網頁製作者指定一個元素的顏色。查看單位可以知道顏色值的描述. 一些色彩規則的例子包括:

H1 { color: blue }
H2 { color: #000080 }
H3 { color: #0c0 }
為了避免與使用者的樣式表之間的衝突，背景和顏色屬性應該始終一起指定。

背景顏色
文法:  background-color: <值>
 
允許值:  <顏色> | transparent (透明)
 
初始值:  transparent (透明)
 
適用於:  所有對象
 
向下相容:  否
 

背景顏色屬性設定一個元素的背景顏色。例如:

BODY { background-color: white }
H1   { background-color: #000080 }
為了避免與使用者的樣式表之間的衝突，無論任何背景顏色被使用的時候，背景圖象都應該被指定。而大多數情況下，background-image: none都是合適的。

網頁製作者也可以使用略寫的背景屬性，通常會比背景顏色屬性獲得更好的支援。

背景圖象
文法:  background-image: <值>
 
允許值:  <統一資源定位URLs> | none (無)
 
初始值:  none (無)
 
適用於:  所有對象
 
向下相容:  否

背景圖象屬性設定一個元素的背景圖象。例如:

BODY { background-image: url(/images/foo.gif) }
P    { background-image: url(http://www.webjx.com/bg.png) }
為了那些不載入圖象的瀏覽者，當定義了背景圖象後，應該也要定義一個類似的背景顏色。

網頁製作者也可以使用略寫的背景屬性，通常會比背景圖象屬性獲得更好的支援。

背景重複
文法:  background-repeat: <值>
 
允許值:  repeat | repeat-x | repeat-y | no-repeat
 
初始值:  repeat
 
適用於:  所有對象
 
向下相容:  否
 

背景重複屬性決定一個指定的背景圖象如何被重複。值為repeat-x時，圖象橫向重複，當值為repeat-y時圖象縱向重複。例如:

BODY { background: white url(candybar.gif);
       background-repeat: repeat-x }
在以上例子中, 圖象只會被橫向平鋪。

網頁製作者也可以使用略寫的背景屬性，通常會比背景重複屬性獲得更好的支援。

背景附件
文法:  background-attachment: <值>
 
允許值:  scroll | fixed
 
初始值:  scroll
 
適用於:  所有對象
 
向下相容:  否
 

背景附件屬性決定指定的背景圖象是跟隨內容滾動，還是被看作油畫固定不動。例如，以下指定一個固定的背景圖象:

BODY { background: white url(candybar.gif);
       background-attachment: fixed }
網頁製作者也可以使用略寫的背景屬性，通常會比背景附件屬性獲得更好的支援。

背景位置
文法:  background-position: <值>
 
允許值:  [<百分比> | <長度>]{1,2} | [top | center | bottom] || [left | center | right]
 
初始值:  0% 0%
 
適用於:  塊級及替換元素
 
向下相容:  否
 

圖象位置屬性給出指定背景圖象的最初位置。這個屬性只能應用於區塊層級元素和替換元素。(替換元素僅指一些已知原有尺寸的元素。HTML替換元素包括 IMG, INPUT, TEXTAREA, SELECT, 和 OBJECT。)

安排背景位置最容易的方法是使用關鍵字:

橫向的關鍵字 (left, center, right)
縱向的關鍵字 (top, center, bottom)
百分比和長度也可用作安排背景圖象的位置。百分比和元素字型大小有關。雖然使用長度是允許的，但因為它們處理不同的顯示解析度有不可避免的缺點，所以不被推薦。

當使用百分比或長度時，需首先指定橫向位置，接著是縱向位置。一個值，例如20% 65%，指定圖象的左起20%上起65%的那點會被放在元素的左起20%上起65%的那點的所在位置。一個值如5px 10px，指定圖象的左上方會被放在元素的左起5像素上起10像素的位置。

如果僅給出橫向的值，縱向位置的值為50%。長度和百分比的組合是允許的，負值也行。例如，10% -2cm是允許的。雖然，百分比和長度是不能夠和關鍵字組合。

關鍵字解釋如下:

top left = left top = 0% 0%
top = top center = center top = 50% 0%
right top = top right = 100% 0%
left = left center = center left = 0% 50%
center = center center = 50% 50%
right = right center = center right = 100% 50%
bottom left = left bottom = 0% 100%
bottom = bottom center = center bottom = 50% 100%
bottom right = right bottom = 100% 100%
如果背景圖象被看作油畫般固定不動，關於油畫的圖象會代替元素被放置。

網頁製作者也可以使用略寫的背景屬性，通常會比背景位置屬性獲得更好的支援。

背景
文法:  background: <值>
 
允許值:  <背景顏色> || <背景圖象> || <背景重複> || <背景附件> || <背景位置>
 
初始值:  未定義
 
適用於:  所有對象
 
向下相容:  否
 

背景屬性是一個更明確的背景—關係屬性的略寫。以下是一些背景的聲明:

BODY       { background: white url(http://www.webjx.com/foo.gif) }
BLOCKQUOTE { background: #7fffd4 }
P          { background: url(../backgrounds/pawn.png) #f0f8ff fixed }
TABLE      { background: #0c0 url(leaves.jpg) no-repeat bottom right }
當一個值未被指定時，將接受其初始值。例如，在上述的前三條規則，背景位置屬性將被設定為0% 0%。

為了避免與使用者的樣式表之間的衝突，背景和顏色應該一起被指定。