CSS樣式表

【CSS指南】Day04 – CSS中樣式表有哪幾種你知道嗎? (詳細探討)

CSS 的三種樣式表分別是什麼?

CSS的三種樣式表分別是什麼

經過在前面的學習我們可以初步認識到 CSS 是什麼還有 CSS 的 Text ( 文本 ) 控制、font ( 字體 ) 的改變,我相信你一定很熟練了,也知道什麼樣的場景適合什麼樣的改變並會寫一些簡單的 CSS 了,那現在要回過頭來想想,CSS 是不是都寫在 <style> 標籤裡面呢? 這邊我跟你說並不是的,一般我們會有三種寫法用法方式。

第一種用法就是之前我寫的文章中最常用到的用法,也就是寫在 <style> 標籤裡頭,這樣也符合HTML 與 CSS 相分離 ( 部分 ) 的應用,第二種方法是直接寫在例如 <p> 段落標籤我們想調整 <p style=”font-size: 16px;”> 段落字體大小,第三種方法就是直接開一個空的文件直接寫 CSS 在裡頭,在 HTML 中透過引入的方式把 CSS 代碼引入進來。

  • 第一種方法: 寫在 <style> 標籤裡頭
  • 第二種方法: 直接寫在對應的標籤裡
  • 第三種方法: 另創一個 CSS 文件,透過引入的方式帶入 HTML 中

OK! 你可能會想這三種方式應該會有自己名稱吧! 是的沒錯不然我們在溝通上還要先解釋一大堆給你聽才知道原來是你說的是,要使用這種方式來寫入 CSS 呀! 所以當然他們都有個別名稱在團隊上溝通上也更加有效率,在前期或是新手時期先別急先知道有這三種方法就好,到後面小青我才會開始,從每個小節好好介紹它們的特色和應用場景,以及個別的優缺點和使用時機。

  • 第一種方法: 行內樣式表 ( 行內式 )
  • 第二種方法: 內部樣式表 ( 嵌入式 )
  • 第三種方法: 外部樣式表 ( 鏈接式 )

以上就是因為 CSS 書寫的位置不同地方或是引入的方式不同,會給予不同對應的名稱唷!

點我瞭解 小青如何每月多賺5位數台幣

CSS 行內樣式表是什麼?

CSS行內樣式表是什麼

行內樣式表 ( 內聯樣式表 ) 是用在 HTML 元素標籤內部的 style 屬性中去設定 CSS 屬性的樣式,HTML 元素標籤原本就是能夠直接寫 CSS 屬性在裡頭,但我們很常把它單獨立拿出來寫在外部去控制 HTML 元素標籤,行內樣式表 ( 內聯樣式表 ) 只適用於修改簡單的樣式,如下表示。

<body>
	<p style="color: red;">學習行內樣式表(內聯樣式表)是什麼</p>
</body>

CSS 行內樣式表如何使用?

CSS行內樣式表如何使用

接下來我們來看看如何使用行內樣式表 ( 內聯樣式表 ),其實很簡單只需要在你的 HTML 元素標籤裡頭加入 style 然後要記得使用雙引號,把你要寫的 CSS 屬性給包覆起來就可以了,是不是非常簡單呢!? 我們來看看下列代碼是怎麼寫的。

<body>
	<p style="color: red; font-size: 18px;">學習行內樣式表(內聯樣式表)是什麼</p>
</body>

CSS 行內樣式表有什麼特色?

CSS行內樣式表有什麼特色

行內樣式表 ( 內聯樣式表 ) 最大特色就是能夠直接在當下就給 HTML 元素標籤,指定 CSS 屬性但是只適合寫簡短的 CSS 屬性,不然寫太多 CSS 屬性在當前 HTML 元素標籤中會過於臃腫,臃腫的壞處是日後維護也不太容易,要知道隨著網站越來越大也會越來越複雜,那維護勢必成為一個大工程了,如果沒有結構性也是災難的開始。

一般前端開發者都會避免少用行內樣式表 ( 內聯樣式表 ) 的,除非有極為重要的 CSS 屬性值一定要先給才會使用,還會根據 CSS 的權重問題給予當前該 HTML 元素標籤使用時機,這邊先提一下行內樣式表 ( 內聯樣式表 ) 權重是最高的,也就是說今天我們要讓 <p> 段落標籤給予紅色字體使用行內樣式表 ( 內聯樣式表 ) 方式寫入後,如果再使用內部樣式表 ( 內嵌樣式表 ) 同樣給予字體顏色為藍色,最終還是顯示紅色的唷!!

