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)等。
【CSS Color详细介绍】语法如下:
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/dottedborder-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 |
推荐阅读
- 谈谈JavaScript如何优化构造函数和对象创建
- SASS插值表达式用法介绍
- C#中的StringBuilder用法详细指南
- 如何在服务器上将HTML 5 Canvas保存为图像()
- 算法设计(生成n位灰度码 |set 2)
- 算法设计(求最多k次交换后的最大排列)
- 博弈论中的极小极大算法第2组(评估功能简介)
- Python示例中的Lambda和filter用法指南
- Java中的已检查与未检查异常