學習要點： 1.使用 CSS 2.三種方式 3.層疊和繼承 主講教師：李炎恢 本章主要探討 HTML5 中 CSS（層疊樣式表），它是用來對 HTML 文檔外觀的表現形式進行排版和格式化。 一．使用 CSS CSS 樣式由一條或多條以分號隔開的樣式聲明組成。每條聲明的樣式包含著一個 CSS 屬性和屬 ...
學習要點：
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>