我會在寫一篇文章好好介紹 CSS 的權重問題,這很重要有時候權重問題會根據賦值情況給不同優先級,這問題會影響到你當下給予 CSS 屬性時機,產生疑問奇怪怎麼沒顯示該功能,很大一部分不是你給錯,而是你忽略了權重的優先級了。

點我瞭解 小青如何每月多賺5位數台幣

CSS 行內樣式表優缺點是什麼?

CSS行內樣式表優缺點是什麼

最後我們來聊聊行內樣式表 ( 內聯樣式表 ) 的優缺點吧! 如果你也跟著打打看和試試看寫的話你會發現其實很明顯行內樣式表 ( 內聯樣式表 ) 有蠻多讓人很困擾的問題,但是還是有一些好處的,不過壞處還是太多了很少人使用,只會有特定情形才會使用。

優點:

  • 所有樣式表中權重最大
  • 只能控制當前 HTML 元素標籤
  • 修改樣式簡單可以使用,CSS 屬性不超過1個

缺點:

  • HTML 與 CSS 不相分離
  • 日後維護不容易
  • 不能在當前 HTML 寫太多 CSS 屬性
  • 只能控制當前元素,不能控制整個頁面
  • 書寫繁瑣麻煩,用一次就要打一次

CSS 內部樣式表是什麼?

CSS內部樣式表是什麼

內部樣式表 ( 內嵌樣式表 ) 是寫在 HTML 頁面的 <head> 頭部標籤內部,因為這樣才被命名為內部樣式表,內部樣式表示將所有的 CSS 屬性代碼通通都寫在 <style> 標籤內部,如下表示。

<style>
	p {
		font-size: 18px;
}
</style>

我相信如果你是跟我前幾篇文章學過來一定很不陌生,因為我都是這樣展示給你們看,你要寫 CSS 代碼就是全部抽出來統一寫在 <head> 頭部標籤內部的 <style> 標籤裡頭,在 <body> 標籤裡面是看不到任何一個 CSS 代碼,<body> 標籤裡面只有 HTML 骨架結構,所以很好展示出 HTML 與 CSS相分離的效果,為了方便跟別人溝通我用了什麼方式一般我們就會稱這種方式為內部樣式表 ( 內嵌樣式表)。

點我瞭解 小青如何每月多賺5位數台幣

CSS 內部樣式表如何使用?

CSS內部樣式表如何使用

經過前面了解了內部樣式表 ( 內嵌樣式表 ) 是什麼後,我們來看看怎麼使用的,首先先要在 <head>頭部標籤裡創建一個叫 <style> 標籤,在這標籤裡頭就能夠寫所有你想要控制標籤的 CSS 屬性代碼,如果你寫在 <style> 外面那該 CSS 代碼都不會生效唷!

<head>
	<style>
		p {
			font-size: 18px;
	}

	</style>

</head>
<body>
	<p>今天來學內部樣式表(內嵌樣式表)</p>

</body>

CSS 內部樣式表有什麼特色?

CSS內部樣式表有什麼特色

那你可能會想內部樣式表 ( 內嵌樣式表 ) 這樣寫有什麼特色,在這你可以停下來好好想想看為什麼要這樣寫,這樣寫有什麼好處呢? 以及很多人使用嗎? 這些問題你都可以想想看為什麼唷! 有助於你思考和更了解樣式表的本質。

按道理來說 <style> 標籤是可以不用寫在 <head> 頭部標籤內部的,不信的話你可以動手試試看寫在 <body> 標籤裡頭一樣也是可以使用這個 <style> 標籤,也就是說你想放哪我借放在哪非常自由,但是呢大家都很乖乖的放在 <head> 頭部標籤包覆著裡面,是因為我們在查找代碼和維護 CSS希望能夠很快找到 <style> 放在那兒,所以大家就自己都放到 <head> 頭部標籤內部拉!

