目標
掌握 CSS 選擇器
掌握使用 CSS 選擇器修飾頁面細節
瞭解 CSS 層(盒狀模型)的概念
瞭解 CSS 3新特性
1、掌握 CSS 選擇器
在一個網頁中有很多的HTML標籤，如果想對某個標籤的內容
進行樣式修飾，必須先從衆多標籤中找到它。
CSS 語法，爲我們提供了非常方便的語法來選中具體的某個
標籤----CSS 選擇器
基本選擇器(3種)：
標籤(元素Element)選擇器：一般給多個相同的標籤設置樣式
<p>aaa</p>
p{
/* 裏面的樣式代碼對 aaa 生效 */
}
------------------
類別(僞類)選擇器：同時選中多個標籤，這些標籤可以人爲
對他們進行分類。
<p class="ff">aaaaaa</p>
<div class="ff">bbbb</div>
<a class="ff">vcvccccc</a>
.ff{
/* 對網頁中所有有 class=ff 屬性的標籤生效 */
}
------------------
ID 選擇器：一次只選中唯一具有該 id 名稱的標籤
<p id="aa">asdfasd</p>
<a id="bb">asdfasdf</a>
#aa{
/* 在整個頁面中，只能選中一個 id="aa" 的標籤 */
}
------------------
複合選擇器(靈活組合三種基本選擇器)：
交集選擇器:同時滿足兩個條件的選擇器
<p class="aa">dfasdfasd</p>
<div class="aa">asdfasdf</div>
div{}
.aa{} ====> div .aa{}
div >.aa{}
並集選擇器:同時選中多個，這多個標籤都有相同的樣式
<p>asdfsdfd</p>
<p class="aa">dfasdfasd</p>
<div class="aa">asdfasdf</div>
<span>cccc</span>
<div>asdfasdf</div>
p,div .aa,span{}
嵌套(後代)選擇器:
<p>asdfsdfd</p>
<span>adfasdf</span>
<div>sdfsdf</div>
<div class="aa">asdfasdf
<p class="aa">dfasd
<span>cccc</span>
fasd</p>
<p class="bb">dfasdasd</p>
</div>
/* 先確定最外層的標籤，逐步往所要找的標籤靠近 */
div .aa p .aa span{}
------------------------------
專門針對鏈接 <a > 標籤制定了一個特殊選擇器
a{} Element 選擇器
鏈接標籤，本身自帶有一些鼠標事件：鼠標移動、覆蓋、
點擊、移出、訪問後
a:link{/* 默認情況，沒有做任何鼠標動作時的樣式 */}
a:visited{/* 鼠標點擊以後的樣式 */}
a:hover{/* 鼠標移動到鏈接上的樣式 */}
a:active{/* 鼠標單擊時的樣式 */}
注意：當多個基本選擇器同時對某個標籤的屬性進行修飾時，
ID 選擇器優先級最高、類別選擇器次之、標籤選擇器最低
CSS 代碼與 HTML 代碼分離：
(1)行內引入，不推薦
<p style="css 代碼">ssss</p>
(2)內嵌引入，部分推薦
<head>
<style type="text/css">CSS 代碼</style>
</head>
(3)外部導入，所有 css 代碼獨立在 *.css 文件中,
不推薦
<head>
<style type="text/css">
@import "css/style.css"
</style>
</head>
(4)外部鏈接,CSS代碼全部在 style.css 文件中，推薦使用
<head>
<link href="css/style.css"
rel='stylesheet'
type='text/css'>
</head>
在編寫外部的樣式文件時，考慮代碼重用，一般都會把
修改不同內容的樣式進行分離。
修飾整個頁面邊框佈局的樣式 layout.css
修飾整個頁面所有字體的樣式 font.css
修改整個頁面背景等內容的樣式 main.css
修改整個頁面中所有圖片的樣式 img.css
.........
修改頁面打印時所需要的樣式 print.css
<link rel="shortcut icon" href="http://www.126.com/favicon.ico" />
<link id="setSkin" type="text/css" rel="stylesheet"
href="http://img2.cache.netease.com/www/v2011/css/theme_blue1227.css" />
在使用各種方式導入樣式的時候，離內容最近的樣式，優先級最高
行內引入-->內嵌-->外部導入-->外部鏈接
2、掌握使用 CSS 選擇器修飾頁面細節
在設計一個頁面之前，需要全局的考慮，如：主體顏色、風格、
佈局等內容。
1 可以先使用 Excel 進行頁面佈局設計
2 然後使用 HTML 中的 <div>標籤來大體標記這些佈局
3 最後使用 CSS 樣式給每個矩形的佈局塊進行位置、高寬、顏色等的設置
3、瞭解 CSS 層(盒狀模型)的概念
在 CSS 中，把頁面看做由多個矩形塊搭建而成。
在 CSS 中一般對 div 層標籤，附加了內容、內邊距、邊框、
外邊距 四個屬性。
內容：width height
內邊距：padding
padding-top padding-left padding-right padding-button
padding:10px 2px 50px 20xp;
padding:10px 20px 10px 20xp; ==>padding:10px 20px;
padding:10px;
邊框：border
top left right button style(實線、虛線、雙線、浮雕線)
外邊距：margin
設置盒狀模型四邊的順序：順時針方式，上右下左。
--------------------------
CSS 的定位：
默認的所有的 div 按照編寫的代碼順序有各自的位置，
每個 div ，默認佔據一整行。
可以使用屬性 position 對一個 div 塊進行定位
絕對定位：以瀏覽器左上角原點爲起點定位，當一個元素
使用絕對定位時，原來他在頁面中的位置就消失。
相對定位：
浮動定位：
4、瞭解 CSS 3新特性
CSS 開發工具
Rapid CSS 2008 綠色軟件
