11網頁前端CSS——CSS顏色屬性

一:color顏色屬性

1:HSL顏色:通過色調(H) 飽和度(s) 亮度(L) 三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色。

      H:hue色調:0(或360)表示紅色,120表示綠色,240表示藍色,也可以取其他數值來指定。

      S:saturation飽和度:取值爲0.0%-100.0%

      L:lightness亮度:取值爲0.0%-100.0%

2:HSLA顏色:色調(H),飽和度(S),亮度(L),透明度(A)

     H:hue色調:0(或360)表示紅色,120表示綠色,240表示藍色,也可以取其他數值來指定。

     S:飽和度:取值爲0.0%-100.0%

     L:亮度:取值爲0.0%-100.0%

     A:透明度 alpha:取值爲0-1之間。

3:RGB顏色:紅(R) 綠(G) 藍(B) 三個顏色通道的變化

    R紅色:正整數| 百分數

    G綠色:正整數| 百分數

    B藍色:正整數| 百分數

以上三個參數,正整數數值的範圍爲:0-255,百分比數值的取值範圍爲:0.0%-100.0%

超出範圍的數值將被截至其最接近的取值極限。如:rgb(300,0,0)會被解析rgb(255,0,0)

正整數值255對應百分比數值100%,rgb(255,255,255)=rgb(100%,100%,100%)=#FFFFFF=#FFF.

4:十六進制色彩的表現方式

顏色構成:紅綠藍

取值範圍:0-9 a-f

color:#000000;簡寫成color:#000;

5:英文單詞

取色值得軟件:ColorSPY     識別顏色器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style type="text/css">
    
    p{
       /* color: red;*/
        /*color: hsl(0,100%,50%);
         color: hsla(0,100%,50%,0.09);
        color: rgb(255,0,0);
        color: rgba(0,255,0,0.7);
        color: #000000;*/
        color: #020;
        
    }
    
    
    </style>
</head>

<body>
  <p>
      段落顏色
  </p>
</body>
</html>

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章