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>

猜你喜欢

转载自blog.csdn.net/weixin_41167340/article/details/81358122