大家好呀,上一节课我们聊了关于字体以及文本的基本属性,这节课小编带着大家了解一些css3的基本属性,目录如下表:
CSS属性 颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.p1{
color: #000;
}
.p2{
background-color: #000;
color: rgb(253, 252, 252);
}
</style>
</head>
<body>
<p class="p1">我是p标签1号!</p>
<p class="p2">我是p标签2号!</p>
</body>
</html>
CSS内容颜色
我们先了解一下内容颜色,看上图,p1表现的是内容颜色。内容颜色是什么颜色呢?指得是将要在文章中输出的内容指定颜色。#000是颜色表,是黑色。如图:
这就是内容颜色的定义了。颜色也补充一下,当你用vscode编辑器(推荐,不会下载的看这一篇:html教程(3)_小旭的前端笔记的博客-CSDN博客)的时候,将鼠标放上去,会有颜色表,自己选择即可。
还有一种颜色,就是小编的#000,不理解的朋友看下表,这种颜色叫做RGB,有兴趣的朋友上网搜一搜。
R
G
B
值
R
G
B
值
R
G
B
值
黑色
0
0
0
#000000
黄色
255
255
0
#FFFF00
浅灰蓝色
176
224
230
#B0E0E6
象牙黑
41
36
33
#292421
香蕉色
227
207
87
#E3CF57
品蓝
65
105
225
#4169E1
灰色
192
192
192
#C0C0C0
镉黄
255
153
18
#FF9912
石板蓝
106
90
205
#6A5ACD
冷灰
128
138
135
#808A87
dougello
235
142
85
#EB8E55
天蓝
135
206
235
#87CEEB
石板灰
112
128
105
#708069
forum gold
255
227
132
#FFE384
暖灰色
128
128
105
#808069
金黄色
255
215
0
#FFD700
青色
0
255
255
#00FFFF
黄花色
218
165
105
#DAA569
绿土
56
94
15
#385E0F
白色
255
255
255
#FFFFFF
瓜色
227
168
105
#E3A869
靛青
8
46
84
#082E54
古董白
250
235
215
#FAEBD7
橙色
255
97
0
#FF6100
碧绿色
127
255
212
#7FFFD4
天蓝色
240
255
255
#F0FFFF
镉橙
255
97
3
#FF6103
青绿色
64
224
208
#40E0D0
白烟
245
245
245
#F5F5F5
胡萝卜色
237
145
33
#ED9121
绿色
0
255
0
#00FF00
白杏仁
255
235
205
#FFFFCD
桔黄
255
128
0
#FF8000
黄绿色
127
255
0
#7FFF00
cornsilk
255
248
220
#FFF8DC
淡黄色
245
222
179
#F5DEB3
钴绿色
61
145
64
#3D9140
蛋壳色
252
230
201
#FCE6C9
翠绿色
0
201
87
#00C957
花白
255
250
240
#FFFAF0
棕色
128
42
42
#802A2A
森林绿
34
139
34
#228B22
gainsboro
220
220
220
#DCDCDC
米色
163
148
128
#A39480
草地绿
124
252
0
#7CFC00
ghostWhite
248
248
255
#F8F8FF
锻浓黄土色
138
54
15
#8A360F
酸橙绿
50
205
50
#32CD32
蜜露橙
240
255
240
#F0FFF0
锻棕土色
135
51
36
#873324
薄荷色
189
252
201
#BDFCC9
象牙白
250
255
240
#FAFFF0
巧克力色
210
105
30
#D2691E
草绿色
107
142
35
#6B8E23
亚麻色
250
240
230
#FAF0E6
肉色
255
125
64
#FF7D40
暗绿色
48
128
20
#308014
navajoWhite
255
222
173
#FFDEAD
黄褐色
240
230
140
#F0E68C
海绿色
46
139
87
#2E8B57
old lace
253
245
230
#FDF5E6
玫瑰红
188
143
143
#BC8F8F
嫩绿色
0
255
127
#00FF7F
海贝壳色
255
245
238
#FFF5EE
肖贡土色
199
97
20
#C76114
雪白
255
250
250
#FFFAFA
标土棕
115
74
18
#734A12
紫色
160
32
240
#A020F0
乌贼墨棕
94
38
18
#5E2612
紫罗蓝色
138
43
226
#8A2BE2
红色
255
0
0
#FF0000
赫色
160
82
45
#A0522D
jasoa
160
102
211
#A066D3
砖红
156
102
31
#9C661F
马棕色
139
69
19
#8B4513
湖紫色
153
51
250
#9933FA
镉红
227
23
13
#E3170D
沙棕色
244
164
96
#F4A460
淡紫色
218
112
214
#DA70D6
珊瑚色
255
127
80
#FF7F50
棕褐色
210
180
140
#D2B48C
梅红色
221
160
221
#DDA0DD
耐火砖红
178
34
34
#B22222
印度红
176
23
31
#B0171F
蓝色
0
0
255
#0000FF
栗色
176
48
96
#B03060
钴色
61
89
171
#3D59AB
粉红
255
192
203
#FFC0CB
dodger blue
30
144
255
#1E90FF
草莓色
135
38
87
#872657
jackie blue
11
23
70
#0B1746
橙红色
250
128
114
#FA8072
锰蓝
3
168
158
#03A89E
蕃茄红
255
99
71
#FF6347
深蓝色
25
25
112
#191970
桔红
255
69
0
#FF4500
孔雀蓝
51
161
201
#33A1C9
深红色
255
0
255
#FF00FF
土耳其玉色
0
199
140
#00C78C
CSS整体颜色
什么叫做整体颜色呢?就是这个标签里,背景,内容全都是一种颜色,我们叫他:
background-color: #000;
使用这种属性的时候,尽量将内容在指定一个颜色,向下图一样:
.p2{
background-color: #000;
color: rgb(253, 252, 252);
}
效果如下:
总结
如果我的文章能帮到您,记得订阅我的专栏,和点赞哦!
来我的主页点点关注吧!小旭的前端笔记的博客_CSDN博客-html5 css3 js完整教程领域博主