DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS基礎知識 >> 6.2 背景顏色background-color
6.2 背景顏色background-color
編輯:CSS基礎知識     

一、background-color屬性

在CSS中,使用background-color屬性來定義元素的背景顏色。

語法:

background-color:顏色值;

說明:

顏色值是一個關鍵字或一個16進制的RGB值。關鍵字指的就是顏色的英文名稱,如red、blue、green等。所謂的16進制RGB值指的就是類似“#FBF9D0”這種形式的值。對於顏色值的獲取,大家可以使用 學習網開發的“在線調色板”來獲取,非常的方便。

為了更好地理解background-color屬性取值,大家參考一下“字體顏色color”這一節。

舉例:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>background-color屬性</title>
    <style type="text/css">
        /*設置所有div元素的共同樣式*/
        div
       {
           width:100px;
           height:60px;
       }
        /*設置3個div元素的個別樣式*/
        #div1{background-color:red;}
        #div2{background-color: #F3DE3F;}
        #div3{background-color: #0AF7FB;}
    </style>
</head>
<body>
    <div id="div1">背景顏色值為red</div>
    <div id="div2">背景顏色值為#F3DE3F </div>
    <div id="div3">背景顏色值為#0AF7FB </div>
</body>
</html>

在浏覽器預覽效果如下:

二、color和background-color區別

舉例:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>color和background-color區別</title>
    <style type="text/css">
    #p1
    {
        width:290px;
        color:white;
        background-color:red;
     }
    </style>
</head>
<body>
    <p id="p1">
        p元素文本顏色color值為white<br/>
        p元素背景顏色background-color值為red
    </p>
</body>
</html>

在浏覽器預覽效果如下:

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved