CSS概述
CSS和HTML結合的三種方式：行內樣式表、內嵌樣式表、外部樣式表
CSS四種基本選擇器：標籤選擇器、類選擇器、ID選擇器、通用選擇器
CSS幾種擴展選擇器：後代選擇器、交集選擇器、併集選擇器、偽類選擇器
CSS樣式優先級
前言現在的網際網路前端分三層：
CSS 概述CSS：Cascading Style Sheet，層疊樣式表。CSS的作用就是給HTML頁面標籤添加各種樣式，定義網頁的顯示效果。簡單一句話：CSS將網頁內容和顯示樣式進行分離，提高了顯示功能。
css的最新版本是css3，我們目前學習的是css2.1。因為css3和css2.1不矛盾，必須先學2.1然後學3。
接下來我們要講一下為什麼要使用CSS。
HTML的缺陷：
不能夠適應多種設備
要求瀏覽器必須智能化足夠龐大
數據和顯示沒有分開
功能不夠強大
CSS 優點：
使數據和顯示分開
降低網絡流量
使整個網站視覺效果一致
使開發效率提高了（耦合性降低，一個人負責寫html，一個人負責寫css）
比如說，有一個樣式需要在一百個頁面上顯示，如果是html來實現，那要寫一百遍，現在有了css，只要寫一遍。現在，html只提供數據和一些控制項，完全交給css提供各種各樣的樣式。
CSS的重點知識點盒子模型、浮動、定位
CSS 整體感知我們先來看一段簡單的css代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color:red;
font-size: 30px;
text-decoration: underline;
font-weight: bold;
text-align: center;
font-style: italic;
}
h1{
color:blue;
font-size: 50px;
font-weight: bold;
background-color: pink;
}
</style>
</head>
<body>
<h1>我是大標題</h1>
<p>
我是內容
</p>
</body>
</html>
解釋如下：
我們寫css的地方是style標籤，就是「樣式」的意思，寫在head裡面。後面的課程中我們將知道，css也可以寫在單獨的文件裡面，現在我們先寫在style標籤裡面。
如果在sublime中輸入<st或者<style然後按tab鍵，可以自動生成的格式如下：（建議）
<style type="text/css"></style>
type表示「類型」，text就是「純文本」，css也是純文本。
但是，如果在sublime中輸入st或者style然後按tab鍵，可以自動生成的格式如下：（不建議）
<style></style>
css對換行不敏感，對空格也不敏感。但是一定要有標準的語法。冒號，分號都不能省略。
CSS語法語法格式：（其實就是鍵值對）
選擇器{
屬性名: 屬性值;
屬性名: 屬性值;
}
或者可以寫成：
選擇器{
k:v;
k:v;
k:v;
k:v;
}
選擇器{
k:v;
k:v;
k:v;
k:v;
}
解釋：
選擇器代表頁面上的某類元素，選擇器後一定是大括號。
屬性名後必須用冒號隔開，屬性值後用分號（最後一個屬性可以不用分號）。
屬性名和冒號之間最好不要有空格（經驗）。
如果一個屬性有多個值的話，那麼多個值用 空格 隔開
舉例：
p{color: red;}
完整版代碼舉例：
<style type="text/css">
p{
font-weight: bold;
font-style: italic;
color: red;
}
</style>
<body>
<p>洗白白</p>
<p>你懂得</p>
<p>我不會就這樣輕易的狗帶</p>
</body>
效果：
css代碼的注釋格式：
<style type="text/css">
/*
具體的注釋
*/
p{
font-weight: bold;
font-style: italic;
color: red;
}
</style>
注意：只有/* */這種注釋，沒有//這種注釋。而且注釋要寫在<style>標籤裡面才算生效哦。
接下來，我們要開始真正地講css的知識咯。
css怎麼學？CSS有兩個知識部分：
1） 選擇器，怎麼選；
2） 屬性，樣式是什麼
我們先來接觸CSS的一些簡單常見的屬性，因為接下來需要用到。後期會專門用一篇文章來寫CSS的屬性。
以下屬性值中，括號中的內容表示sublime中的快捷鍵。
字體顏色：（c）
color:red;
color屬性的值，可以是英語單詞，比如red、blue、yellow等等；也可以是rgb、十六進位(後期詳細講)。
字號大小：（fos）
font-size:40px;
font就是「字體」，size就是「尺寸」。px是「像素」。單位必須加，不加不行。
背景顏色：（bgc）
background-color: blue;
background就是「背景」。
加粗：（fwb）
font-weight: bold;
font是「字體」 weight是「重量」的意思，bold粗。
不加粗：（fwn）
font-weight: normal;
normal就是正常的意思。
斜體：（fsi）
font-style: italic;
italic就是「斜體」。
不斜體：（fsn）
font-style: normal;
下劃線：（tdu）
text-decoration: underline;
decoration就是「裝飾」的意思。
沒有下劃線：（tdn）
text-decoration:none;
PS：css沒啥難的，就是要把屬性給記憶準確。
CSS和HTML結合的方式（樣式表）CSS和HTML結合的方式，其實就是問你css的代碼放在哪裡比較合適。CSS代碼理論上的位置是任意的，但通常寫在<style>標籤裡。只要是<style>標籤裡的代碼，那就是css代碼，瀏覽器就是這樣來進行解析的。
CSS和HTML的結合方式有3種：
行內樣式：在某個特定的標籤裡採用style屬性。範圍只針對此標籤。
內嵌樣式表：在頁面的head裡採用<style>標籤。範圍針對此頁面。
引入外部樣式表css文件的方式。這種方式又分為兩種：
兩種引入樣式方式的區別：外部樣式表中不能寫標籤,但是可以寫import語句。
下面來詳細的講一講這三種方式。
1、CSS和HTML結合方式一：行內樣式採用style屬性。範圍只針對此標籤適用。
該方式比較靈活，但是對於多個相同標籤的同一樣式定義比較麻煩，適合局部修改。
舉例：
<p style="color:white;background-color:red">我不會就這樣輕易的狗帶</p>
效果：
2、CSS和HTML結合方式二：內嵌樣式表在head標籤中加入<style>標籤，對多個標籤進行統一修改，範圍針對此頁面。
該方式可以對單個頁面的樣式進行統一設置，但對於局部不夠靈活。
舉例：
<style type="text/css">
p{
font-weight: bold;
font-style: italic;
color: red;
}
</style>
<body>
<p>洗白白</p>
<p style="color:blue">你懂得</p>
</body>
引入樣式表文件的方式又分為兩種：
兩種引入樣式方式的區別：外部樣式表中不能寫標籤，但是可以寫import語句。
具體操作如下：
我們先在html頁面的同級目錄下新建一個a.css文件，那說明這裡面的代碼全是css代碼，此時就沒有必要再寫<style>標籤這幾個字了。
a.css的代碼如下：
p{
border: 1px solid red;
font-size: 40px;
}
上方的css代碼中，注意像素要帶上px這個單位，不然不生效。
link標籤的rel屬性
<link>標籤的rel屬性：
其屬性值有以下兩種：
看字面意思可能比較難理解，我們來舉個例子，一下子就明白了。
舉例：
現在定義我們來定義3種樣式表：
a.css：定義一個實線的黑色邊框
div{
width: 200px;
height: 200px;
border: 3px solid black;
}
ba.css：藍色的虛線邊框
div{
width: 200px;
height: 200px;
border: 3px dotted blue;
}
c.css：來個背景圖片
div{
width: 200px;
height: 200px;
border: 3px solid red;
background-image: url("1.jpg");
}
然後我們在html文件中引用三個樣式表：
<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
<link rel = "alternate stylesheet" type = "text/css" href = "b.css" title="第二種樣式"></link>
<link rel = "alternate stylesheet" type = "text/css" href = "c.css" title="第三種樣式"></link>
上面引入的三個樣式表中，後面兩個樣式表作為備選。注意備選的樣式表中，title屬性不要忘記寫，不然顯示不出來效果的。
CSS的四種基本選擇器CSS選擇器：就是指定CSS要作用的標籤，那個標籤的名稱就是選擇器。意為：選擇哪個容器。
CSS的選擇器分為兩大類：基本選擇題和擴展選擇器。
基本選擇器：
下面來分別講一講。
1、標籤選擇器：選擇器的名字代表html頁面上的標籤標籤選擇器，選擇的是頁面上所有這種類型的標籤，所以經常描述「共性」，無法描述某一個元素的「個性」。
舉例：
p{
font-size:14px;
}
上方選擇器的意思是說：所有的<p>標籤裡的內容都將顯示14號字體。
再比如說，我想讓「生命壹號學完了安卓，繼續學前端喲」這句話中的「前端」兩個變為紅色字體，那麼我可以用<span>標籤把「前端」這兩個字圍起來，然後給<span>標籤加一個標籤選擇器。
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
color: red;
}
</style>
</head>
<body>
<p>生命壹號學完了安卓，繼續學<span>前端</span>喲</p>
</body>
</html>
【總結】需要注意的是：
（1）所有的標籤，都可以是選擇器。比如ul、li、label、dt、dl、input。
（2）無論這個標籤藏的多深，一定能夠被選擇上。
（3）選擇的所有，而不是一個。
2、ID選擇器：規定用#來定義針對某一個特定的標籤來使用，只能使用一次。css中的ID選擇器以」#」來定義。
舉例：
#mytitle{
border:3px dashed green;
}
效果：
id選擇器的選擇符是「#」。
任何的HTML標籤都可以有id屬性。表示這個標籤的名字。這個標籤的名字，可以任取，但是：
另外，特別強調的是：HTML頁面，不能出現相同的id，哪怕他們不是一個類型。比如頁面上有一個id為pp的p，一個id為pp的div，是非法的！
一個標籤可以被多個css選擇器選擇：
比如，我們可以同時讓標籤選擇器和id選擇器作用於同一個標籤。如下：
然後我們通過網頁的審查元素看一下效果：
現在，假設選擇器衝突了，比如id選擇器說這個文字是紅色的，標籤選擇器說這個文字是綠色的。那麼聽誰的？
實際上，css有著非常嚴格的計算公式，能夠處理衝突.
一個標籤可以被多個css選擇器選擇，共同作用，這就是「層疊式」的第一層含義（第一層含義和第二層含義，放到css基礎的第三篇文章裡講）。
3、類選擇器：規定用圓點.來定義、針對你想要的所有標籤使用。優點：靈活。
css中用.來表示類。舉例如下：
.one{
width:800px;
}
效果：
和id非常相似，任何的標籤都可以攜帶id屬性和class屬性。class屬性的特點：
<h3 class="teshu zhongyao">我是一個h3啊</h3>
初學者常見的錯誤，就是寫成了兩個class。舉例如下：（錯誤）
<h3 class="teshu" class="zhongyao">我是一個h3啊</h3>
類選擇器使用的舉例：
類選擇器的使用，能夠決定一個人的css水平。
比如，我們現在要做下面這樣一個頁面：
正確的思路，就是用所謂「公共類」的思路，就是我們類就是提供「公共服務」，比如有綠、大、線，一旦攜帶這個類名，就有相應的樣式變化。對應css裡的代碼如下：
<style type="text/css">
.lv{
color: green;
}
.da{
font-size: 30px;
}
.underline{
text-decoration: underline;
}
</style>
然後讓每個標籤去選取自己想要用的類選擇器：
<p class="lv da">段落1</p>
<p class="lv xian">段落2</p>
<p class="da xian">段落3</p>
也就是說：
（1）不要去試圖用一個類名，把某個標籤的所有樣式寫完。這個標籤要多攜帶幾個類，共同完成這個標籤的樣式。
（2）每一個類要儘可能小，有「公共」的概念，能夠讓更多的標籤使用。
問題：到底用id還是用class？
答案：儘可能的用class，除非極特殊的情況可以用id。
原因：id是js用的。也就是說，js要通過id屬性得到標籤，所以css層面儘量不用id，要不然js就很彆扭。另一層面，我們會認為一個有id的元素，有動態效果。
舉例如下：
上圖所示，css和js都在用同一個id，會出現不好溝通的情況。
我們記住這句話：類上樣式，id上行為。意思是說，class屬性交給css使用，id屬性交給js使用。
上面這三種選擇器的區別：
4、通配符*：匹配任何標籤通用選擇器，將匹配任何標籤。不建議使用，IE有些版本不支持，大網站增加客戶端負擔。
效率不高，如果頁面上的標籤越多，效率越低，所以頁面上不能出現這個選擇器。
舉例：
*{
margin-left:0px;
margin-top:0px;
}
高級選擇器：
後代選擇器：用空格隔開
交集選擇器：用.隔開
併集選擇器（分組選擇器）：用逗號隔開
偽類選擇器
下面詳細講一下這幾種高級（擴展）選擇器。
1、後代選擇器: 定義的時候用空格隔開對於E F這種格式，表示所有屬於E元素後代的F元素，有這個樣式。空格就表示後代。
後代選擇器，就是一種平衡：共性、特性的平衡。當要把某一個部分的所有的什麼，進行樣式改變，就要想到後代選擇器。
後代選擇器，描述的是祖先結構。
看定義可能有點難理解，我們來看例子吧。
舉例1：
<style type="text/css">
.div1 p{
color:red;
}
</style>
空格就表示後代。.div1 p 表示.div1的後代所有的p。
這裡強調一下：這兩個標籤不一定是連續緊挨著的，只要保持一個後代的關聯即可。也就是說，選擇的是後代，不一定是兒子。
舉例：
<style type="text/css">
h3 b i{
color:red ;
}
</style>
上方代碼的意思是說：定義了<h3>標籤中的<b>標籤中的<i>標籤的樣式。
同理：h3和b和i標籤不一定是連續緊挨著的，只要保持一個後代的關聯即可。
來看下面這張圖就明白了：
h3.special{
color:red;
}
選擇的元素要求同時滿足兩個條件：必須是h3標籤，然後必須是special標籤。
舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>交集選擇器測試</title>
<style type="text/css">
h3.special {
color: red;
}
</style>
</head>
<body>
<h3 class="special zhongyao">標題1</h3>
<h3 class="special">我也是標題</h3>
<p>我是段落</p>
</body>
</html>
效果如下：
注意，交集選擇器沒有空格。所以，沒有空格的div.red（交集選擇器）和有空格的div .red（後代選擇器）不是一個意思。
交集選擇器可以連續交：（一般不要這麼寫）
h3.special.zhongyao{
color:red;
}
上面這種寫法，是 IE7 開始兼容的，IE6 不兼容。
交集選擇器，我們一般都是以標籤名開頭，比如div.haha 比如p.special。
3、併集選擇器：定義的時候用逗號隔開三種基本選擇器都可以放進來。
舉例：
p,h1,#mytitle,.one{
color:red;
}
對於<a>標籤，其對應幾種不同的狀態：
CSS允許對於元素的不同狀態，定義不同的樣式信息。偽類選擇器又分為兩種：
靜態偽類：只能用於超連結
動態偽類：針對所有標籤都適用
下面來分別講一下這兩種偽類選擇器。
（1）靜態偽類：
用於以下兩個狀態：
link：超連結點擊之前
visited：超連結點擊之後
注意：上面這兩個狀態只能使用於超連結。
舉例：
<style type="text/css">
/*
偽類選擇器：靜態偽類
*/
/*
讓超連結點擊之前是紅色
*/
a:link{
color:red;
}
/*
讓超連結點擊之後是綠色
*/
a:visited{
color:green;
}
</style>
上圖中，超連結點擊之前是紅色，點擊之後是綠色。
問：既然a{}定義了超鏈的屬性，和a:link{}都定義了超鏈點擊之前的屬性，那這兩個有啥區別呢？
答：
a{}和a:link{}的區別：
**（2）動態偽類: **
用於以下幾種狀態：
注意：上面這三種狀態針適用於所有的標籤。
舉例：
<style type="text/css">
/*
偽類選擇器：動態偽類
*/
/*
讓文本框獲取焦點時：
邊框：#FF6F3D這種橙色
文字：綠色
背景色：#6a6a6a這種灰色
*/
input:focus{
border:3px solid #FF6F3D;
color:white;
background-color:#6a6a6a;
}
/*
滑鼠放在標籤上時顯示藍色
*/
label:hover{
color:blue;
}
/*
點擊標籤滑鼠沒有鬆開時顯示紅色
*/
label:active{
color:red;
}
</style>
利用這個hover屬性，我們同樣對表格做一個樣式的設置：
表格舉例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
/*整個表格的樣式*/
table{
width: 300px;
height: 200px;
border: 1px solid blue;
/*border-collapse屬性：對表格的線進行摺疊*/
border-collapse: collapse;
}
/*滑鼠懸停時，讓當前行顯示#868686這種灰色*/
table tr:hover{
background: #868686;
}
/*每個單元格的樣式*/
table td{
border:1px solid red;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
效果：
一些 CSS3 選擇器1.兒子選擇器，用符號>表示IE7開始兼容，IE6不兼容。
div>p{
color:red;
}
div的兒子p。和div的後代p的截然不同。
能夠選擇：
<div>
<p>我是div的兒子</p>
</div>
不能選擇：
<div>
<ul>
<li>
<p>我是div的重孫子</p>
</li>
</ul>
</div>
IE8開始兼容；IE6、7都不兼容
設置無序列表<ul>中的第一個<li>為紅色：
<style type="text/css">
ul li:first-child{
color:red;
}
</style>
設置無序列表<ul>中的最後一個<li>為紅色：
ul li:last-child{
color:blue;
}
序選擇器還有更複雜的用法，以後再講。
由於瀏覽器的更新需要過程，所以現在如果公司還要求兼容IE6、7，那麼就要自己寫類名：
<ul>
<li class="first">項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li class="last">項目</li>
</ul>
用類選擇器來選擇第一個或者最後一個：
ul li.first{
color:red;
}
ul li.last{
color:blue;
}
IE7開始兼容，IE6不兼容。
+表示選擇下一個兄弟
<style type="text/css">
h3+p{
color:red;
}
</style>
上方的選擇器意思是：選擇的是h3元素後面緊挨著的第一個兄弟。
<h3>我是一個標題</h3>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<h3>我是一個標題</h3>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<h3>我是一個標題</h3>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<h3>我是一個標題</h3>
效果如下：