前端工程師知識站:CSS套入HTML中的四種方法

前端工程師知識站今天要來和大家介紹CSS套入HTML中的四種方法!! 還沒學會的你快往下看吧!!

在這篇中提到：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> 內就已經宣告的。再下來分別是匯入套用和外部連接套用的樣式表。若有多個樣式表被匯入或被連接，越後被匯入或越後被連接的，優先權就越高。優先權由最高到最低的順序如下：