不信的話你可以到你喜歡逛的網站或是一些知名企業或是公司的網站按 F12 或是用滑鼠右鍵檢查該網站代碼,看看一個專業團隊是不是把 CSS 代碼寫在 <head> 標籤裡呢?! 答案是 100% 都寫在那邊的,如果不是的話你可能看到的都不是團隊開發,或是沒有跟人共同協力合作過,這樣給人感覺就不太好,雖然功能是能夠使用但不注重細節會讓在團隊開發中使人討厭的唷!

CSS 內部樣式表優缺點是什麼?

CSS內部樣式表優缺點是什麼

內部樣式表 ( 內嵌樣式表 ) 是不是不一定都好,是的如果你有好好想想這問題確實如此,我們當初不是說 HTML 和 CSS 相分離是最好的沒錯!!! 但是為了教學方便幾乎都會使用這種方式,還有寫 CSS 屬性代碼寫到後面也會覺得奇怪了 HTML 代碼文件怎麼越寫越多行!

雖然有分離但是不是真的做到真分離,算得上一半一半吧! ( 部分分離 ) 那我們來說說優缺點吧!

優點:

  • 規劃出 CSS 就是寫在 <style> 標籤裡
  • 維護時候能快速找到 CSS 代碼寫在何方
  • 能夠控制整個頁面元素標籤樣式的控制
  • CSS 代碼結構清晰
  • 初學練習使用這種方式開發網站最佳
  • HTML 與 CSS 代碼相分離

缺點:

  • HTML ( 結構 ) 與 CSS ( 樣式 ) 雖然相分離,但是還是寫在 HTML 文件中 ( 沒有完全分離 )
  • 開發到後期網站越來越複雜,CSS 屬性代碼會愈來越多
  • 維護會比外部樣式表差
點我瞭解 小青如何每月多賺5位數台幣

CSS 外部樣式表是什麼?

CSS外部樣式表是什麼

外部樣式表在實際開發中是前端人員用最多用最兇的一種樣式表,也是最推薦大家使用的一種樣式表,它能夠使用於比較多情況與場景,這邊來假設一下你使用前面說的內部樣式表 ( 內嵌樣式表 )、行內樣式表 ( 內聯樣式表 ) 隨便寫,到後期CSS屬性代碼一定一大坨很難區分什麼都什麼,寫了 500 行 HTML + CSS 到最後會發生什麼事呢?

你以後維護鐵定花超級久時間,今天如果你使用外部樣式表就能夠把 HTML 與 CSS 全部獨立出來,分離出來就可能 100 行 HTML,400 行 CSS 代碼但是你可能會有許多 CSS 代碼屬性是適用於不同場景又能夠區分出來 4 個 100 行獨立的控制特定場景區塊的 CSS 代碼,這樣子你想想維護速度誰會比較快效率更高呢?

當然是使用外部樣式表的前端人員快上許多倍,根據不同情況需要修改的區塊和控制也很容易,我們就能夠大大的提高效率,把時間花在刀口上,如果你不太懂這意思小青我就說一下一個最陽春的網站只需要由 HTML 與 CSS 控制就可以了,那這裡個都可以視為兩個資料夾,一個是 HTML 的一個是CSS 資料夾,而 CSS 資料夾能夠根據控制 CSS 的屬性又能分別獨立創建對應的方法文件也就是子項目。

今天你要改文本 ( Text ) 文本顏色 ( color ),那我只要在對應的CSS文件改一下就可以全改了,那根據需求再創立一個改變字體大小、字體樣式…等,經過那麼做後以後如果我需要調整是不是一秒就能找到對應的文件進行修改超級方便。

CSS 外部樣式表如何使用?

CSS外部樣式表如何使用

接下來我們來看看外部樣式表怎麼使用吧! 首先我們先創建一個基本的 HTML 文件,裡面就寫我們需要用到的骨架結構,再創建一個 CSS 文件這文件我們來寫控制字體的大小,要記得 HTML 的文件存檔要取名後墜名為點 HTML ( .html ) 而 CSS 後墜名為點 CSS ( .css ) 別忘了唷! 不然瀏覽器不能匹配你的檔案。

<html>
	<head>
		
	</head>

	<body>
		<p>今天來學外部樣式表</p>

	</body>
</html>
p{
	font-size: 48px;
}

OK! 完成了但是你可能會發現一個問題,這樣CSS屬性怎麼都呈現不了,是的沒錯是因為我們還沒進行引入的步驟,如果沒有引入這個樣式表 HTML 不知道你要做什麼樣的 CSS 修飾,所以我們會使用<link> 標籤進行引入 CSS 文件進來 HTML 中,如下表示。

