CSS 顏色值型別

admin發表於2018-08-06
CSS型別

CSS中有多種顏色表示模式，下面就分別做一下介紹。

一.顏色關鍵字:

比如直接使用blue、red或者black這樣的關鍵字作為顏色值。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div {
  width:100px;
  height:50px;
  border:1px dotted blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

二.RGB模式:

RGB模式表示顏色是由red、green和blue三種顏色混合而成。

每一種顏色的最小值是0，最大值是255。

0表示沒有對應的顏色，255表示純色。

例如rgb(255,0,0)表示純紅色，rgb(0,255,0)純綠色，rgb(0,0,255)純藍色，rgb(255,255,255)黑色。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div {
  width:100px;
  height:50px;
  border:1px dotted rgb(125,255,158);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

上面的程式碼通過RGB模式設定邊框的顏色值。

三.RGBA模式（CSS3新增）:

此模式和上面的模式非常類似，只不過新增了一個透明度模式。

RGBA中的"A"是"Alpha"的縮寫，用來規定透明度的，值介於（0-1）之間。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div {
  width:100px;
  height:50px;
  border:1px dotted rgba(125,255,158,0.5);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

上面的程式碼可以將邊框透明度設定為0.5。

四.十六進位制顏色顏色模式:

十六進位制顏色值簡稱HEX，顏色值前面帶有#號，格式可以描述為如下:

[CSS] 純文字檢視 複製程式碼
#RRGGBB

每兩位上的值就是RGB上的數字轉換16進位制後的值。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div {
  width:100px;
  height:50px;
  border:1px dotted #FF33AA;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

上面的程式碼可以將邊框顏色值設定為#FF33AA。

特別說明:如果每兩位16進位制數是重複的，就如同上面的例子，可以將顏色值簡寫一半:

[CSS] 純文字檢視 複製程式碼
color: #f3a;

五.HSL顏色模式（CSS3新增）:

HSL就是色調(Hue)、飽和度(Saturation)和亮度(Lightness)的縮寫。

通過三個顏色通道的疊加實現調節顏色的功能。

H：0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值為：0 - 360。

S：取值為：0.0% - 100.0%；0% 意味著灰色，而 100% 是全綵

L：取值為：0.0% - 100.0%；0% 是黑色，100% 是白色。

看一段程式碼例項，它演示了色調的分步規律:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
section{
  position:relative;
}
div{
  width:1px;
  height:150px;
  float:left;
}
</style>
<script>
window.onload=function(){
  var container = document.querySelector('section');
  for (var index = 0; index < 360; index++) {
    var div = document.createElement('div');
    div.style.background = 'hsl(' + index + ',100%, 50%)';
    container.appendChild(div);
  }
}
</script>
</head>
<body>
<section></section>
</body>
</html>

是不是紅、橙、黃、綠、青、藍、紫的分佈規律非常清晰了。

下面是演示顏色飽和度的程式碼:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
section{
  position:relative;
}
div{
  width:1px;
  height:150px;
  float:left;
}
</style>
<script>
window.onload=function(){
  var container = document.querySelector('section');
  for (var index = 0; index < 100; index++) {
    var div = document.createElement('div');
    div.style.background = 'hsl(100,' + index + '%, 50%)';
    container.appendChild(div);
  }
}
</script>
</head>
<body>
<section></section>
</body>
</html>

飽和度從灰色到全綵的變化也是一目瞭然。

下面對於亮度的演示，程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
section{
  position:relative;
}
div{
  width:1px;
  height:150px;
  float:left;
}
</style>
<script>
window.onload=function(){
  var container = document.querySelector('section');
  for (var index = 0; index < 100; index++) {
    var div = document.createElement('div');
    div.style.background = 'hsl(100,100%, ' + index + '%)';
    container.appendChild(div);
  }
}
</script>
</head>
<body>
<section></section>
</body>
</html>

下面再看一下HSLA的使用，這個就比較簡單了，A就是設定透明度的，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div {
  margin:10px;
  width:150px;
  height:50px;
  text-align:center;
  line-height:50px;
}
div:first-child {
  background-color: hsla(100,100%,54%,0.3)
}
div:last-child {
  background-color: hsl(100,100%,54%)
}
</style>
</head>
<body>
<div>螞蟻部落</div>
<div>螞蟻部落</div>
</body>
</html>

相關文章