css顏色

1.前景色
<style type="text/css">
			body {
				padding: 20px;
				font-family: Arial, Verdana, sans-serif;}
			/* color name */
			h1 {
				color: DarkCyan;}
			/* hex code */
			h2 {
				color: #ee3e80;}						/* rgb value */
			p {
				color: rgb(100,100,90);}
		</style>
三種表示方式。顏色名，十六進位制，rgb
2.背景色
<style type="text/css">
			body {
				background-color: rgb(200,200,200);
				color: white;
				padding: 20px;
				font-family: Arial, Verdana, sans-serif;}
			h1 {
				background-color: DarkCyan;
				padding: inherit;}
			h2 {
				background-color: #ee3e80;
				padding: inherit;}
			p {
				background-color: white;
				color: rgb(100,100,90);
				padding: inherit;}
		</style>
同樣三種表示方式。
3.透明度
div {
				width: 100px;
				height: 100px;
				margin: 40px;
				display: inline-block;
				background-color: #ee3e80;}
			p {
				width: 100px;
				height: 100px;
				position: relative;
				top: 20px;
				left: 20px;
				margin: 20px;}
			p.one {
				background-color: rgb(0,0,0);
				opacity: 0.5;}
			p.two {
				background-color: rgb(0,0,0);
				background-color: rgba(0,0,0,0.5);}

opcaity允許指定透明度。介於0.0至1.0之間
rgba除了紅綠藍最後一個值是透明度。
4.HSl和hsla
<style type="text/css">
			body {
				background-color: #C8C8C8;
				background-color: hsl(0, 0%, 78%);
				color: white;
				padding: 20px;
				font-family: Arial, Verdana, sans-serif;}
			h1 {
				background-color: DarkCyan;
				padding: inherit;}
			h2 {
				background-color: #ee3e80;
				padding: inherit;}
			p {
				background-color: #ffffff;
				background-color: hsla(0,100%,100%,0.5);
				color: #64645A;
				padding: inherit;}
		</style>
hsl：引數為 色調，飽和度，明度
hsla加了一個透明度。