一.Css規則主要由兩部分組成 1.選擇器 2.一條或多條聲明a. 選擇器主要作用是為了確定需要改變樣式的HTML元素b. 每一條聲明由一個屬性和一個值組成，使用花括弧來包圍聲明，屬性與值之間使用冒號(:)分開,多條聲明用分號(;)隔開. 例如：form {width: 200px;margin: ...
一.Css規則主要由兩部分組成 1.選擇器 2.一條或多條聲明
a. 選擇器主要作用是為了確定需要改變樣式的HTML元素
b. 每一條聲明由一個屬性和一個值組成，使用花括弧來包圍聲明，屬性與值之間使用冒號(:)分開,多條聲明用分號(;)隔開.
例如：form {width: 200px;margin: 20px auto;}
二.選擇器有id，類，元素（標簽），屬性，偽類，通用選擇器
前幾個大家大概都清楚，寫一下偽類選擇器：
css偽類用於向某些選擇器添加特殊效果。
下麵我們介紹一下錨偽類。
在支持css的瀏覽器中，鏈接的不同狀態都可以不同的方式顯示，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態，和滑鼠懸停狀態。
a:link {color: #FF0000}/* 未訪問的鏈接 */
a:visited {color: #00FF00}/* 已訪問的鏈接 */
a:hover {color: #FF00FF}/* 滑鼠移動到鏈接上 */
a:active {color: #0000FF}/* 選定的鏈接 */
註意:
1.在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 之後，才是有效的。
2.在 CSS 定義中，a:active 必須被置於 a:hover 之後，才是有效的。
3.偽類名稱對大小寫不敏感。
優先順序id>偽類 >類 >元素>通用
三.值的單位
%百分比
in英寸
cm釐米
mm毫米
em能自動適應用戶所使用的字體
pt磅 (1 pt 等於 1/72 英寸)
pc12 點活字 (1 pc 等於 12 點)
px像素 (電腦屏幕上的一個點)
(顏色名)顏色名稱 (比如 red)
rgb(x,x,x)RGB 值 (比如 rgb(255,0,0))
rgb(x%, x%, x%)RGB 百分比值 (比如 rgb(100%,0%,0%))
#rrggbb十六進位數 (比如 #ff0000)
四.導入CSS
最常用的就是外部和內部樣式表
1.內部樣式表
在head標簽中加入style標簽，然後在style的標簽體中再對多個標簽的樣式進行修改。
例如:
<style type="text/css">
div{
border:1px dashed #ff00ff;
}
</style>
2.外部樣式表
通過head標簽里的link標簽,導入myStyle.css文件
例如:
<link rel="stylesheet" href="myStyle.css" type="text/css">
除此之外標簽中也可以加入，style屬性來寫樣式
五.CSS屬性
1.字體
Css字體屬性定義文本的字體系列，大小，加粗，風格(如斜體)和變形(如小型大寫字母)
常用屬性:
font:簡寫屬性，作用是把所有針對字體的屬性設置在一個聲明中。
格式：{font :風格 異體 粗細 尺寸/行間距 字體系列}
例如：{ font: italic bold 12px/20px arial,sans-serif}
font-family:定義字體系列
•具體字體的名稱，例如：font-family:隸書。
•通常字體系列名稱：例如 font-family:"serif","sans-serif","cursive","fantasy","monospace"
“,”的意思是指如果本地沒有該字體系列，再使用下一個
font-size:定義字體的尺寸 例如 font-size:40px
font-style:定義字體風格 例如 font-style:italic
2.文本
CSS 文本屬性可定義文本的外觀。通過文本屬性，您可以改變文本的顏色、字元間距，對齊文本，裝飾文本，對文本進行縮進，等等.
常用屬性
color:定義文本顏色 例如 color:#ffff00
text-align:定義文本對齊方式 例如:text-align:center
text-decoration 向文本添加修飾。例如text-decoration:underline(下劃線)
letter-spacing:定義字元間隔
word-spacing:定義字間隔
3.背景
CSS 允許應用純色作為背景，也允許使用背景圖像創建相當複雜的效果。CSS 在這方面的能力遠遠在 HTML 之上。
常用屬性:
background:簡寫屬性，作用是將背景屬性設置在一個聲明中
格式：{background: 顏色 url(圖片路徑) 重覆 滾動 位置}
例如: {background: #00FF00 url(bgimage.gif) no-repeat fixed top}
background-color:定義背景顏色
background-image:定義背景圖片 background-image:url(xx.jpg)
background-position:定義背景圖片的起始位置 background-position:10% 5%;
background-repeat:定義背景圖片是否重覆及如何重覆 background-repeat:no-repeat
4.尺寸
CSS 尺寸 (Dimension) 屬性允許你控制元素的高度和寬度。
常用屬性:
width:設置元素的寬度
height:設置元素的高度
5.列表
CSS 列表屬性允許你放置、改變列表項標誌，或者將圖像作為列表項標誌。
常用屬性:
list-style:簡寫屬性。用於把所有用於列表的屬性設置於一個聲明中。
格式:{list-style : 圖片 類型 位置}
例如:{list-style : url(liebiao.jpg) square inside}
list-style-type:定義列表項標誌的類型
list-style-position:定義列表項標誌的位置 常用值:inside ,outside
list-style-image:定義列表項標誌為圖象
6.表格
CSS 表格屬性可以幫助您極大地改善表格的外觀
常用屬性:
border-collapse:定義是否把表格邊框合併為單一的邊框。常用值:collapse,separate
border-spacing:定義分隔單元格邊框的距離
caption-side:定義表格標題的位置常用值:top,bottom
7.輪廓
輪廓（outline）是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。
CSS outline 屬性規定元素輪廓的樣式、顏色和寬度。
常用屬性:
outline:在一個聲明中設置所有的輪廓屬性
格式:{outline:顏色 樣式 寬度}
例如:{outline:#00FF00 dotted thick;}
outline-style:定義輪廓的樣式 常用值:solid(實線) ,dashed(虛線) ,double(雙線)...
outline-color:定義輪廓的顏色
outline-width:定義輪廓的寬度 常用值:thin ,thick ,14px...
8.定位
CSS 定位 (Positioning) 屬性允許你對元素進行定位。
定位的基本思想很簡單，它允許你定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另一個元素甚至瀏覽器視窗本身的位置
常用屬性:
position:把元素放置到一個靜態的,相對的，絕對的，或固定的位置中。
absolute:絕對 相對於父元素
relative:相對 相對於自己應該出現的位置
fixed:相對於瀏覽器
top:定義了定位元素的上外邊距邊界與其包含塊上邊界之間的偏移量
right: 定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移
left: 定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移
bottom: 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。
9.分類
CSS 分類屬性允許你控制如何顯示元素，設置圖像顯示於另一元素中的何處，相對於其正常位置來定位元素，使用絕對值來定位元素，以及元素的可見度。
常用屬性
float:定義元素在哪個方向浮動
clear:設置一個元素的側面是否允許其它的浮動元素
cursor:當指向某元素之上時顯示的指針類型
display:定義是否顯示及如何顯示元素 常用值 none和inline 消失
visibility:定義元素是否可見或不可見。 常用值 hidden和visible占位隱藏
山不拒微土而成擎天之勢，水不擇細流終會洶涌之波！
css偽類用於向某些選擇器添加特殊效果。
下麵我們介紹一下錨偽類。
在支持css的瀏覽器中，鏈接的不同狀態都可以不同的方式顯示，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態，和滑鼠懸停狀態。
a:link {color: #FF0000} /* 未訪問的鏈接 */a:visited {color: #00FF00} /* 已訪問的鏈接 */a:hover {color: #FF00FF} /* 滑鼠移動到鏈接上 */a:active {color: #0000FF} /* 選定的鏈接 */註意:
u 在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 之後，才是有效的。
u 在 CSS 定義中，a:active 必須被置於 a:hover 之後，才是有效的。
u 偽類名稱對大小寫不敏感。
