CSS顏色通常有三種表示的方法

第一種直接寫顏色所對應的英文，比如：red是紅色， blue是藍色
第二種是十六進位制表示法，比如：#ff0000是紅色
第三種是R(紅),G(綠),B(藍),A(透明度)表示，比如：color: rgba(200,0,0,0)

十六進位制 0-9， a-f

rgba前三個的取值範圍 0-255， a的取值為0-1之間的小數，0代表完全透明，1代表完全不透明

CSS常用的文字樣式設定

color:  red          //設定顏色
font-size: 50px;       	//設定字型的大小
font-family: "微軟雅黑"  	//設定字型
font-style: italic;		//字型傾斜，normal不傾斜
font-weight: bold;  	//加粗，normal為不加粗
line-height: 0px;		//文字的行高
text-decoration:none; 	//取消a標籤的下劃線
text-indent: 20px;		//文字首行縮排
text-align: center;		//文字居中
 

**line-height: 50px;  		//文字垂直居中**
.odiv{
	width: 300px;
	height: 500px;
	background-color: aquamarine;
	text-align: center;
	line-height: 500px;      //一般尺寸的高設為多少，這個值就是多少
}

<div class="odiv">文字內容</div>

CSS邊框屬性

.box{
	width: 300px;
	height: 300px;
	/*設定邊框的時候儘量三個屬性值都帶上，前後順序可以打亂，solid是實線， dashed是虛線*/
	border: 1px solid red;
	
	/*也可以單獨設定一個方向上的邊框*/
	/*border-top: 1px solid red;
	border-bottom: 1px solid red;*/
	
	/*設定圓角屬性值，從左上角開始順時針方向給4個值，也可以只寫一個值，表示4個方向都是這個值。如果要顯示一個圓形，那麼就給屬性的值為50%，同時要保證寬高相等*/
	/*如果寫兩個值，那麼它是對角分配的，第一個值給左上和右下，第二個值給右上和左下*/
	border-radius: 10px 20px 30px 40px;
}

**設定陰影**
box-shadow: 10px 10px 20px 30px red inset;
	第一個值設定X軸（水平）位移，正值往右位移，負值往左
	第二個值設定Y軸（垂直）位移，正值往下位移，負值往上
	第三個值設定模糊程度
	第四個值是擴散範圍
	第五個值是陰影的顏色
	第六個值是否為內陰影，如果想要內陰影可以設定inset，如果不設定，預設陰影向外擴散
	
.box{
	width: 200px;
	height: 200px;
	box-shadow: 10px 10px 20px 30px red inset;
}

<div class="box">文字內容</div>
 

CSS背景屬性

/*設定背景顏色和圖片*/
.box{
	width: 200px; 
	height: 200px;
	background: red;
	<!--新增背景圖片-->
	background-image: url("圖片路徑")
	<!--圖片的尺寸按上下左右百分百顯示-->
	background-size: 100% 100%;
	
	<!--設定圖片顯示的位置，顯示某一塊尺寸的影象。網頁的 0，0座標是視窗的左上角， 如果要顯示圖片某個中心的位置，則意味這要把圖片整體往左上角移動。注意在網頁當中讓圖片或者元素往上移動或者往左移動，都是負值 -->
	background-position: -1063px -705px;
	
}

.box{
	width: 200px;
	height: 200px;
	border: 1px solid red;
	<!--背景圖片的組合寫法， no-repeat設定圖片不會重複顯示-->
	background: url("圖片路徑") red no-repeat;
}

<div class="box></div>