本文根據慕課網視頻整理：http://www.imooc.com/code/609
定義
CSS全稱爲“層疊樣式表 (Cascading Style Sheets)”，它主要是用於定義HTML內容在瀏覽器內的顯示樣式，如文字大小、顏色、字體加粗等
語法
css 樣式由選擇符和聲明組成，而聲明又由屬性和值組成，如下圖所示：
選擇符：又稱選擇器，指明網頁中要應用樣式規則的元素，如本例中是網頁中所有的段（p）的文字將變成藍色，而其他的元素（如ol）不會受到影響。
聲明：在英文大括號“｛｝”中的的就是聲明，屬性和值之間用英文冒號“：”分隔。當有多條聲明時，中間可以英文分號“;”分隔，如下所示：
p{
font-size:12px;
color:red;
}三種寫法
內聯式
就是把css代碼直接寫在現有的HTML標籤中，如下面代碼：
<p style="color:red">這裏文字是紅色。</p>css樣式代碼要寫在style=”“雙引號中，如果有多條css樣式代碼設置可以寫在一起，中間用分號隔開。如下代碼：
<p style="color:red;font-size:12px">這裏文字是紅色。</p>嵌入式
就是直接把css代碼寫在該文件中，如下面的代碼：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css樣式</title>
<style type="text/css">/*下面所有引用<span>標籤的文字都會變爲藍色*/
span{
color:blue;
}
</style>
</head>
<body>
<p>慕課網，<span>超酷的互聯網</span>、IT技術免費學習平臺，創新的網絡一站式學習、實踐體驗；<span>服務及時貼心</span>，內容專業、<span>有趣易學</span>。專注服務互聯網工程師快速成爲技術高手！</p>
</body>
</html>外部式
外部式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. 標籤位置一般寫在標籤之內。
完整示例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css樣式</title>
<link href="style.css" rel="stylesheet" type="text/css" /><!--引用外部的css文件-->
</head>
<body>
<p>慕課網，<span>超酷的互聯網</span>、IT技術免費學習平臺，創新的網絡一站式學習、實踐體驗；<span>服務及時貼心</span>，內容專業、<span>有趣易學</span>。專注服務互聯網工程師快速成爲技術高手！</p>
</body>
</html>三種寫法的優先級：
對於同一個元素我們同時用了三種方法設置css樣式，優先級按照就近原則（離被設置元素越近優先級別越高）
但注意上面所總結的優先級是有一個前提：內聯式、嵌入式、外部式樣式表中css樣式是在的相同權值的情況下，關於權值的問題以後再討論