一、CSS簡介
1.Cascading Style Sheet 級聯樣式表
2.表現HTML或XHTML檔案樣式的計算機語言
->包括對字型、顔色、邊距、高度、寬度、背景圖檔、網頁定位等設定
二、CSS優勢
1.内容與表現分離
2.網頁的表現統一，容易修改
3.豐富的樣式，使得頁面布局更加靈活
4.減少網頁的代碼量，增加網頁的浏覽速度，節省網絡帶寬
5.運用獨立于頁面的CSS，有利于網頁被搜尋引擎收錄
三、CSS的基本文法
1.
選擇器 { 聲明1;
聲明2;
…… }
h1 {
font-size:12px;
color:#F00;
}
注：h1是選擇器；font-size是屬性；12px是值；｛font-size:12px; 和color:#F00;}都是聲明；
CSS的最後一條聲明後的“;”可寫可不寫，但是，基于W3C标準規範考慮，建議最後一條聲明的結束“;” 都要寫上；
2.style标簽
<style type="text/css">
h1 {
font-size:12px;
color:#F00;
}
</style>
四、HTML中引入CSS樣式
1.行内樣式
使用style屬性引入CSS樣式1
<h1 style="color:red;">style屬性的應用</h1>
<p style="font-size:14px; color:green;">直接在HTML标簽中設定的樣式</p>
2.内部樣式
CSS代碼寫在<head>的<style>标簽中
<style>
h1{color: green; }
</style>
a.優點:友善在同頁面中修改樣式
b.缺點:不利于在多頁面間共享複用代碼及維護，對内容與樣式的分離也不夠徹底
3.外部樣式
a.CSS代碼儲存在擴充名為.css的樣式表中
b.HTML檔案引用擴充名為.css的樣式表，有兩種方式
b.1連結式
連結外部樣式表
<head>
……
<link href="style.css" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css" />
……
</head>
b2.導入式
導入外部樣式表
<head>
……
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>
連結式與導入式的差別：
1.<link/>标簽屬于XHTML，@import是屬于CSS2.1
2.使用<link/>連結的CSS檔案先加載到網頁當中，再進行編譯顯示
3.使用@import導入的CSS檔案，用戶端顯示HTML結構，再把CSS檔案加載到網頁當中
4.@import是屬于CSS2.1特有的，對不相容CSS2.1的浏覽器是無效的
4.CSS樣式優先級
a.行内樣式>内部樣式表>外部樣式表
b.就近原則
五、CSS3基本選擇器
1.标簽選擇器
2.類選擇器：标簽作為标簽選擇器的名稱
3.ID選擇器：<h1>…<h6>、<p>、<img/>
4.注：
a.标簽選擇器直接應用于HTML标簽
b.類選擇器可在頁面中多次使用
c.ID選擇器在同一個頁面中隻能使用一次
d.基本選擇器的優先級:ID選擇器>類選擇器>标簽選擇器
六、CSS的進階選擇器
1.層次選擇器
| 選擇器 | 類 型 | 功能描述 |
| E F | 後代選擇器 | 選擇比對的F元素，且比對的F元素被包含在比對的E元素内 |
| E>F | 子選擇器 | 選擇比對的F元素，且比對的F元素是比對的E元素的子元素 |
| E+F | 相鄰兄弟選擇器 | 選擇比對的F元素，且比對的F元素緊位于比對的E元素後面 |
| E~F | 通用兄弟選擇器 | 選擇比對的F元素，且位于比對的E元素後的所有比對的F元素 |
a.後代選擇器
body p{ background: red; }
b.子選擇器
body>p{ background: pink; }
c.相鄰兄弟選擇器
.active+p { background: green; }
d.通用兄弟選擇器
.active~p{ background: yellow; }
2.結構僞類選擇器
<html>
<head >
<meta charset="UTF-8">
<title>使用CSS3結構僞類選擇器</title>
</head>
<body>
<p>p1</p><p>p2</p><p>p3</p>
<ul>
<li>li1</li><li>li2</li><li>li3</li>
</ul>
</body>
</html>
| 選擇器 | 功能描述 |
| E:first-child | 作為父元素的第一個子元素的元素E |
| E:last-child | 作為父元素的最後一個子元素的元素E |
| E F:nth-child(n) | 選擇父級元素E的第n個子元素F，（n可以是1、2、3），關鍵字為even、odd |
| E:first-of-type | 選擇父元素内具有指定類型的第一個E元素 |
| E:last-of-type | 選擇父元素内具有指定類型的最後一個E元素 |
| E F:nth-of-type(n) | 選擇父元素内具有指定類型的第n個F元素 |
ul li:first-child{ background: red;}
ul li:last-child{ background: green;}
p:nth-child(1){ background: yellow;}
p:nth-of-type(2){ background: blue;}
注：
1.使用E F:nth-child(n)和E F:nth-of-type(n)的 關鍵點
2.E F:nth-child(n)在父級裡從一個元素開始查找，不分類型
3.E F:nth-of-type(n)在父級裡先看類型，再看位置
3.屬性選擇器
| 屬性選擇器 | 功能描述 |
| E[attr] | 選擇比對具有屬性attr的E元素 |
| E[attr=val] | 選擇比對具有屬性attr的E元素,并且屬性值為val（其中val區分大小寫） |
| E[attr^=val] | 選擇比對元素E，且E元素定義了屬性attr，其屬性值是以val開頭的任意字元串 |
| E[attr$=val] | 選擇比對元素E，且E元素定義了屬性attr，其屬性值是以val結尾的任意字元串 |
| E[attr*=val] | 選擇比對元素E，且E元素定義了屬性attr，其屬性值包含了“val”，換句話說，字元串val與屬性值中的任意位置相比對 |
a.E[attr]屬性選擇器
a[id] { background: yellow; }
b.E[attr=val]屬性選擇器
c. E[attr=val]屬性選擇器：E[attr=val]屬性選擇器中，屬性和屬性值必須完全比對才能被選中
a[id=first] { background: red; }
d.E[attr*=val]屬性選擇器
a[class*=links] { background: red; }
e.E[attr^=val]屬性選擇器
a[href^=http] { background: red; }
f.E[attr$=val]屬性選擇器
a[href$=png] { background: red; }
七、總結