📜  css 颜色 - CSS (1)

📅  最后修改于: 2023-12-03 14:40:22.547000             🧑  作者: Mango

CSS颜色

在CSS中,颜色可以通过以下方式指定:

1. 关键字颜色值

CSS中定义了一些关键字来表示颜色,如:red(红色)、green(绿色)、blue(蓝色)、yellow(黄色)、black(黑色)等。

p {
  color: red;
  background-color: yellow;
}
2. 十六进制颜色值

CSS中也可以使用十六进制颜色值,通常由#符号和6个十六进制数字组成,如#FFFFFF(纯白色)、#000000(纯黑色)等。

p {
  color: #FF0000;
  background-color: #FFFF00;
}
3. RGB颜色值

CSS中可以使用RGB颜色值,每个颜色用0~255之间的一个数字表示,如rgb(255, 0, 0)表示红色。

p {
  color: rgb(255, 0, 0);
  background-color: rgb(255, 255, 0);
}
4. RGBA颜色值

RGBA颜色值其实就是RGB颜色值加上了一个透明度的值,透明度的值范围为0~1,0为完全透明,1为完全不透明。

p {
  color: rgba(255, 0, 0, 0.5);
  background-color: rgba(255, 255, 0, 0.3);
}
5. HSL颜色值

HSL颜色模型指的是指色相、饱和度和亮度(Hue、Saturation、Lightness),其中Hue表示色相,Saturation表示饱和度(0%表示灰色,100%表示鲜艳的颜色),Lightness表示亮度(0%表示黑色,100%表示白色)。

p {
  color: hsl(0, 100%, 50%);
  background-color: hsl(60, 100%, 50%);
}
6. HSLA颜色值

HSLA颜色值就是在HSL颜色值基础上加上了一个透明度的值。

p {
  color: hsla(0, 100%, 50%, 0.5);
  background-color: hsla(60, 100%, 50%, 0.3);
}

以上就是CSS中常用的颜色值,可以根据需要选择不同的颜色值来美化页面。