學習要點：
1.使用 CSS
2.三種方式
3.層疊和繼承
主講教師：李炎恢
本章主要探討 HTML5 中 CSS（層疊樣式表），它是用來對 HTML 文件外觀的表現形式進行排版和格式化。
一．使用 CSS
CSS 樣式由一條或多條以分號隔開的樣式宣告組成。每條宣告的樣式包含著一個 CSS 屬性和屬性值。
<p style="color:red;font-size:50px;">這是一段文字</p>
解釋：style 是行內樣式屬性。color 是顏色屬性，red 是顏色屬性值；font-size是字型大小屬性，50px 是字型大小屬性值。
二．三種方式
建立 CSS 樣式表有三種方式：1.元素內嵌樣式；2.文件內嵌樣式；3.外部引入樣式。
1.元素內嵌樣式
<p style="color:red;font-size:50px;">這是一段文字</p>
解釋：即在當前元素使用 style 屬性的宣告方式。
2.文件內嵌樣式
<style type="text/css">
p { color: blue; font-size: 40px; } </style> <p>這是一段文字</p>
解釋：在<head>元素之間建立<style>元素，通過選擇器的方式呼叫指定的元素並設定相關 CSS。
3.外部引用樣式
<link rel="stylesheet" type="text/css" href="style.css">
//style.css
@charset "utf-8"; p { color: green; font-size: 30px; }
解釋：很多時候，大量的 HTML 頁面使用了同一個組 CSS。那麼就可以將這些 CSS 樣式儲存在一個單獨的.css 檔案中，然後通過<link>元素去引入它即可。@charset "utf-8" 表明設定 CSS 的字元編碼，如果不寫預設就是 utf-8。如果有多個.css 檔案，可以使用 @import 匯入方式引入.css 檔案。只不過，效能不如多個<link>連結。
三．層疊和繼承
所謂的樣式表層疊：指的是同一個元素通過不同方式設定樣式表產生的樣式重疊。樣式表繼承：指的是某一個被巢狀的元素得到它父元素樣式。還有一種樣式叫瀏覽器樣式，是這個元素在這個瀏覽器執行時預設附加的樣式。
1.瀏覽器樣式
<b>這個元素隱含加粗樣式</b> <span style="font-weight:bold;">這個元素通過 style 加粗</span>
解釋：<b>元素就是具有加粗的隱含樣式，而<span>元素沒有任何隱含樣式，通過 style 屬性設定樣式。
2.樣式表層疊
樣式表層疊通過五種方式進行，如果樣式相同，那麼比如會產生衝突替換。這時，它的優先順序順序就顯的比較重要。以下優先順序從低到高：
(1).瀏覽器樣式（元素自身攜帶的樣式）；
(2).外部引入樣式（使用<link>引入的樣式）；
(3).文件內嵌樣式（使用<style>元素設定）；
(4).元素內嵌樣式（使用 style 屬性設定）。
//元素內嵌
<p style="color:red;font-size:30px;">我將被三種方式疊加樣式</p>
//文件內嵌
<style type="text/css">
p { color:blue; font-weight: bold; } </style>
//外部引入
@charset "utf-8"; p { color: green; font-style: italic; }
如果某一個樣式被優先順序高的給替換掉了，卻又想執行這個樣式方案，可以將這個方案標記成重要樣式（important）。
//強行設定最高優先順序
color: green !important;
3.樣式繼承
如果某一個元素並沒有設定父元素相關的樣式，那麼就會使用繼承機制將父元素的樣式整合下來。
//<b>元素繼承了<p>元素的樣式
<p style="color:red;">這是<b>HTML5</b></p>
樣式繼承只適用於元素的外觀（文字、顏色、字型等），而元素在頁面上的佈局樣式則不會被繼承。如果繼承這種樣式，就必須使用強制繼承：inherit。
//強制繼承佈局樣式
<p>這是<b>HTML5</b></p> <style type="text/css">
p { border: 1px solid red; } b { border : inherit; } </style>