第6周作业

css单位

em              Relative to the font-size of the element (2em means 2 times the size of the current fon

ex               Relative to the x-height of the current font (rarely used)

ch               Relative to width of the "0" (zero)

rem            Relative to font-size of the root element

vw              Relative to 1% of the width of the viewport*

vh              Relative to 1% of the height of the viewport*

vmin          Relative to 1% of viewport's* smaller dimension

vmax         Relative to 1% of viewport's* larger dimension

%

 

cm            centimeters

mm          millimeters

in             inches (1in = 96px = 2.54cm)

px *          pixels (1px = 1/96th of 1in)

pt             points (1pt = 1/72 of 1in)

pc            picas (1pc = 12 pt)

 

css颜色表示法

 

 

十六进制颜色

所有浏览器都支持十六进制颜色值。

十六进制颜色是这样规定的：#RRGGBB，其中的 RR（红色）、GG（绿色）、BB（蓝色）十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。

RGB 颜色

所有浏览器都支持 RGB 颜色值。

RGB 颜色值是这样规定的：rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度，可以是介于 0 与 255 之间的整数，或者是百分比值（从 0% 到 100%）。

RGBA 颜色

RGBA 颜色值得到以下浏览器的支持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。

RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。

RGBA 颜色值是这样规定的：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。

HSL 颜色

HSL 颜色值得到以下浏览器的支持：IE9+、Firefox、Chrome、Safari 以及 Opera 10+。

HSL 指的是 hue（色调）、saturation（饱和度）、lightness（亮度） - 表示颜色柱面坐标表示法。

HSL 颜色值是这样规定的：hsl(hue, saturation, lightness)。

Hue 是色盘上的度数（从 0 到 360） - 0 (或 360) 是红色，120 是绿色，240 是蓝色。Saturation 是百分比值；0% 意味着灰色，而 100% 是全彩。Lightness 同样是百分比值；0% 是黑色，100% 是白色。

HSLA 颜色

HSLA 颜色值得到以下浏览器的支持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。

HSLA 颜色值是 HSL 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。

HSLA 颜色值是这样规定的：hsla(hue, saturation, lightness, alpha)，其中的 alpha 参数定义不透明度。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。

颜色	颜色 HEX	颜色 RGB
	#FF0000	rgb(255,0,0)
	#0000FF	rgb(0,0,255)
	#00FFFF	rgb(0,255,255)
	#C0C0C0	rgb(192,192,192)
#000000	rgb(0,0,0)
#080000	rgb(8,0,0)
#100000	rgb(16,0,0)
#180000	rgb(24,0,0)
#200000	rgb(32,0,0)
#280000	rgb(40,0,0)
#300000	rgb(48,0,0)
#380000	rgb(56,0,0)
#400000	rgb(64,0,0)
#480000	rgb(72,0,0)
#500000	rgb(80,0,0)
#580000	rgb(88,0,0)
#600000	rgb(96,0,0)
#680000	rgb(104,0,0)
#700000	rgb(112,0,0)
#780000	rgb(120,0,0)
#800000	rgb(128,0,0)
#880000	rgb(136,0,0)
#900000	rgb(144,0,0)
#980000	rgb(152,0,0)
#A00000	rgb(160,0,0)
#A80000	rgb(168,0,0)
#B00000	rgb(176,0,0)
#B80000	rgb(184,0,0)
#C00000	rgb(192,0,0)
#C80000	rgb(200,0,0)
#D00000	rgb(208,0,0)
#D80000	rgb(216,0,0)
#E00000	rgb(224,0,0)
#E80000	rgb(232,0,0)
#F00000	rgb(240,0,0)
#F80000	rgb(248,0,0)
#FF0000	rgb(255,0,0)

	#080808	rgb(8,8,8)
	#181818	rgb(24,24,24)
	#282828	rgb(40,40,40)
	#383838	rgb(56,56,56)
	#484848	rgb(72,72,72)
	#585858	rgb(88,88,88)
	#686868	rgb(104,104,104)
	#787878	rgb(120,120,120)
	#888888	rgb(136,136,136)
	#989898	rgb(152,152,152)
	#A8A8A8	rgb(168,168,168)
	#B8B8B8	rgb(184,184,184)
	#C8C8C8	rgb(200,200,200)
	#D8D8D8	rgb(216,216,216)
	#E8E8E8	rgb(232,232,232)
	#F8F8F8	rgb(248,248,248)
实色效果	英文名称	R.G.B	16色	实色效果	英文名称	R.G.B	16色
	PaleTurquoise1	187 255 255	#BBFFFF
	PaleTurquoise2	174 238 238	#AEEEEE
	PaleTurquoise3	150 205 205	#96CDCD
	PaleTurquoise4	102 139 139	#668B8B
	CadetBlue1	152 245 255	#98F5FF
	CadetBlue2	142 229 238	#8EE5EE
	CadetBlue3	122 197 205	#7AC5CD
	CadetBlue4	83 134 139	#53868B
	Turquoise1	0 245 255	#00F5FF
	Turquoise2	0 229 238	#00E5EE
	Turquoise3	0 197 205	#00C5CD
	Turquoise4	0 134 139	#00868B
	Cyan1	0 255 255	#00FFFF
	Cyan2	0 238 238	#00EEEE
	Cyan3	0 205 205	#00CDCD
	Cyan4	0 139 139	#008B8B
	DarkSlateGray1	151 255 255	#97FFFF
	DarkSlateGray2	141 238 238	#8DEEEE
	DarkSlateGray3	121 205 205	#79CDCD
	DarkSlateGray4	82 139 139	#528B8B
	Aquamarine1	127 255 212	#7FFFD4
	Aquamarine2	118 238 198	#76EEC6
	Aquamarine3	102 205 170	#66CDAA
	Aquamarine4	69 139 116	#458B74
	DarkSeaGreen1	193 255 193	#C1FFC1
	DarkSeaGreen2	180 238 180	#B4EEB4
	DarkSeaGreen3	155 205 155	#9BCD9B
	DarkSeaGreen4	105 139 105	#698B69
	SeaGreen1	84 255 159	#54FF9F
	SeaGreen2	78 238 148	#4EEE94
	SeaGreen3	67 205 128	#43CD80
	SeaGreen4	46 139 87	#2E8B57
	PaleGreen1	154 255 154	#9AFF9A
	PaleGreen2	144 238 144	#90EE90
	PaleGreen3	124 205 124	#7CCD7C
	PaleGreen4	84 139 84	#548B54
	SpringGreen1	0 255 127	#00FF7F
	SpringGreen2	0 238 118	#00EE76
	SpringGreen3	0 205 102	#00CD66
	SpringGreen4	0 139 69	#008B45
	Green1	0 255 0	#00FF00
	Green2	0 238 0	#00EE00
	Green3	0 205 0	#00CD00
	Green4	0 139 0	#008B00
	Chartreuse1	127 255 0	#7FFF00
	Chartreuse2	118 238 0	#76EE00
	Chartreuse3	102 205 0	#66CD00
	Chartreuse4	69 139 0	#458B00
	OliveDrab1	192 255 62	#C0FF3E
	OliveDrab2	179 238 58	#B3EE3A
	OliveDrab3	154 205 50	#9ACD32
	OliveDrab4	105 139 34	#698B22
	DarkOliveGreen1	202 255 112	#CAFF70
	DarkOliveGreen2	188 238 104	#BCEE68
	DarkOliveGreen3	162 205 90	#A2CD5A
	DarkOliveGreen4	110 139 61	#6E8B3D
	Khaki1	255 246 143	#FFF68F
	Khaki2	238 230 133	#EEE685
	Khaki3	205 198 115	#CDC673
	Khaki4	139 134 78	#8B864E
	LightGoldenrod1	255 236 139	#FFEC8B
	LightGoldenrod2	238 220 130	#EEDC82
	LightGoldenrod3	205 190 112	#CDBE70
	LightGoldenrod4	139 129 76	#8B814C
	LightYellow1	255 255 224	#FFFFE0
	LightYellow2	238 238 209	#EEEED1
	LightYellow3	205 205 180	#CDCDB4
	LightYellow4	139 139 122	#8B8B7A
	Yellow1	255 255 0	#FFFF00
	Yellow2	238 238 0	#EEEE00
	Yellow3	205 205 0	#CDCD00
	Yellow4	139 139 0	#8B8B00
	Gold1	255 215 0	#FFD700
	Gold2	238 201 0	#EEC900
	Gold3	205 173 0	#CDAD00
	Gold4	139 117 0	#8B7500
	Goldenrod1	255 193 37	#FFC125
	Goldenrod2	238 180 34	#EEB422
	Goldenrod3	205 155 29	#CD9B1D
	Goldenrod4	139 105 20	#8B6914
	DarkGoldenrod1	255 185 15	#FFB90F
	DarkGoldenrod2	238 173 14	#EEAD0E
	DarkGoldenrod3	205 149 12	#CD950C
	DarkGoldenrod4	139 101 8	#8B658B
	RosyBrown1	255 193 193	#FFC1C1
	RosyBrown2	238 180 180	#EEB4B4
	RosyBrown3	205 155 155	#CD9B9B
	RosyBrown4	139 105 105	#8B6969
	IndianRed1	255 106 106	#FF6A6A
	IndianRed2	238 99 99	#EE6363
	IndianRed3	205 85 85	#CD5555
	IndianRed4	139 58 58	#8B3A3A
	Sienna1	255 130 71	#FF8247
	Sienna2	238 121 66	#EE7942
	Sienna3	205 104 57	#CD6839
	Sienna4	139 71 38	#8B4726
	Burlywood1	255 211 155	#FFD39B
	Burlywood2	238 197 145	#EEC591
	Burlywood3	205 170 125	#CDAA7D
	Burlywood4	139 115 85	#8B7355
	Wheat1	255 231 186	#FFE7BA
	Wheat2	238 216 174	#EED8AE
	Wheat3	205 186 150	#CDBA96
	Wheat4	139 126 102	#8B7E66
	Tan1	255 165 79	#FFA54F
	Tan2	238 154 73	#EE9A49
	Tan3	205 133 63	#CD853F
	Tan4	139 90 43	#8B5A2B
	Chocolate1	255 127 36	#FF7F24
	Chocolate2	238 118 33	#EE7621
	Chocolate3	205 102 29	#CD661D
	Chocolate4	139 69 19	#8B4513
	Firebrick1	255 48 48	#FF3030
	Firebrick2	238 44 44	#EE2C2C
	Firebrick3	205 38 38	#CD2626
	Firebrick4	139 26 26	#8B1A1A
	Brown1	255 64 64	#FF4040
	Brown2	238 59 59	#EE3B3B
	Brown3	205 51 51	#CD3333
	Brown4	139 35 35	#8B2323
	Salmon1	255 140 105	#FF8C69
	Salmon2	238 130 98	#EE8262
	Salmon3	205 112 84	#CD7054
	Salmon4	139 76 57	#8B4C39
	LightSalmon1	255 160 122	#FFA07A
	LightSalmon2	238 149 114	#EE9572
	LightSalmon3	205 129 98	#CD8162
	LightSalmon4	139 87 66	#8B5742
	Orange1	255 165 0	#FFA500
	Orange2	238 154 0	#EE9A00
	Orange3	205 133 0	#CD8500
	Orange4	139 90 0	#8B5A00
	DarkOrange1	255 127 0	#FF7F00
	DarkOrange2	238 118 0	#EE7600
	DarkOrange3	205 102 0	#CD6600
	DarkOrange4	139 69 0	#8B4500
	Coral1	255 114 86	#FF7256
	Coral2	238 106 80	#EE6A50
	Coral3	205 91 69	#CD5B45
	Coral4	139 62 47	#8B3E2F
	Tomato1	255 99 71	#FF6347
	Tomato2	238 92 66	#EE5C42
	Tomato3	205 79 57	#CD4F39
	Tomato4	139 54 38	#8B3626
	OrangeRed1	255 69 0	#FF4500
	OrangeRed2	238 64 0	#EE4000
	OrangeRed3	205 55 0	#CD3700
	OrangeRed4	139 37 0	#8B2500
	Red1	255 0 0	#FF0000
	Red2	238 0 0	#EE0000
	Red3	205 0 0	#CD0000
	Red4	139 0 0	#8B0000
	DeepPink1	255 20 147	#FF1493
	DeepPink2	238 18 137	#EE1289
	DeepPink3	205 16 118	#CD1076
	DeepPink4	139 10 80	#8B0A50
	HotPink1	255 110 180	#FF6EB4
	HotPink2	238 106 167	#EE6AA7
	HotPink3	205 96 144	#CD6090
	HotPink4	139 58 98	#8B3A62
	Pink1	255 181 197	#FFB5C5
	Pink2	238 169 184	#EEA9B8
	Pink3	205 145 158	#CD919E
	Pink4	139 99 108	#8B636C
	LightPink1	255 174 185	#FFAEB9
	LightPink2	238 162 173	#EEA2AD
	LightPink3	205 140 149	#CD8C95
	LightPink4	139 95 101	#8B5F65
	PaleVioletRed1	255 130 171	#FF82AB
	PaleVioletRed2	238 121 159	#EE799F
	PaleVioletRed3	205 104 137	#CD6889
	PaleVioletRed4	139 71 93	#8B475D
	Maroon1	255 52 179	#FF34B3
	Maroon2	238 48 167	#EE30A7
	Maroon3	205 41 144	#CD2990
	Maroon4	139 28 98	#8B1C62
	VioletRed1	255 62 150	#FF3E96
	VioletRed2	238 58 140	#EE3A8C
	VioletRed3	205 50 120	#CD3278
	VioletRed4	139 34 82	#8B2252
	Magenta1	255 0 255	#FF00FF
	Magenta2	238 0 238	#EE00EE
	Magenta3	205 0 205	#CD00CD
	Magenta4	139 0 139	#8B008B
	Orchid1	255 131 250	#FF83FA
	Orchid2	238 122 233	#EE7AE9
	Orchid3	205 105 201	#CD69C9
	Orchid4	139 71 137	#8B4789
	Plum1	255 187 255	#FFBBFF
	Plum2	238 174 238	#EEAEEE
	Plum3	205 150 205	#CD96CD
	Plum4	139 102 139	#8B668B
	MediumOrchid1	224 102 255	#E066FF
	MediumOrchid2	209 95 238	#D15FEE
	MediumOrchid3	180 82 205	#B452CD
	MediumOrchid4	122 55 139	#7A378B
	DarkOrchid1	191 62 255	#BF3EFF
	DarkOrchid2	178 58 238	#B23AEE
	DarkOrchid3	154 50 205	#9A32CD
	DarkOrchid4	104 34 139	#68228B
	Purple1	155 48 255	#9B30FF
	Purple2	145 44 238	#912CEE
	Purple3	125 38 205	#7D26CD
	Purple4	85 26 139	#551A8B
	MediumPurple1	171 130 255	#AB82FF
	MediumPurple2	159 121 238	#9F79EE
	MediumPurple3	137 104 205	#8968CD
	MediumPurple4	93 71 139	#5D478B
	Thistle1	255 225 255	#FFE1FF
	Thistle2	238 210 238	#EED2EE
	Thistle3	205 181 205	#CDB5CD
	Thistle4	139 123 139	#8B7B8B
	grey11	28 28 28	#1C1C1C
	grey21	54 54 54	#363636
	grey31	79 79 79	#4F4F4F
	grey41	105 105 105	#696969
	grey51	130 130 130	#828282
	grey61	156 156 156	#9C9C9C
	grey71	181 181 181	#B5B5B5
	gray81	207 207 207	#CFCFCF
	gray91	232 232 232	#E8E8E8
	DarkGrey	169 169 169	#A9A9A9
	DarkBlue	0 0 139	#00008B
	DarkCyan	0 139 139	#008B8B
	DarkMagenta	139 0 139	#8B008B
	DarkRed	139 0 0	#8B0000
	LightCyan4	122 139 139	#7A8B8B		LightGreen	144 238 144	#90EE90