前端工程師到底在幹嘛?今天這四種嵌入方法讓你更了解!
在這篇中提到：CSS 是替 HTML 「化妝」用的，為 HTML 起裝飾作用。因此 CSS 不能單獨使用！畢竟有了需要化妝的「客戶」－HTML，CSS 才能發揮其效用，這樣才有生意上門嘛！HTML 負責確定網頁中有哪些內容，而 CSS 確定以何種外觀 (大小、粗細、顏色、對齊和位置) 展現這些元素。那要如何串接 CSS 的樣式到 HTML 檔案上，才能讓 CSS 發揮它的效用呢?
前端工程師都知道的，四種套用 CSS 樣式到 HTML 檔案上的方式，列舉如下：
| 目錄 1. 概述 2. 將 CSS 套用入 HTML 文件中的四種方法 2-1. 行內套用 (Inline) 2-2. 嵌入套用 (Embed) 2-3. 外部連接 (External Link) 2-4. 外部匯入 (Import) 3. 優先順序 |
2-1. 行內套用 (Inline)
若只有少部分的地方需要改變樣式的話，我們可以在 HTML 檔案中對應的那一行內直接宣告 CSS 樣式。範例如下：
<p style='font-family:標楷體; font-size:14;'>
這是行內套用，樣式為標楷體，字體大小為 14。</p>
<p style='font-family:微軟正黑體; font-size:16;'>
這是行內套用，樣式為微軟正黑體，字體大小為 16。</p>
<p style='font-family:微軟正黑體; font-size:16; color:blue;'>
這是行內套用，樣式為微軟正黑體，字體小為 16。，顏色為藍色</p>
則結果如下所示(左邊為 HTML、右邊為顯示結果)：2-2. 嵌入套用 (Embed)
CSS 樣式可以嵌入於 HTML 文件中：通常是嵌入在 <head> 內，以 <style type="text/css"> 宣告 。如下圖所示：2-3. 外部連接 (External Link)
若網頁內容較多，則所套用的 CSS 樣式也會比較多，這時就可將所有的 CSS 碼另外集中在一個獨立的「.css」檔案中。並在 HTML 文件的 <head> 與 </head> 標籤中，輸入以下代碼來宣告：<link rel="stylesheet" type="text/css" href="外部CSS檔案.css">
如此一來，「外部CSS檔案.css」這個檔案中所宣告的 CSS 樣式，則會被加入 HTML 網頁中，如下面範例所示：註：左邊的格子顯示其 HTML 碼與 「外部CSS檔案.css」的 CSS 碼(須按左上方按鈕切換)；右方則為網頁顯示效果
在 HTML 中套用 CSS，最常見的就是這個方式。而這個方法的優點，就是多個網頁可以共用同一個 CSS！如此一來，不僅對前端工程師，對一般人來說，維護檔案就相對容易很多。
2-4. 外部匯入 (Import)
跟使用外部連接 (External Link)的作用一樣，@import 這個指令，可讓外部網頁上的 CSS 樣式表檔案被匯入進 HTML 文件中。語法如下所示：
<style type="type/css">
<!--
@import url(https://外部網頁上的CSS檔案網址)；
-->
</style>
如以下範例所示，左方的 HTML 碼在 <style> 與 </style> 間加入了 @import 指令與 CSS 樣式表的網址：
既然套用外部 CSS 樣式表的方法已經有「2-3. 外部連接 (<link href="外部css檔案的路徑">的方法)」，那為何還多出一個「@import 指令」? 其時 @import 指令最初的用意，是為了能針對不同的瀏覽器 (如 IE、火狐...或是 Apple 的 Safari 等) 而運用不同的樣式。不過現在已經沒有這個必要。
那麽，以上 4 種套用方法，HTML 套用 CSS 樣式表的優先順位又是如何呢？
優先順序
若一個 HTML 文件中，相同屬性卻包含多個 CSS 樣式表時，應該要套用哪一個呢？ 基本原則是，越接近 HTML 本身的樣式，優先權越高。因此，「行內套用」的 CSS 樣式表，通常會有第一名的優先權，因為它最接近 HTML 的元素。而排名第二的是「嵌入套用」的樣式表 - 因為這一類的樣式表是在 HTML 的 <head> 內就已經宣告的。再下來分別是匯入套用和外部連接套用的樣式表。若有多個樣式表被匯入或被連接，越後被匯入或越後被連接的，優先權就越高。優先權由最高到最低的順序如下：- 行內套用的樣式表 (Inline stylesheet)
- 嵌入套用的樣式表 (Embedded stylesheet)
- 匯入套用的樣式表 (Imported stylesheet)
- 外部連接套用的樣式表 (Linked stylesheet)
- 瀏覽器本身的樣式表 (Browser's own stylesheet)
延伸閱讀：
受不了電子書這麼沒有翻書的感覺!但HTML5教學救了我!
HTML5教學的CSS基礎請打好!-字型排序一次滿足
HTML5教學的CSS基礎請打好!-區塊邊框一次掌握
看過來!網頁設計課程教你如何用CSS讓你的網站加分!
不要再跟人家一起共用帳號,訓練過後的Python課程都會知道喔!
2018登上百度品牌數字資產榜:''達內教育''最有價值IT教育品牌
達內教育開幕 培養台灣IT人才進入全球企業
