CSS(3)教程 css的一般属性

        大家好呀,上一节课我们聊了关于字体以及文本的基本属性,这节课小编带着大家了解一些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完整教程领域博主

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值