<link rel="stylesheet" href="CSS文件的路徑">
  • link 之中的 rel 屬性值是必須填寫 stylesheet 不然不能夠進行識別 CSS 文件唷
  • herf 屬性值為路徑,填入該 CSS 文件地址即可

那接下來是我們該把 <link> 標籤放到哪裡才會觸發並進行 CSS 引入呢? 一般我們都會放在 <head>頭部標籤裡頭來進行引入的動作,那接下來你把 CSS 文件路徑給都補齊吧,並看看字體有沒有進行改變,如我你引入了還是沒看到 CSS 屬性效果的改變,就再檢查看看你其中哪個環節出錯了並多加練習。

CSS 外部樣式表有什麼特色?

CSS外部樣式表有什麼特色

能夠有效的縮減代碼在 HTML 的撰寫量,但是並不是代表 CSS 代碼不見,而是經過外部的引入方式,讓整體 HTML 中的代碼能夠縮減,在日後進行維護的時候能有效區分出該模塊是做什樣的工作進行調整動作,如果不是區分開來的就很容易花很多時間在查找代碼,找要需要調的地方在哪裡過程浪費很多時間在搜尋瀏覽上,有結構的區分後 CSS 屬性代碼是外部樣式表最大的特色,分的越細團隊維護就越快。

點我瞭解 小青如何每月多賺5位數台幣

CSS 外部樣式表優缺點是什麼?

CSS外部樣式表優缺點是什麼

當然外部樣式表還是有缺點的,在新手學習上因為要跳來跳去會影響學習上的一點點困擾,但小青我覺得影響其實並不太大,只要檔名取清楚就好了讓你一眼能秒認出來這 CSS 文件是做什麼功能的就可以了,講真的說實在其實這個問題也不算不上缺點。

優點:

  • 有效區分 HTML 代碼與 CSS 代碼
  • HTML 與 CSS 相分離
  • 讓 CSS 區塊化創建文件
  • 需要什麼 CSS 屬性引入就好

缺點:

  • 前期上手一點點小難 ( 花不到 5 分鐘就能適應 )
  • CSS 文件命名不能隨便

CSS 樣式表大總結

CSS樣式表大總結

經過一連串的介紹 CSS 中三個樣式表,你可能會想那我學外部樣式表就好拉! 並不是這樣子,其實你這樣想是錯誤的,每個樣式表都有個別存在理由以及適用場合,你必須都要先了解每個樣式表,一般前端人員都會使用到混搭的方式,並不是說一種樣式表方法通吃全部,這樣你不能更有效率的去發揮唷! 就像論語割雞焉用牛刀,效率問題的核心所在,雖然都可以用目的都可以達成,但是吃資源。

樣式表優點缺點使用情況控制範圍
行內樣式表權重高、書寫簡單不能寫太多CSS較少控制一個標籤
內部樣式表HTML與CSS相分離(部分)CSS寫在HTML中還是過於臃腫較多控制一個頁面
外部樣式表HTML與CSS相分離需要引入方式超級多控制多頁面

蛤?! 你可能會想有佔用資源要考慮唷! 當然的會因為你使用的時機吃多少資源都會有差異化的,但是如果你初學或是你程度還不夠高,可以先忽略這一大塊沒必要在這進行專研,現在首先要緊的事你能夠完成你的網頁和客戶期待的網頁為最終目的導向,等到可以很輕鬆應付並實現出來,再來考慮效率的問題也不遲,所以呀! 你還是必須知道並熟練這三種樣式表,並去拆解大型網站、知名網站觀摩他們為什麼這樣使用樣式表唷! 才能不斷進步增進自己的視野!

點我瞭解 小青如何每月多賺5位數台幣

能看到這裡通常只有 1% 的人,很感謝您可以閱讀到這裡(鞠躬)
本篇文章歡迎社群分享,可按分享按鈕,讓更多的人知道此篇文章
如果是引用本篇文章任何段落請附上本篇文章連結即可唷!
嚴禁搬運整篇文章到你個人部落格、寫成新聞稿
這麼做你會被任何搜尋引擎懲罰 Ban 掉
如需合作請右上角服務項目 -> 聯繫我們
by 小青

發表迴響