第一經過CSS的時候是做牛腩系統的時候，牛腩上用了兩集的視頻就把CSS寫了個大概，我知道這對於一門語言來說感覺有點太輕了，今天DRP系統視頻也是用了幾集的視頻就把CSS介紹了一下，CSS其實就是那麼回事，CSS對於一般的程序員來講，知道一般性的知識就夠了，因爲我們不是搞美工的，我們沒有必要那麼要求我們自己，沒門知識其都有他的高深之處只不過我們應該認清，什麼樣的是有用的知識，我們即學即用即可，沒有必要去費很大的力氣搞自己用不到的知識。閒話不多說了.....
CSS基礎彙總
CSS是Cascading Style Sheet 的縮寫。譯作「層疊樣式表」。是用於（增強）控制網頁樣式並允許將樣式信息與網頁內容分離的一種標記性語言。
語法結構： Selector { property: value }
一、樣式表的分類：行內樣式表、內嵌樣式表、外部樣式表。
（1）行內樣式表：使用style屬性來定義。如果希望某段文字和其它段落的文字顯示風格不一樣。可選用行內樣式。
<head>
<title>CSS</title>
</head>
<body>
<p style="color:Red; font-style:italic;">我是中國人</p>
<p style="color:Blue">我是美國人</p>
</body>
</html>
（2）內嵌樣式表：內嵌樣式只對某張網頁起作用。它是寫在<head></head>裏面的。
<head>
<title>CSS</title>
<style type="text/css">
.p1{color:Red; font-size:30px;}
.p2{color:Blue}
</style>
</head>
<body>
<p class="p1">我是中國人</p>
<p class="p2">我是美國人</p>
</body>
</html>
（3）外部樣式表：如果希望多個頁面甚至於整個網站所有頁面都採用統一風格，可選用外部樣式表。
根據樣式文件與網頁的關聯方式，又分爲兩種：鏈接外部樣式表和導入樣式表。
A 鏈接外部樣式表：
<head>
<link rel="Stylesheet" type="text/css" href="mycss.css"/>
</head>
B 導入樣式表
<head>
<style type="text/css">
@import mycss.css
</style>
</head>
注意：
如果有多個樣式規則用於現一個頁面時，樣式規則起作用的優先級別是：行內樣式表（寫在標籤內的）>內嵌樣式表（寫在文檔頭部的）>外部樣式表（在外部文件中）。
二、選擇器：HTML選擇器、class選擇器、ID選擇器。
（1） HTML選擇器：使用HTML本來就固有的標籤來標識。如P(段落)、SPAN（塊）。
語法： HTML選擇器{ property:value; }
<head>
<title>CSS</title>
<style type="text/css">
P{ font-family:System;color:red;font-size:25px;}
</style>
</head>
<body>
<p>我是中國人</p>
</body>
（2）類選擇器(Class)：
語法： . 類名{樣式規則…}
<head>
<title>CSS</title>
<style type="text/css">
.test{ font-family:System;color:red;font-size:25px;}
</style>
</head>
<body>
<p class="test">我是中國人</p>
</body>
</html>
（3）ID選擇器:使用HTML元素的ID屬性（不常用）。
語法： #ID名{樣式規則…}
<head>
<title>CSS</title>
<style type="text/css">
#IDP{ font-family:System;color:red;font-size:25px;}
</style>
</head>
<body>
<p ID="#IDP" >我是中國人</p>
</body>
</html>
id和class選擇器的區別
id在於一個頁面同一個ID只能只有一次。
class可以無限制使用，可以服用，用於修飾一類。
id的優點（class的缺點）：id寫在css用"#"選擇器，class寫在css中用"."選擇器。"#"選擇器的優先級高於"."選擇器大約10倍。
所以當你需要提升優先級的時候，id標籤，或者id容器內的標籤將是很容易和有效的
三、訪問連接
<a href="#">流行飾品</a>
超鏈接樣式 說明 :
A:link{color:red} 未被訪問的鏈接樣式
A:visited{color:green} 已被訪問的鏈接樣式
A:hover{color:yellow} Mouse懸停在鏈接上時的樣式
A:active{color:blue} Mouse正在按下時鏈接文字的樣式
<a>這地方這個標籤是一個僞類，所謂的僞類：是CSS中已經定義好了，不能像類選擇符一樣隨意用別的名字，根據上面的語法可以解釋爲對象（選擇符）在某個狀態下僞類的樣式。
四、常用樣式屬性
CSS的屬性非常大，龐大的幾本書都寫不完，這裏僅列出常用的且實用的CSS屬性。
1 字體屬性Font：
（1）font-style：設置字體樣式
（2）font-size：設置字體大小
（3）font-family：設置字體類型如:宋體
（4）font-weight : normal | bold | bolder | lighter | number
設置字體粗細
normal : 正常的字體。相當於number爲400。聲明此值將取消之前任何設置
bold : 粗體。相當於number爲700。也相當於b對象的作用
bolder :特粗體
lighter :細體
2 文本屬性Text:
（1）text-align :設置文本對齊方式。
（2）text-decoration : none || underline || blink || overline || line-through
設置文本裝飾
none : 無裝飾
blink : 閃爍
underline : 下劃線品
line-through : 貫穿線
overline : 上劃線
3 背景屬性Background：
（1）background-color：設置背景顏色。
（2）background-image：設置背景圖像。background-image: url(圖像地址)
（3）background-repeat：設置一個指定的背景圖像如何被重複顯示。
4 定位屬性position（1）position : static | absolute | relative
設置對象的定位方式
static : 默認值。無特殊定位，對象遵循HTML定位規則
absolute : 將對象從文檔流中流出，即將其轉化爲一個“層”，並使用 left ， right ， top ， bottom 等屬性相對於其最接近的一個最有定位設置的父對象進行絕對定位。如果不存在這樣的父對象，則依據 body 對象。而其層疊通過 z-index 屬性定義
relative :對象不可層疊，但將依據 left ， right ， top ， bottom 等屬性在正常文檔流中偏移位置
（2）z-index : auto | number
設置對象的層疊順序。
auto : 遵從其父對象的定位
number : 無單位的整數值。可爲負數
5 方框屬性Box:
常用的方框屬性有：邊界屬性Margin、邊框屬性Border、填充屬性Padding。
（1）邊界屬性Margin：
(1-1)margin-top 設置對象的上邊距
(1-2)margin-right 設置對象的右邊距
(1-3)margin-bottom 設置對象的下邊距
(1-4)margin-left 設置對象的左邊距
（2）邊框屬性Border：
(2-1)border-style 設置對象的樣式
(2-2)border-width 設置對象的寬度
(3-3)border-color 設置對象的顏色
（3）填充屬性Padding：
(1-1)padding-top 設置對象與上邊框之間的距離
(1-2) padding -right 設置對象右邊框之間的距離
(1-3) padding -bottom設置對象下邊框之間的距離
(1-4) padding -left設置對象左邊框之間的距離
6 表格屬性Table:
（1）border-collapse : separate | collapse
separate : 邊框獨立（標準HTML）
collapse : 相鄰邊被合併
設置或檢索表格的行和單元格的邊是合併在一起還是按照標準的HTML樣式分開。