HTML5知識點總結（三）

常用的樣式屬性，背景及陰影

     字體及文本屬性
     邊距和填充
     邊框屬性
     列表屬性
     背景屬性
     背景的漸變
     陰影屬性

字體及文本屬性

    字體屬性

	font：設置字體是所有樣式
	font-family：設置字體類型
	font-size：設置字體大小
	font-weight：設置字體粗細
    color：設置字體顏色

font-family 和 font-size都是font的子屬性，一般常用字體屬性的縮寫形式，如： font:bold 12px 宋體 ;注意三個屬性的順序依次爲字體粗細，大小，樣式

    文本屬性

	line-height：設置行高
		常用屬性值：3px,8px，設置 line-height 與 heigh值一直時，樣式爲垂直中
	text-align：設置對齊方式，
		常用屬性值：left,right，center
	letter-spacing：設置字符間距
		常用屬性值：3px,8px
	text-decoration：設置文本修飾
		常用屬性值：none，underline，line-through

邊距和填充

    邊距：頁面中元素與元素直接的距離

 	margin：
 		設置一個值：上、下、左、右邊距
 		設置兩個值：上下，左右邊距
 		設置三個值：上，左右，下邊距
 		設置四個值，上，右，下，左順序分別對應邊距
 	margin-bottom：下邊距
	margin-left：左邊距
	margin-right：右邊距
	margin-top：上邊距
	margin: 0 auto；局中

    填充：元素內容與邊框之間的距離

	padding：
 		設置一個值：上、下、左、右邊距
 		設置兩個值：上下，左右邊距
 		設置三個值：上，左右，下邊距
 		設置四個值，上，右，下，左順序分別對應邊距
 	padding-bottom：下邊距
	padding-left：左邊距
	padding-right：右邊距
	padding-top：上邊距
	padding: 0 auto；局中

邊框屬性

    border屬性

	border-style：邊框樣式
		常用屬性值：none，soild，dashed
  	border-width：邊框寬度
  		常用屬性值：1px ，5px
  	border-color：邊框顏色
  		常用屬性值：red，black
   	border：符合屬性，用於設置邊框寬度，樣式，顏色
   		常用屬性值：border:1px solid red ;
   		
也可單獨設置某個方向的值：
	border-bottom：下邊框
	border-left：左邊框
	border-right：右邊框
	border-top：上邊框

    border-radius屬性：圓角邊框（ 半徑像素越大，圓角越明顯）

	border-radius：
 		設置一個參數：四個角
 		設置兩個參數：參數1：左上和右下角 ，參數2：右上和左下角
 		設置三個參數：參數1：左上角 ，參數2：左下和右上角，參數3：右下角
 		設置四個參數：順序依次爲：左上，右上，右下，左下

列表屬性

	list-style-image：圖片作爲列表項的符號，其值爲對象對應的url
	list-style-type：設定列表項的符號
		常用屬性值：none（無），disc（實心圓），circle（空心圓） ，square（實心方塊）
	list-style-position：符號在列表項的位置
		常用屬性：inside（內），outside（外）
	list-style：符合屬性，順序爲：符號，位置，圖片符號
		list-style:circle inside url() ;		

背景屬性

	background：符合屬性
	background-image：背景圖片
		常用屬性值：background-image:url(圖片名稱) ;
	background-repeat：背景圖片重複方式
		常用屬性值：repeat：水平和垂直反向平鋪
							  no-repeat：不平鋪
							  repeat-x：只在水平方向上平鋪
							  repeat-y：只在水垂直方向上平鋪
    background-position：背景圖片位置
    	常用屬性值：關鍵字：水平方向：left，center，right
    										垂直方向：top，center，bottom
    					   	 百分比：水平方向：0%(左)   50%(中)   100%(右)  
    									   垂直方向：0%(上)   50%(中)   100%(下)  
    					    像素值： 水平方向：正數向右偏移，負數向左偏移
    					   				   垂直方向：正數向下偏移，負數向上偏移
    background-size：背景圖片大小
 	background-color：背景圖片顏色

背景的漸變

    線向漸變

	background: linear-gradient(起點位置或方向，起始顏色，（過渡顏色），終止顏色);
	
向右，顏色紅色過渡到白色在過渡到黑色：
	background: linear-gradient(to right,red,white,black);

    徑向漸變

	background: radial-gradient(形狀，起點位置，起始顏色，（過渡顏色），終止顏色);
	
圓形漸變，以中心點爲圓心默認大小，顏色紅色過渡到白色在過渡到黑色：
	background: radial-gradient(circle at center ,red,white,black)

陰影屬性

    文字陰影

	text-shadow: h-shadow v-shadow blur color;
			h-shadow：必須存在：陰影的水平距離
			v-shadow：必須存在：陰影的垂直距離
			blur：可有可無：陰影的模糊半徑
	   		color：可有可無：陰影的顏色

    盒子陰影

		text-shadow: h-shadow v-shadow blur spread color;
			h-shadow：必須存在：陰影的水平距離
			v-shadow：必須存在：陰影的垂直距離
			blur：可有可無：陰影的模糊半徑
			spread：可有可無：陰影的大小
	   		color：可有可無：陰影的顏色