css基礎：

	層疊樣式表

• 作用:

   	渲染頁面
   	提高工作效率
  

• 格式:

   	選擇器{屬性:值;屬性1:值1;}
  

• 字尾名:

   	.css 獨立的css(樣式)檔案
  

• 和html元素的整合★

   	方式1:內聯樣式表 通過標籤的style屬性設定樣式
   	方式2:內部樣式表 在當前頁面中使用的樣式
   		通過head標籤的style子標籤匯入
   		例如:
   			<style>
   				#divId2{
   					background-color: #0f0;
   				}
   			</style>
   			
   	方式3:外部樣式表 有獨立的css檔案
   		通過head標籤的link子標籤匯入
   		例如:
   			<link rel="stylesheet" href="css/1.css" type="text/css"/>
   
  

• 選擇器:★

   	id選擇器
   		要求:
   			html元素必須有id屬性且有值   <xxx id="id1"></xxx>
   			css中通過"#"引入,後面加上id的值  #id1{...}
   	class選擇器
   		要求:
   			html元素必須有class屬性且有值 <xxx class="cls1"/>
   			css中通過"."引入,後面加上class的值  .cls1{...}
   	元素選擇器
   		直接用元素(標籤)名即可   xxx{...}
  

• 派生的選擇器

   	屬性選擇器★
   		要求:
   			html元素必須有一個屬性不論屬性是什麼且有值  <xxx nihao="wohenhao"/>
   			css中通過下面的方式使用
   				元素名[屬性="屬性值"]{....}
   				例如:
   					xxx[nihao="wohenhao"]{....}
   
  

• 後代選擇器

   	選擇器 後代選擇器{...}  在滿足第一個選擇器的條件下找後代的選擇器,給滿足條件的元素新增樣式
  

• 瞭解的選擇器

   	錨偽類選擇器
   		a:link {color: #FF0000}	/* 未訪問的連結 */
   		a:visited {color: #00FF00}	/* 已訪問的連結 */
   		a:hover {color: #FF00FF}	/* 滑鼠移動到連結上 */
   		a:active {color: #0000FF}	/* 選定的連結 */
  

• 選擇器使用小結:

   	id選擇器:一個元素(標籤)
   	class選擇器:一類元素 
   	元素選擇器:一種元素
   	屬性選擇器:元素選擇器的特殊用法
   
  

• 使用的時候注意:(瞭解)

   	若多個樣式作用於一個元素的時候
   		不同的樣式,會疊加
   		相同的樣式,最近原則
   	若多個選擇器作用於一個元素的時候
   		越特殊優先順序越高 id優先順序最高
  

css屬性(瞭解)

• 字型

   	font-family:設定字型(隸書) 設定字型家族
   	font-size:設定字型大小
   	font-style:設定字型風格
  

• 文字:改變文字的顏色、字元間距，對齊文字，裝飾文字，對文字進行縮排

   	color:文字顏色
   	line-height:設定行高
   	text-decoration: 向文字新增修飾。 none underline
   	text-align:對齊文字
  

• 列表:

   	list-style-type:設定列表項的型別 例如:a 1  實心圓 
   	list-style-image:設定圖片最為列表項型別 使用的時候使用 url函式  url("/i/arrow.gif");
  

• 背景:

   	background-color:設定背景顏色
   	background-image:設定圖片作為背景 url
  

• 尺寸:

   	width:
   	height:
  

• 定位:

   	浮動：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
   		float: 可選值 left right
   	相對定位：如果對一個元素進行相對定位，它將出現在它所在的位置上。然後，可以通過設定垂直或水平位置，讓這個元素“相對於”它的起點進行移動。
   		position: relative;
   		left: 30px;
   		top: 20px;
   		//相對於自己進行浮動
   	絕對定位:絕對定位的元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。
   		position: absolute;
   		left: 30px;
   		top: 20px;
   		//相對於它的父級元素進行定位
  

• 分類:

   	clear:設定元素的兩邊是否有其他的浮動元素
   		值為:both 兩邊都不允許有浮動元素
   	display:設定是否及如何顯示元素。
   		none 此元素不會被顯示。 
   		block 此元素將顯示為塊級元素，此元素前後會帶有換行符。 
   		inline 預設。此元素會被顯示為內聯元素，元素前後沒有換行符。
  

• 框模型:(理解)

   一個元素外面有padding(內邊距) border(邊框) margin(外邊距)
   	padding:元素和邊框的距離
   	margin:元素最外層的空白
   上面這三個屬性都有簡寫的屬性
   	若設定大小的時候 四個值:順序 上右下左
   		padding:10px 10px 10px 10px
   		若只寫一個的話 代表四個邊使用同一個值  padding:10px
   		若只寫兩個個的話 代表四個邊使用同一個值 padding:10px 20px
   		若只寫三個個的話 代表四個邊使用同一個值 padding:10px 20px 30px
   border(邊框)
   	還可以設定顏色 風格
   	簡寫屬性:
   		border:寬度	風格 顏色;
  
   		border:5px solid red;
   		
   		solid:實線
   		dashed:虛線
   		double:雙實線