1 - 認(rèn)識(shí)CSS樣式
CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用于定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式，如文字大小、顏色、字體加粗等用于設(shè)置頁面的表現(xiàn)。CSS3 并不是一個(gè)完整的獨(dú)立版本而是將不同的功能拆分成獨(dú)立模塊（例如，選擇器模塊，盒模型模塊），這有利于不同功能的及時(shí)更新與發(fā)布也利于瀏覽器廠商的實(shí)際使用。
2 - 為何使用CSS？
CSS幫助您將文檔信息的內(nèi)容 和如何展現(xiàn)它的細(xì)節(jié)相分離。眾所周知，如何展現(xiàn)文檔的細(xì)節(jié)即為樣式(style)。您可以將樣式從它的內(nèi)容分離出來，以便您能夠：
避免重復(fù)
更容易維護(hù)
為不同的目的，使用不同的樣式而內(nèi)容相同
例如:
您的網(wǎng)站可能有成千上萬的頁面外觀相似。使用CSS，您可以將樣式信息存儲(chǔ)在公共的文件中以供所有的頁面共用。
當(dāng)用戶顯示頁面時(shí)，用戶的瀏覽器將樣式信息和頁面內(nèi)容一同加載。
當(dāng)用戶打印頁面時(shí)，您可以提供不同的樣式信息，以便于打印出來的頁面更易于閱讀。
總之，在HTML中，您使用標(biāo)記語言來描述文檔的內(nèi)容而不是它的樣式。您可以使用CSS來指定它的樣式而不是它的內(nèi)容。
3 - CSS語法
CSS 規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明:
選擇器：指明網(wǎng)頁中要應(yīng)用樣式規(guī)則的元素，如本例中是網(wǎng)頁中所有的段（p）的文字將變成紅色，而其他的元素（如ol）不會(huì)受到影響。
聲明：在英文大括號(hào)“｛｝”中的的就是聲明，屬性和值之間用英文冒號(hào)“：”分隔。當(dāng)有多條聲明時(shí)，中間可以英文分號(hào)“;”分隔，如下所示：
CSS 注釋
注釋是用來解釋你的代碼，并且可以隨意編輯它，瀏覽器會(huì)忽略它。
CSS注釋以?/*?開始, 以?*/?結(jié)束, 實(shí)例如下:
4 - CSS樣式引入
4.1 - 內(nèi)聯(lián)式css樣式
內(nèi)聯(lián)式css樣式表就是把css代碼直接寫在現(xiàn)有的HTML標(biāo)簽中，如下面代碼：
<p style="color:red">這里文字是紅色。</p>
注意要寫在元素的開始標(biāo)簽里，下面這種寫法是錯(cuò)誤的：
<p>這里文字是紅色。</p style="color:red">
并且css樣式代碼要寫在style=""雙引號(hào)中，如果有多條css樣式代碼設(shè)置可以寫在一起，中間用分號(hào)隔開。如下代碼：
<p style="color:red;font-size:12px">這里文字是紅色。</p>
4.2 - 嵌入式css樣式
嵌入式css樣式，就是可以把css樣式代碼寫在<style type="text/css"></style>標(biāo)簽之間。如下面代碼實(shí)現(xiàn)把三個(gè)<span>標(biāo)簽中的文字設(shè)置為紅色：
嵌入式css樣式必須寫在<style></style>之間，并且一般情況下嵌入式css樣式寫在<head></head>之間。
4.3 - 外部式css樣式
外部式css樣式(也可稱為外聯(lián)式)就是把css代碼寫一個(gè)單獨(dú)的外部文件中，這個(gè)css樣式文件以“.css”為擴(kuò)展名，在<head>內(nèi)（不是在<style>標(biāo)簽內(nèi)）使用<link>標(biāo)簽將css樣式文件鏈接到HTML文件內(nèi)，如下面代碼：
<link href="base.css" rel="stylesheet" type="text/css" />
4.3 - simport url
導(dǎo)入方式指的是使用 CSS 規(guī)則引入外部 CSS 文件。
5 － css選擇器
什么是選擇器？
每一條css樣式聲明（定義）由兩部分組成，形式如下：
在{}之前的部分就是“選擇器”，“選擇器”指明了{(lán)}中的“樣式”的作用對(duì)象，也就是“樣式”作用于網(wǎng)頁中的哪些元素。比如右側(cè)代碼編輯器中第7行代碼中的“body”就是選擇器。
5.1 － 簡(jiǎn)單選擇器
簡(jiǎn)單選擇器可組合使用。
5.1.1 － 標(biāo)簽選擇器
標(biāo)簽選擇器其實(shí)就是html代碼中的標(biāo)簽。如右側(cè)代碼編輯器中的<html>、<body>、<h1>、<p>、<img>。例如下面代碼：
上面的css樣式代碼的作用：為p標(biāo)簽設(shè)置12px字號(hào)，行間距設(shè)置1.6em的樣式。
5.1.2 － 類選擇器
類選擇器在css樣式編碼中是最常用到的
.className 以 . 開頭，名稱可包含字母，數(shù)字，-，_，但必須以字母開頭。它區(qū)分大小寫并可出現(xiàn)多次。
語法：
.類選器名稱{css樣式代碼;}
注意：
1.英文圓點(diǎn)開頭
2.其中類選器名稱可以任意起名（但不要起中文噢）
使用方法：
第一步：使用合適的標(biāo)簽把要修飾的內(nèi)容標(biāo)記起來，如下：
<span>膽小如鼠</span>
第二步：使用class="類選擇器名稱"為標(biāo)簽設(shè)置一個(gè)類，如下：
<span class="stress">膽小如鼠</span>
第三步：設(shè)置類選器css樣式，如下：
5.1.3 － ID選擇器
#idName以 # 開頭且只可出現(xiàn)一次，其命名要求于 .className 相同。在很多方面，ID選擇器都類似于類選擇符，但也有一些重要的區(qū)別：
1.為標(biāo)簽設(shè)置id="ID名稱"，而不是class="類名稱"。
2.ID選擇符的前面是井號(hào)（#）號(hào)，而不是英文圓點(diǎn)（.）。
3.ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個(gè)HTML文檔中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。
4.可以使用類選擇器詞列表方法為一個(gè)元素同時(shí)設(shè)置多個(gè)樣式。我們可以為一個(gè)元素同時(shí)設(shè)多個(gè)樣式，但只可以用類選擇器的方法實(shí)現(xiàn)，ID選擇器是不可以的（不能使用 ID 詞列表）。
栗子：
5.1.4 － 通配符選擇器
通用選擇器是功能最強(qiáng)大的選擇器，它使用一個(gè)（*）號(hào)指定，它的作用是匹配html中所有標(biāo)簽元素，如下使用下面代碼使用html中任意標(biāo)簽元素字體顏色全部設(shè)置為紅色：
* {color:red;}
5.1.5 － 屬性選擇器
對(duì)帶有指定屬性的 HTML 元素設(shè)置樣式。
可以為擁有指定屬性的 HTML 元素設(shè)置樣式，而不僅限于 class 和 id 屬性。
注釋：只有在規(guī)定了 !DOCTYPE 時(shí)，IE7 和 IE8 才支持屬性選擇器。在 IE6 及更低的版本中，不支持屬性選擇。
