CSS顏色的定義和幾種用法詳解

在CSS中，有幾種設置顏色的體例和用法，可以或許用分歧的體例給HTML設置不異的布景，具體的實例經由過程如下步調來實現。

東西/原料

CSS相關常識
UE編纂器，HTML根本常識

方式/步調

1
利用#f00來設置顏色值，這個就是rgb16進制來暗示顏色，具體實現的代碼如下所示:
<html>
<head>
<title>CSSdiv定位</title>
<style type="text/css">
.div1{
height:100px;
width:100px;
border-style:solid;
border-color:red;
border-width:10px;
background-color:#f00;
}
</style>
</head>
<body>
<div class="div1">
</div>
</body>
</html>
如下圖，可以看到即使利用#F00也使得顯示的布景顏色為紅色。
2
利用#FF0000來設置顏色，，第一個字節紅色，第二個本身綠色，第三個字節藍色，具體實現的代碼如下：
<html>
<head>
<title>CSSdiv定位</title>
<style type="text/css">
.div1{
height:100px;
width:100px;
border-style:solid;
border-color:red;
border-width:10px;
background-color:#ff0000;
}
</style>
</head>
<body>
<div class="div1">
</div>
</body>
</html>
可以發現利用FF0000也設置當作布景顏色為紅色了，其實F00是ff0000的縮寫，這兩種寫法在法式設計中都可以利用。
3
利用英文來設置布景的顏色，這里可以利用英文來設置布景顏色，具體實現的代碼如下：
<html>
<head>
<title>CSSdiv定位</title>
<style type="text/css">
.div1{
height:100px;
width:100px;
border-style:solid;
border-color:red;
border-width:10px;
background-color:red;
}
</style>
</head>
<body>
<div class="div1">
</div>
</body>
</html>
如下圖，可以看到具體的執行結果了。
4
利用rgb來設置顏色的值，具體實現的代碼如下：
<html>
<head>
<title>CSSdiv定位</title>
<style type="text/css">
.div1{
height:100px;
width:100px;
border-style:solid;
border-color:red;
border-width:10px;
background-color:rgb(255,0,0);
}
</style>
</head>
<body>
<div class="div1">
</div>
</body>
</html>
如下圖，可以看到利用rgb(255,0,0)設置的顏色也是紅色的。
5
還可以利用RGB百分比來設置布景顏色，具體的代碼如下：
<html>
<head>
<title>CSSdiv定位</title>
<style type="text/css">
.div1{
height:100px;
width:100px;
border-style:solid;
border-color:red;
border-width:10px;
background-color:rgb(100%,0,0);
}
</style>
</head>
<body>
<div class="div1">
</div>
</body>
</html>
如下圖可以看到具體的執行結果，這個有的瀏覽器不撐持。