前端工程師是如何將CSS樣式表套用至HTML呢?
CSS語法 HTML5

前端工程師怎麼用CSS 替 HTML”化妝”?

2019-03-11

前端工程師是如何將CSS樣式表套用至HTML呢?

前端工程師是如何將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> 內就已經宣告的。再下來分別是匯入套用外部連接套用的樣式表。若有多個樣式表被匯入或被連接,越後被匯入或越後被連接的,優先權就越高。優先權由最高到最低的順序如下:

推薦閱讀:

成為前端工程師第一步:學習CSS!

Class和ID的差別在哪裡?想成為前端工程師的你,懂了嗎?

想當前端工程師?你不可不知的Class選擇器宣告法

唰!Python人工智慧最新偵測貨架機器出爐囉!

對Python課程強奪先機,領先全世界

拯救生命的福星又多一個-人工智慧新一創舉

靠著這裡的HTML5教學,讓零基礎的人都如願變成高薪工程師

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料