一 css樣式表基礎
1，css基本概念
css（cascading style sheet）即層疊樣式表，簡稱樣式表，要理解樣式表的概念先要理解樣式的概念，樣式是對網頁中的元素（字體，段落圖像，列表等）屬性的整體概括，即描述所有網頁對象的顯示形式（例如文字的大小，字體，背景及圖像的顏色，大小等都是樣式）。層疊，就是指當HTML文件引用多個css文件時，如果css文件之間所定義的樣式發生了衝突，將依據層次的先後來處理其樣式對內容的控制。
2，css基本語法
css語法包括三部分：選擇符，樣式屬性和屬性值
css基本語法：
selector{property:value; property:value;.... proerty:value}
selector代表選擇符，property代表屬性，value代表屬性值
選擇符包括多種樣式，所有HTML標記都可以作爲選擇符，如body，p，table等都是選擇符。但在利用css的語法給他們定義屬性和值時，其中屬性和值要用冒號隔開。
例如：body{color:red}
如果屬性值由多個單詞組成，並且單詞間有空格，那麼必須給值加上引號，如字體的名稱經常是幾個單詞組成
例如：p{font-family:"Courier New"}
如果需要對一個選擇符指定多個屬性時，用分號將屬性隔開
例如：p{text-align:center; color:red; font-family:calibri}
爲了提高代碼的可讀性，上面的例子也可以分行寫
p
{
text-align:center;
color:red;
font-family:calibri
}
相同屬性和值的選擇符組合起來稱爲選擇符組。如果需要給選擇符組定義屬性和值，只要用逗號將選擇符組分開即可，這樣可以減少重複定義樣式
例如：
p,table{font-size:10pt}
其效果完全等效於：
p{font-size:10pt}
table{font-size:10pt}
3，類選擇符
用戶類選擇符可以把相同的元素分類定義成不同的樣式，在定義類選擇符時，在自定義類名稱的面前加一個句點（.）。
類選擇符語法：
標記名.類名{樣式屬性:取值; 樣式屬性:取值;...}
例如：要設置兩個不同文字顏色的段落，一個爲紅色，一個爲藍色，可以利用如下代碼預定義兩個類
p.red{color:red}
p.blue{color:blue}
以上的代碼中定義了段落選擇符p的red和blue兩個類，即red和blue成爲類選擇符，其中類得名稱可以是任意英文字母或是字母開頭的數字組合。要注意的是，這裏的p（HTML）標記是可以省略的。而且在實際應用中，這種省略HTML標記的類選擇符是最常用的css方法，因爲這種方法定義的類選擇符沒有適用範圍的限制。而不省略HTML標記的類選擇符，其適用範圍僅限於該標記所包含的內容，例如下面省略了HTML標記的類選擇符。
.red{color:red}
.blue{color:blue}
但是要怎麼樣才能在不同的段落裏應用這些樣式呢？只要在HTML標記里加入已經定義的class參數即可，如下應用了剛纔定義的兩個類選擇符
<p class=red>或者是<p class=blue>
4，id選擇符
在HTML文檔中，需要唯一標識一個元素時，就會賦予它一個id標識，以便哎對整個文檔進行處理時能夠很快地找到這個元素。而id選擇符就是用來對這個單一元素定義單獨的樣式。其定義方法與類選擇符大同小異，只需要把句點（.）改爲井號（#），而調用時需要把class改爲id
id選擇符語法：標記名#標識名{樣式屬性:取值; 樣式屬性:取值;...}
例如，如果要在頁面中定義一個id爲salary的元素，並要設置這個元素爲紅色，那麼只要添加如下代碼
#salary{color:red}
<p id="salary">
由於id選擇符侷限性很大，只能單獨定義某個元素的樣式，一般只在特殊情況下使用
5，包含選擇符
包含選擇符是對某種元素包含關係（如元素1裏包含元素2）定義的樣式表。這種方式只對在元素1裏的元素2定義，對單獨的元素1或元素2無定義。例如：
table b{font-size:11px}這裏只是說明表格b內的字號爲11像素，對錶格外的字號沒有影響
6，僞類
僞類不屬於選擇符，它是讓頁面呈現豐富表現力的特殊屬性，之所以稱爲“僞”，是因爲它指定的對象在文檔中並不存在，他們指定的是元素的某種狀態
應用最廣泛的僞類是鏈接的4個狀態——未鏈接狀態（a:link）,已訪問鏈接狀態：（a:visited）,鼠標指針懸停在鏈接上的狀態（a:hover）以及被激活（在鼠標單擊與發生的事件）的鏈接狀態（a:active）。在HTML頁面內，使用<a>標記鏈接元素並沒有設置4個狀態的代碼，但是可以通過設置鏈接的僞類來使其呈現這些狀態。選擇符和僞類之間用英文分號隔開
7，選擇符優先級
在應用選擇符的過程中，可能會遇到同一個元素由不同選擇符定義的情況，這時候就要考慮到選擇符的優先級。通常我們使用的選擇符包括id選擇符，類選擇符，包含選擇符和HTML標記選擇符等。因爲id選擇符是最後被加到元素上的，所以優先級最高，其次是類選擇符。!important語法主要用來提升樣式規則應用優先級。只要使用了!important語法聲明，瀏覽器就會優先選擇它聲明的樣式顯示。所以若想打破已定義的優先級順序們可以使用!important聲明
8，插入css樣式表
插入css樣式表到HTML文件中有4種方法，分別是：鏈入外部樣式表，內部樣式表，嵌入樣式表和導入外部樣式表。單在應用這4種方法將css文件插入到HTML文件時，由於css文件的定義可以放置在HTML文件的幾個不同位置，所以將其分爲頭部，主體和外部。css文件的定義可以放置在HTML文件的幾個不同位置，所以將其分爲頭部，主體和外部。
css文件定義在HTML文件頭部的方法：內部樣式表
css文件定義在HTML文件主體的方法：嵌入樣式表
css文件定義在HTML文件外部的方法：鏈入外部樣式表，導入外部樣式表
9，鏈入外部樣式表
鏈入外部樣式表先把樣式表保存爲一個單獨的文件，然後在HTML文件中使用<link>標記鏈接，同時這個<link>標記必須放到HTML代碼的<head>區域內
基本語法：
- < head >
- ...
- < link rel = "stylesheet" type = "text/css" href = "樣式表文件的地址" >
- </ head >
- ...
rel="stylesheet"是指在HTML文件中使用的是外部樣式表
type="text/css"指明該文件的類型是樣式表文件
href中的樣式表的地址，可以爲絕對地址或相對地址
外部樣式表文件中不能含有任何HTML標籤，如<head>或<style>等
css文件要和HTML文件一起發佈到服務器上，這樣在用瀏覽器打開網頁時，瀏覽器會按照該HTML網頁所鏈接的外部樣式表來顯示其風格
一個外部樣式表可以應用於多個HTML文件。當改變這個樣式表文件時，所有網頁的樣式隨之改變，因此常用在製作大量相同的網頁中，因爲使用這種方法不僅能減少重複工作量，而且方便以後的修改和編輯，有利於站點的維護。同時在瀏覽網頁時一次性將樣式表文件下載，減少了代碼的重複下載
10，內部樣式表
內部樣式表是通過<style>標記把樣式表內容直接定義在HTML文件的<head>標記之內
基本語法：
- < head >
- < style type = "text/css" >
- <!--
- 選擇符{樣式屬性:取值; 樣式屬性:取值; ...}
- 選擇符{樣式屬性:取值; 樣式屬性:取值; ...}
- ...
- -->
- </ style >
- </ head >
<style>標記用來說明所要定義的樣式所要定義的樣式
type="text//css"說明這是一段css代碼
<!--與-->標記的加入是爲了防止一些不支持css的瀏覽器，將<style>與</style>之間的css代碼當成普通字符串顯示在網頁中
選擇符也就是樣式的名稱，這領的選擇符可以選用HTML標記的所有名稱
內部樣式表方法就是將所有的樣式信息都列於HTML文件的頭部，因此這些樣式可以在整個HTML文件中調用。如果想對網頁一次性加入樣式表，即可選用該方法
11，嵌入樣式表
嵌入樣式表是在HTML代碼的主體，即<body>標記中直接加入樣式表的方法，所以這種方法可以很直觀地對某個元素直接定義樣式
基本語法：
- < head >
- ...
- </ head >
- < body >
- ...
- < HTML 標記 style = "樣式屬性:取值; 樣式屬性:取值; ..." >
- ...
- </ body >
HTML標記就是頁面中標記HTML元素的標記，例如body，p等
style參數後面引號中的內容就相當於樣式表大括號裏的內容。需要指出的是，style參數可以應用於HTML文件中的body標記，以及除了basefont，param和script之外的任何元素
利用這種方法定義的樣式，其效果只能控制某個標記，所以比較適用於指定網頁中某個小段文字的顯示風格，或某個元素的樣式
12，導入外部樣式表
導入外部樣式表是指在樣式表的<style>區域內引用一個外部的樣式表文件，和鏈入外部樣式表方法相似，但導入時需要使用@import做聲明。@import聲明可以放到head外也可放到head內，但根據語法規則，一般都放在head內來使用
基本語法：
- < head >
- < style type = "text/css" >
- @import url（外部樣式表地址）;
- ...
- </ style >
- ...
- </ head >
import語句後面的“;”是不可以省略的
外部樣式表文件的文件擴展名必須爲.css
樣式表地址可以是絕對地址，也可以是相對地址
在使用中，某些瀏覽器可能會不支持導入外部樣式表的@import聲明。所以此方法不經常用到
上面四種方法優先級最高的是嵌入樣式表方法，其餘三中方法順序相同，若同時出現，瀏覽器會遵守“最近優先原則”，即與內容最靠近的那個樣式表插入方法