HTML 套用 CSS 樣式
如果說 HTML 負責建構網頁的骨架，CSS 就是負責處理網頁的外觀，這篇教學將會介紹 HTML 裡三種套用 CSS 的方法。
快速導覽：
所有範例可使用 JS Bin、CodePen 或 JSFiddle 進行線上實作，或使用筆記本編輯，不用安裝任何軟體 ( 參考：使用 HTML 編輯器 )
什麼是 CSS？
CSS 是 階層樣式表 ( Cascading Stylesheets ) 的縮寫，既非標準程式語言，也不是標記語言, 而是一種風格頁面語言，CSS 能在不同的 HTML 元素上頭，套用不同的樣式，例如顏色、字體、文字大小、間距、定位和佈局方式...等，只要是攸關網頁樣式的設定，幾乎都是透過 CSS 進行處理 ( 從 HTML5 開始，語法規範中也捨棄了許多單純透過 HTML 調整樣式的元件屬性 )。
CSS 教學參考：CSS 教學
套用 CSS 的三種方法
要在 HTML 套用 CSS，有下列三種方法：
- 行內撰寫 ( Inline )：直接在元素標籤的 style 屬性撰寫樣式。
- 內部撰寫 ( Internal )：在 HTML 裡的
<style></style>標籤裡撰寫樣式。- 外部載入 ( External )：透過 HTML 的
<link rel="styelsheet" href="style.css">標籤載入外部樣式檔案。
行內撰寫 ( Inline )
「行內撰寫 ( Inline )」方法表示「直接在元素標籤的 style 屬性裡撰寫 CSS 樣式語法」，例如下方的範例，網頁開啟後會出現三段不同顏色的文字。
<h2 style="color:#f00;">我是紅色！</h2>
<h2 style="color:#00f;">我是藍色！</h2>
<h2 style="color:#0a0;">我是綠色！</h2>
由於行內撰寫 ( Inline ) 方法的「權重」為第二高 ( 通常第一高是使用 !important )，使用後容易覆蓋掉內部與外部套用的 CSS 樣式，以下方的例子，例如下方的範例，雖然有使用 <style></style> 撰寫樣式，但因為權重較小，網頁仍然會出現三段不同顏色的文字。
<style>
h2{
color:#000;
}
</style>
<h2 style="color:#f00;">我是紅色！</h2>
<h2 style="color:#00f;">我是藍色！</h2>
<h2 style="color:#0a0;">我是綠色！</h2>
內部撰寫 ( Internal )
「內部撰寫 ( Internal )」方法表示「在 HTML 裡的 <style></style> 標籤裡撰寫樣式」( 通常會將 <style></style> 放在 <head></head> 裡 )，例如下方的範例，網頁開啟後會出現三段不同顏色的文字。
<style>
h2{
color:#f00;
}
h3{
color:#00f;
}
h4{
color:#0a0;
}
</style>
<h2>我是紅色！</h2>
<h3>我是藍色！</h3>
<h4>我是綠色！</h4>
使用 內部撰寫 ( Internal ) 或 外部載入 ( External ) 方法，通常都會搭配「CSS 選擇器」( 選擇 tag 名稱、class、id 或屬性 ) 一起使用，例如下方的範例，網頁開啟後會分別將樣式套用到不同的 class 裡，出現三段不同顏色的文字。
<style>
.rb{
color:#f00;
}
.bb{
color:#00f;
}
.gb{
color:#0a0;
}
</style>
<h2 class="rb">我是紅色！</h2>
<h2 class="bb">我是藍色！</h2>
<h2 class="gb">我是綠色！</h2>
外部載入 ( External )
「外部載入 ( External )」方法表示「透過 HTML 的 <link rel="styelsheet" href="style.css"> 標籤載入外部樣式檔案」( 通常會將 <link> 放在 <head></head> 裡 )，例如下方的範例，網頁開啟後會載入外部的 style.css 檔案，讓網頁出現三段不同顏色的文字。
外部 style.css 內容：
.rb{
color:#f00;
}
.bb{
color:#00f;
}
.gb{
color:#0a0;
}
HTML 內容：
<link rel="stylesheet" href="style.css">
<h2 class="rb">我是紅色！</h2>
<h2 class="bb">我是藍色！</h2>
<h2 class="gb">我是綠色！</h2>
小結
通常 HTML 和 CSS 有著密不可分的關係，就如同人體的骨架和外皮是同等重要，因此在熟悉 HTML 語法之後，下一步就會接續學習 CSS 樣式囉！
CSS 教學參考：CSS 教學
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～