CSS Color详细介绍

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

---