CSS Color详细介绍

2021年3月10日16:07:44 发表评论 835 次浏览

CSS Color属性用于设置HTML元素的颜色。此属性用于设置字体颜色, 背景颜色等。

元素的颜色可以通过以下方式定义:

  • 内置颜色
  • RGB格式
  • RGBA格式
  • 十六进制表示法
  • 高速钢
  • HSLA

内置颜色:

这些是其名称使用的一组预定义颜色。例如:红色, 蓝色, 绿色等。

语法如下:

h1 {
    color: color-name;
}

例子:

< html >
     < head >
         < title >CSS color property</ title >
         < style >
             h1 {
                 color:green;
                 text-align:center;
             }
         </ style >
     </ head >
     < body >
         < h1 >
             lsbin
         </ h1 >
     </ body >
</ html >

输出如下:

颜色特性

RGB格式:

RGB(红色, 绿色, 蓝色)格式用于通过指定R, G, B值范围在0到255之间来定义HTML元素的颜色。例如:红色的RGB值是(255, 0, 0 ), 绿色为(0, 255, 0), 蓝色为(0, 0, 255)等。

语法如下:

h1 {
    color: rgb(R, G, B);
}

例子:

< html >
     < head >
         < title >CSS color property</ title >
         < style >
             h1{
                 color: rgb(0, 153, 0);
                 text-align:center;
             }
         </ style >
     </ head >
     < body >
         < h1 >
             lsbin
         </ h1 >
     </ body >
</ html >

输出如下:

颜色特性

RGBA格式:

RGBA格式类似于RGB, 但是区别在于RGBA包含一个A(字母), 用于指定元素的透明度。 alpha值介于0.0到1.0之间, 其中0.0。表示完全透明, 而1.0表示不透明。

语法如下:

h1 {
    color:rgba(R, G, B, A);
}

例子:

< html >
     < head >
         < title >CSS RGBA color property</ title >
         < style >
             h1 {
                 color:rgba(0, 153, 0, 0.5);
                 text-align:center;
             }
         </ style >
     </ head >
     < body >
         < h1 >
             lsbin
         </ h1 >
     </ body >
</ html >

输出如下:

颜色特性

十六进制表示法:

十六进制表示法以#符号开头, 后跟6个字符, 范围从0到F。例如:Red#FF0000, Green#00FF00, Blue#0000FF等。

语法如下:

h1 {
    color:#(0-F)(0-F)(0-F)(0-F)(0-F)(0-F);
}

例子:

< html >
     < head >
         < title >CSS hex property</ title >
         < style >
             h1{
                 color:#009900;
                 text-align:center;
             }
         </ style >
     </ head >
     < body >
         < h1 >
             lsbin
         </ h1 >
     </ body >
</ html >

输出如下:

颜色特性

HSL:HSL分别代表色相, 饱和度和亮度。此格式使用圆柱坐标系。

  • 色调:色相是色轮的度数。其值介于0到360之间, 其中0代表红色, 120代表绿色, 240代表蓝色。
  • 饱和:它采用百分比值, 其中100%表示完全饱和, 而0%表示完全不饱和(灰色)。
  • 亮度:它采用百分比值, 其中100%代表白色, 而0%代表黑色。

语法如下:

h1 {
    color:hsl(H, S, L);
}

例子:

< html >
     < head >
         < title >CSS hsl color property</ title >
         < style >
             h1{
                 color:hsl(120, 100%, 30%);
                 text-align:center;
             }
         </ style >
     </ head >
     < body >
         < h1 >
             lsbin
         </ h1 >
     </ body >
</ html >

输出如下:

颜色特性

HSLA:

HSLA颜色属性与HSL属性相似, 但区别在于HSLA包含指定元素透明度的A(字母)。 alpha值介于0.0到1.0之间, 其中0.0。表示完全透明, 而1.0表示不透明。

语法如下:

h1 {
    color:hsla(H, S, L, A);
}

例子:

< html >
     < head >
         < title >CSS hsla color property</ title >
         < style >
             h1 {
                 color:hsla(120, 100%, 50%, 0.50);
                 text-align:center;
             }
         </ style >
     </ head >
     < body >
         < h1 >
             lsbin
         </ h1 >
     </ body >
</ html >

输出如下:

颜色特性

文字颜色:

它用于设置文本的颜色。

语法如下:

h1 {
    color:color_name;
}

例子:

< html >
     < head >
         < title >CSS text color property</ title >
         < style >
             h1 {
                 color:#009900;
                 text-align:center;
             }
         </ style >
     </ head >
     < body >
         < h1 >
             lsbin
         </ h1 >
     </ body >
</ html >

输出如下:

颜色特性

背景颜色:

它用于设置HTML元素的背景色。

语法如下:

h1 {
    background-color:color_name;
}

例子:

< html >
     < head >
         < title >CSS background color property</ title >
         < style >
             h1 {
                 background-color:green;
                 text-align:center;
             }
         </ style >
     </ head >
     < body >
         < h1 >
             lsbin
         </ h1 >
     </ body >
</ html >

输出如下:

背景颜色属性

边框颜色:

用于设置元素的边框颜色。边框样式用于设置边框类型。

语法如下:

h1 {
    border-style:solid/dashed/dotted
    border-color:color_name;
}

例子:

< html >
     < head >
         < title >CSS border color</ title >
         < style >
             h1 {
                 border-style:solid;
                 border-color:green;
                 text-align:center;
             }
         </ style >
     </ head >
     < body >
         < h1 >
             lsbin
         </ h1 >
     </ body >
</ html >

输出如下:

边框颜色

颜色列表:以下是一些CSS颜色的列表。

颜色名称 十六进制(RGB) 小数(RGB) 颜色
FF0000 255, 0, 0
FFC0CB 255、192、203
橙子 FFA500 255、165、0
黄色 FFFF00 255、255、0
紫色 EE82EE 238、130、238
绿色 008000 0、128、0
水色 00FFFF 0、255、255
蓝色 0000FF 0、0、255
棕色 A52A2A 165、42、42
白色 FFFFFF 255、255、255
灰色 808080 128、128、128
黑色 000000 0、0、0

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: