1.CSS介紹
CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用于定義HTML内容在浏覽器内的顯示樣式，如文字大小、顔色、字型加粗等。
CSS樣式由選擇符和聲明組成，而聲明又由屬性和值組成，如下圖所示：
選擇符
：又稱選擇器，指明網頁中要應用樣式規則的元素，如本例中是網頁中所有的段（p）的文字将變成藍色，而其他的元素（如ol）不會受到影響。
聲明
：在英文大括号
{}
中的的就是聲明，屬性和值之間用英文冒号
:
分隔。當有多條聲明時，中間可以英文分号
;
分隔，如下所示：
注意：
1、最後一條聲明可以沒有分号，但是為了以後修改友善，一般也加上分号。
2、為了使用樣式更加容易閱讀，可以将每條代碼寫在一個新行内，如下所示：
p{
font-size:12px;
color:red;
}
就像在Html的注釋一樣，在CSS中也有注釋語句：用
來标明（Html中使用
<!--注釋語句-->
)。就像下面代碼：
/*設定段落預設格式*/
p{
font-size:12px;
color:red;
}
2.CSS基本知識
内聯式CSS樣式
CSS樣式可以寫在哪些地方呢？從CSS 樣式代碼插入的形式來看基本可以分為以下3種：内聯式、嵌入式和外部式三種。這一小節先來講解内聯式。
内聯式： css樣式表就是把css代碼直接寫在現有的HTML标簽中，如下面代碼：
<p style="color:red">這裡文字是紅色。</p>
注意要寫在元素的
開始标簽
裡，下面這種寫法是錯誤的：
<p>這裡文字是紅色。</p style="color:red">
并且css樣式代碼要寫在
style=""
雙引号中，如果有多條css樣式代碼設定可以寫在一起，中間用分号隔開。如下代碼：
<p style="color:red ; font-size:12px">這裡文字是紅色。</p>
嵌入式CSS樣式
現在有一任務，把右側編輯器中的“超酷的網際網路”、“服務及時貼心”、“有趣易學”這三個短詞文字字号修改為18px。如果用上節課我們學習的内聯式CSS樣式的方法進行設定将是一件很頭疼的事情（為每一個
<span>
标簽加入
sytle="font-size:18px"
語句），本小節講解一種新的方法嵌入式CSS樣式來實作這個任務。
嵌入式css樣式，就是可以把css樣式代碼寫在
<style type="text/css"></style>
标簽之間。如下面代碼實作把三個
<span>
标簽中的文字設定為紅色：
<style type="text/css">
span{
color:red;
}
</style>
嵌入式CSS樣式必須寫在
<style></style>
之間，并且一般情況下嵌入式CSS樣式寫在
<head></head>
之間。
外部式CSS樣式
外部式CSS樣式(也可稱為外聯式)就是把css代碼寫一個單獨的外部檔案中，這個CSS樣式檔案以“.css”為擴充名，在
<head>
内（不是在
<style>
标簽内）使用
<link>
标簽将CSS樣式檔案連結到HTML檔案内，如下面代碼：
<link href="base.css" rel="stylesheet" type="text/css" />
注意：
1、CSS樣式檔案名稱以有意義的英文字母命名，如 main.css。
2、
rel="stylesheet" type="text/css"
是固定寫法不可修改。
3、
<link>
标簽位置一般寫在
<head>
标簽之内。
總結：
如果有一種情況：對于同一個元素我們同時用了三種方法設定CSS樣式，那麼哪種方法真正有效呢？在右邊編輯器就出現了這種情況
1、使用内聯式CSS設定“超酷的網際網路”文字為粉色。
2、然後使用嵌入式CSS來設定文字為紅色。
3、最後又使用外部式設定文字為藍色（style.css檔案中設定）。
但最終你可以觀察到“超酷的網際網路”這個短詞的文本被設定為了粉色。因為這三種樣式是有優先級的，記住他們的優先級：
内聯式 > 嵌入式 > 外部式
但是“嵌入式>外部式”有一個前提：嵌入式CSS樣式的位置一定在外部式的後面。如右代碼編輯器就是這樣，
<link href="style.css" ...>在
<style type="text/css">...</style>的前面（實際開發中也是這麼寫的）
感興趣的小夥伴可以試一下，把它們調換順序，再看他們的優先級是否變化。
其實總結來說，就是–就近原則（離被設定元素越近優先級别越高）。
但注意上面所總結的優先級是有一個前提：内聯式、嵌入式、外部式樣式表中css樣式是在的相同權值的情況下，什麼是權值呢？在後面的9-2小節中會講解到。
3.選擇器
每一條css樣式聲明（定義）由兩部分組成，形式如下：
選擇器{
樣式;
}
在{}之前的部分就是“選擇器”，“選擇器”指明了{}中的“樣式”的作用對象，也就是“樣式”作用于網頁中的哪些元素。
類選擇器
文法：
.類選器名稱{css樣式代碼;}
注意：
1、英文圓點開頭
2、其中類選器名稱可以任意起名（但不要起中文噢）
使用方法：
第一步：使用合适的标簽把要修飾的内容标記起來，如下：
<span>膽小如鼠</span>
第二步：使用class="類選擇器名稱"為标簽設定一個類，如下：
<span class="stress">膽小如鼠</span>
第三步：設定類選器css樣式，如下：
ID選擇器
在很多方面，ID選擇器都類似于類選擇符，但也有一些重要的差別：
1、為标簽設定
id="ID名稱"
，而不是
class="類名稱"
。
2、ID選擇符的前面是井号
#
号，而不是英文圓點
.
。
下面的代碼編輯器中就是一個ID選擇符的完整執行個體。
類選擇器和ID選擇器的差別
學習了類選擇器和ID選擇器，我們會發現他們之間有很多的相似處，是不是兩者可以通用呢？我們不要着急先來總結一下他們的相同點和不同點：
相同點：可以應用于任何元素
不同點：
1、ID選擇器隻能在文檔中使用一次。與類選擇器不同，在一個HTML文檔中，
ID選擇器隻能使用一次，而且僅一次
。而類選擇器可以使用多次。
下面代碼是正确的：
<p>三年級時，我還是一個<span class="stress">膽小如鼠</span>的小女孩，
上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個
<span class="stress">勇氣</span>來回答老師提出的問題。</p>
而下面代碼是錯誤的：
<p>三年級時，我還是一個<span id="stress">膽小如鼠</span>的小女孩，上課從來不敢
回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個<span id="stress">
勇氣</span>來回答老師提出的問題。</p>
2、可以使用類選擇器詞清單方法為一個元素同時設定多個樣式。我們可以為一個元素同時設多個樣式，但隻可以用類選擇器的方法實作，ID選擇器是不可以的（不能使用 ID 詞清單）。
下面的代碼是正确的
.stress{
color:red;
}
.bigsize{
font-size:25px;
}
<p>到了<span class="stress bigsize">三年級</span>下學期時，
我們班上了一節公開課...</p>
上面代碼的作用是為“三年級”三個文字設定文本顔色為紅色并且字号為25px。
下面的代碼是不正确的(完整代碼見右側代碼編輯器)
#stressid{
color:red;
}
#bigsizeid{
font-size:25px;
}
<p>到了<span id="stressid bigsizeid">三年級</span>下學期時，
我們班上了一節公開課...</p>
上面代碼不可以實作為“三年級”三個文字設定文本顔色為紅色并且字号為25px的作用。
子選擇器
還有一個比較有用的選擇器子選擇器，即大于符号(>),用于選擇指定标簽元素的第一代子元素。如右側代碼編輯器中的代碼：
這行代碼會使class名為food下的子元素li（水果、蔬菜）加入紅色實線邊框。
包含(後代)選擇器
包含選擇器，即加入空格,用于選擇指定标簽元素下的後輩元素。如右側代碼編輯器中的代碼：
這行代碼會使第一段文字内容中的“膽小如鼠”字型顔色變為紅色。
請注意這個選擇器與子選擇器的差別，子選擇器（child selector）僅是指它的直接後代，或者你可以了解為作用于子元素的第一代後代。而後代選擇器是作用于所有子後代元素。後代選擇器通過空格來進行選擇，而子選擇器是通過
>
進行選擇。
總結：
>
作用于元素的第一代後代，空格作用于元素的所有後代。
通用選擇器
通用選擇器是功能最強大的選擇器，它使用一個
*
号指定，它的作用是比對html中所有标簽元素，如下使用下面代碼使用html中任意标簽元素字型顔色全部設定為紅色：
僞類選擇符
更有趣的是僞類選擇符，為什麼叫做僞類選擇符，它允許給html不存在的标簽（标簽的某種狀态）設定樣式，比如說我們給html中一個标簽元素的滑鼠滑過的狀态來設定字型顔色：
上面一行代碼就是為
a
标簽滑鼠滑過的狀态設定字型顔色變紅。這樣就會使第一段文字内容中的“膽小如鼠”文字加入滑鼠滑過字型顔色變為紅色特效。
關于僞選擇符：
關于僞類選擇符，到目前為止，可以相容所有浏鑒器的“僞類選擇符”就是 a 标簽上使用
:hover
了（其實僞類選擇符還有很多，尤其是 CSS3 中，但是因為不能相容所有浏覽器，本教程隻是講了這一種最常用的）。其實
:hover
可以放在任意的标簽上，比如說
p:hover
，但是它們的相容性也是很不好的，是以現在比較常用的還是
a:hover
的組合。
分組選擇符
當你想為html中多個标簽元素設定同一個樣式時，可以使用分組選擇符
,(逗号)
，如下代碼為右側代碼編輯器中的h1、span标簽同時設定字型顔色為紅色：
它相當于下面兩行代碼：
h1{color:red;}
span{color:red;}
4.CSS的繼承、層疊和特殊性
繼承
CSS的某些樣式是具有繼承性的，那麼什麼是繼承呢？繼承是一種規則，它允許樣式不僅應用于某個特定html标簽元素，而且應用于其後代。比如下面代碼：如某種顔色應用于p标簽，這個顔色設定不僅應用p标簽，還應用于p标簽中的所有子元素文本，這裡子元素為span标簽。
p{color:red;}
<p>三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p>
可見右側結果視窗中p中的文本與span中的文本都設定為了紅色。但注意有一些CSS樣式是不具有繼承性的。如
border:1px solid red;
p{border:1px solid red;}
<p>三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p>
在上面例子中它代碼的作用隻是給p标簽設定了邊框為1像素、紅色、實心邊框線，而對于子元素span是沒用起到作用的。
特殊性
有的時候我們為同一個元素設定了不同的CSS樣式代碼，那麼元素會啟用哪一個CSS樣式呢?我們來看一下面的代碼：
p{color:red;}
.first{color:green;}
<p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p>
p
和
.first
都比對到了p這個标簽上，那麼會顯示哪種顔色呢？green是正确的顔色，那麼為什麼呢？是因為浏覽器是根據權值來判斷使用哪種CSS樣式的，權值高的就使用哪種CSS樣式。
下面是權值的規則：
标簽的權值為1，類選擇符的權值為10，ID選擇符的權值最高為100。
例如下面的代碼：
p{color:red;} /*權值為1*/
p span{color:green;} /*權值為1+1=2*/
.warning{color:white;} /*權值為10*/
p span.warning{color:purple;} /*權值為1+1+10=12*/
#footer .note p{color:yellow;} /*權值為100+10+1=111*/
注意：還有一個權值比較特殊–繼承也有權值但很低，有的文獻提出它隻有0.1，是以可以了解為繼承的權值最低。
層疊
我們來思考一個問題：如果在html檔案中對于同一個元素可以有多個CSS樣式存在并且這多個CSS樣式具有相同權重值怎麼辦？好，這一小節中的層疊幫你解決這個問題。
層疊就是在html檔案中對于同一個元素可以有多個CSS樣式存在，當有相同權重的樣式存在時，會根據這些CSS樣式的前後順序來決定，處于最後面的CSS樣式會被應用。
如下面代碼:
p{color:red;}
p{color:green;}
<p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p>
最後 p 中的文本會設定為green，這個層疊很好了解，了解為後面的樣式會覆寫前面的樣式。
是以前面的CSS樣式優先級就不難了解了：
内聯樣式表（标簽内部）> 嵌入樣式表（目前檔案中）> 外部樣式表（外部檔案中）。
重要性
我們在做網頁代碼的時，有些特殊的情況需要為某些樣式設定具有最高權值，怎麼辦？這時候我們可以使用**
!important
**來解決。
如下代碼：
p{color:red!important;}
p{color:green;}
<p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p>
這時 p 段落中的文本會顯示的red紅色。
注意：
!important
要寫在分号的前面！！！
這裡注意當網頁制作者不設定CSS樣式時，浏覽器會按照自己的一套樣式來顯示網頁。并且使用者也可以在浏覽器中設定自己習慣的樣式，比如有的使用者習慣把字号設定為大一些，使其檢視網頁的文本更加清楚。這時注意樣式優先級為：浏覽器預設的樣式 < 網頁制作者樣式 < 使用者自己設定的樣式，但記住
!important
優先級樣式是個例外，權值高于使用者自己設定的樣式。