CSS的發展歷程
從HTML被髮明開始，樣式就以各種形式存在。不同的瀏覽器結合它們各自的樣式語言爲用戶提供頁面效果的控制。最初的HTML只包含很少的顯示屬性。
隨着HTML的成長，爲了滿足頁面設計者的要求，HTML添加了很多顯示功能。但是隨着這些功能的增加，HTML變的越來越雜亂，而且HTML頁面也越來越臃腫。於是CSS便誕生了。
CSS 網頁的美容師
CSS的出現，拯救了混亂的HTML，當讓更加拯救了我們web開發者。 讓我們的網頁更加豐富多彩。
CSS的最大貢獻就是： 讓 HTML 從樣式中解脫苦海， 實現了 HTML 專注去做 結構呈現。 而樣式交給 CSS 後，你完全可以放心的洗洗睡了！
CSS初識
CSS(Cascading Style Sheets) 美化樣式
CSS通常稱爲CSS樣式表或層疊樣式表（級聯樣式表），主要用於設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的佈局等外觀顯示樣式。
CSS以HTML爲基礎，提供了豐富的功能，如字體、顏色、背景的控制及整體排版等，而且還可以針對不同的瀏覽器設置不同的樣式。
引入CSS樣式表（書寫位置）
內部樣式表
內嵌式是將CSS代碼集中寫在HTML文檔的head頭部標籤中，並且用style標籤定義，其基本語法格式如下：
<head>
<style type="text/CSS">
選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}
</style>
</head>
語法中，style標籤一般位於head標籤中title標籤之後，也可以把他放在HTML文檔的任何地方。
type=“text/CSS” 在html5中可以省略， 寫上也比較符合規範， 所以這個地方可以寫也可以省略。
行內式（內聯樣式）
內聯樣式，又有人稱行內樣式、行間樣式、內嵌樣式。是通過標籤的style屬性來設置元素的樣式，其基本語法格式如下：
<標籤名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標籤名>
語法中style是標籤的屬性，實際上任何HTML標籤都擁有style屬性，用來設置行內式。其中屬性和值的書寫規範與CSS樣式規則相同，行內式只對其所在的標籤及嵌套在其中的子標籤起作用。
外部樣式表（外鏈式）
鏈入式是將所有的樣式放在一個或多個以.CSS爲擴展名的外部樣式表文件中，通過link標籤將外部樣式表文件鏈接到HTML文檔中，其基本語法格式如下：
<head>
<link href="CSS文件的路徑" rel="stylesheet" />
</head>
複習： link 是個單標籤哦
該語法中，link標籤需要放在head頭部標籤中，並且必須指定link標籤的三個屬性，具體如下：
- href：定義所鏈接外部樣式表文件的URL，可以是相對路徑，也可以是絕對路徑。
- type：定義所鏈接文檔的類型，在這裏需要指定爲“text/CSS”，表示鏈接的外部文件爲CSS樣式表。
- rel：定義當前文檔與被鏈接文檔之間的關係，在這裏需要指定爲“stylesheet”，表示被鏈接的文檔是一個樣式表文件。
三種樣式表總結（位置）
| 樣式表 | 優點 | 缺點 | 使用情況 | 控制範圍 |
|---|---|---|---|---|
| 行內樣式表 | 書寫方便，權重高 | 沒有實現樣式和結構相分離 | 較少 | 控制一個標籤（少） |
| 內部樣式表 | 部分結構和樣式相分離 | 沒有徹底分離 | 較多 | 控制一個頁面（中） |
| 外部樣式表 | 完全實現結構和樣式相分離 | 需要引入 | 最多，強烈推薦 | 控制整個站點（多） |
CSS樣式規則
使用HTML時，需要遵從一定的規範。CSS亦如此，要想熟練地使用CSS對網頁進行修飾，首先需要了解CSS樣式規則，具體格式如下：
在上面的樣式規則中:
1.選擇器用於指定CSS樣式作用的HTML對象，花括號內是對該對象設置的具體樣式。
2.屬性和屬性值以“鍵值對”的形式出現。
3.屬性是對指定的對象設置的樣式屬性，例如字體大小、文本顏色等。
4.屬性和屬性值之間用英文“:”連接。
5.多個“鍵值對”之間用英文“;”進行區分。
可以用段落 和 表格的對齊的演示。
外鏈案例
內鏈案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h4 {
color: deeppink;
}
p {
color: #036;
}
h3 {
color: green;
}
div {
color: orange;
}
</style>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h3>憶江南(1)</h3>
<div>唐.白居易</div>
<p>江南好，風景舊曾諳。(2) 日出江花紅勝火，春來江水綠如藍，(3) 能不憶江南。</p>
<h4>作者介紹</h4>
<p>白居易(772－846) ，字樂天，太原(今屬山西)人。唐德宗朝進士，元和三年(808)拜左拾遺，後貶江州(今屬江西)司馬，移忠州(今屬四川)刺史，又爲蘇州(今屬江蘇)、同州(今屬陝西大荔)刺史。晚居洛陽，自號醉吟先生、香山居士。其詩政治傾向鮮明，重諷喻，尚坦易，爲中唐大家。也是早期詞人中的佼佼者，所作對後世影響甚大。</p>
<h4>註釋</h4>
<p>
(1)據《樂府雜錄》，此詞又名《謝秋娘》，系唐李德裕爲亡姬謝秋娘作。又名《望江南》、《夢江南》等。分單調、雙調兩體。單調二十七字，雙凋五十四字，皆平韻。(2)諳(音安)：熟悉。(3)藍：藍草，其葉可制青綠染料。
</p>
<h4>品評</h4>
<p>此詞寫江南春色，首句“江南好”，以一個既淺切又圓活的“好”字，攝盡江南春色的種種佳處，而作者的讚頌之意與嚮往之情也盡寓其中。同時，唯因“好”之已甚，方能“憶”之不休，因此，此句又已暗逗結句“能不憶江南”，並與之相關闔。次句“風景舊曾諳”，點明江南風景之“好”，並非得之傳聞，而是作者出牧杭州時的親身體驗與親身感受。這就既落實了“好”字，又照應了“憶”字，不失爲勾通一篇意脈的精彩筆墨。三、四兩句對江南之“好”進 行形象化的演繹，突出渲染江花、江水紅綠相映的明豔色彩，給人以光彩奪目的強烈印象。其中，既有同色間的相互烘托，又有異色間的相互映襯，充分顯示了作者善於著色的技巧。篇末，以“能不憶江南”收束全詞，既托出身在洛陽的作者對江南春色的無限讚歎與懷念，又造成一種悠遠而又深長的韻味，把讀者帶入餘情搖漾的境界中。</p>
</body>
</html>