CSS樣式技巧：從入門到精通，類別、ID、標籤樣式和串接樣式表
文、意如老師
在現代網頁設計中，網頁選擇器是一項強大的工具，它讓我們能夠靈活地定位和控制網頁中的元素，為其添加樣式、修改內容或實現互動效果。網頁選擇器能夠讓我們以更加精準和便捷的方式對網頁進行操作，是每位前端開發者必須掌握的重要技能。
然而，對於初學者來說，學習網頁選擇器可能會感覺有些複雜和混淆。有時候我們聽到「行內樣式」、「類別」、「ID」、「標籤樣式」和「串接樣式表」這些詞彙，不知道它們之間的區別以及如何運用它們。
在本文中，我們將輕鬆地解釋這些概念，並一次性搞懂網頁選擇器的各種用法。不論你是初學者還是有些基礎的前端開發者，這篇文章都將為你提供清晰明確的指引，讓你能夠靈活運用這些選擇器，讓你的網頁在外觀和功能上更上一層樓。
本篇文章將帶您深入了解網頁開發中重要且實用的 CSS 樣式技巧。透過以下八個主題的學習，您將掌握各種樣式設定的方法，並能靈活運用於網頁設計中：
一、行內樣式：學習如何直接在 HTML 標籤中使用行內樣式，快速為元素添加單一樣式。
二、類別樣式（Class）：了解如何定義類別樣式，將相同樣式應用於多個元素，提高開發效率。
三、ID樣式（ID）：深入瞭解 ID 樣式的特性與使用方法，為單一元素設定獨特樣式。
四、標籤樣式（HTML）：學習如何針對特定標籤設定樣式，以及如何處理嵌套標籤的樣式問題。
五、CSS 套用優先權：掌握 CSS 樣式套用的優先順序，避免樣式衝突並正確設定優先權。
六、混合樣式：了解如何結合標籤樣式與類別樣式，打造更多樣化的網頁外觀效果。
七、串接樣式表：學習如何使用外部 CSS 檔案來管理樣式，提高程式碼可讀性和維護性
八、CSS 瀏覽器支援度與前綴詞：探索不同瀏覽器對 CSS 的支援程度，並了解處理瀏覽器前綴詞的方法
透過這些實用的 CSS 樣式技巧，您將能夠更加靈活地掌控網頁的外觀，讓您的網頁設計更具個性化和專業性。無論您是初學者還是有一定程度的前端開發經驗，這些知識都將為您的網頁設計之路增添亮麗的色彩。
一、行內樣式：
行內樣式是一種直接在 HTML 標籤中嵌入 CSS 屬性和值的方式，用於快速為單一元素添加樣式，以下是行內樣式的幾個實例：
!-- HTML 設定背景顏色 --
body bgcolor=gray
...
/body
!-- CSS 設定背景顏色 --
body style=background-color:#96fed1
...
/body
!-- HTML 設定文字顏色 --
font color=green綠Green/fontbr
font color=#227700天空/fontbr
font size=5文字大小/fontbr
hr
!-- CSS 設定文字顏色 --
!-- 也可以套用在空標籤 --
span style=屬性1:值1; 屬性2:值2;/span
p style=color:#227700綠Green/p
span style=color:blue天空/spanbr
p style=font-size:30px; color:#67b735文字大小/pbr
使用行內樣式可以迅速改變單一元素的外觀，但較不易維護和管理，特別在多個元素需要相同樣式時，行內樣式會讓程式碼變得冗長。這時候，推薦使用類別樣式 (Class) 或 ID 樣式來統一管理元素的外觀，增加程式碼的可讀性和維護性。
二、自訂樣式表 - 為什麼需要類別（Class）樣式？
在 CSS 行內樣式表寫法中，如果需要將多個元素的樣式一同修改，常常需要重複編寫相同的 CSS 屬性，這將導致程式碼冗長且不易維護。舉例來說，如果需要將五個元素的文字顏色從綠色改成藍色，就必須在每個元素的行內樣式表中修改顏色屬性五次。
p style=color:green第1行文字/p
p style=color:green第2行文字/p
p style=color:green第3行文字/p
p style=color:green第4行文字/p
p style=color:green第5行文字/p
然而，使用類別樣式 (Class) 就能解決這個問題，它讓我們能夠將相同樣式歸納成一個類別，並在需要的元素中套用這個類別，這樣只要修改類別樣式中的屬性，所有套用該類別的元素都會一起改變。
!-- 建立類別樣式 --
style
.txtblue {
color: blue;
}
/style
!-- 套用類別樣式 --
p class=txtblue第1行文字/p
完整程式碼範例：
head
title123/title
style
.txtblue {
color: blue;
}
.txtred {
color: red;
font-size: 30px;
}
/style
/head
body
!-- 套用類別樣式 --
p class=txtblue第1行文字/p
p class=txtblue第2行文字/p
p class=txtred第3行文字/p
p class=txtred第4行文字/p
p class=txtred第5行文字/p
/body
此外，你也可以在一個類別樣式中設定多個屬性，並在需要的地方套用該類別。
style
.txtblue {
color: blue;
}
.font50 {
font-size: 50px;
}
/style
p class=txtblue font50AAA/p
這樣你就能在不同元素上套用一個以上的樣式，更有效地管理並修改網頁的樣式。
三、ID樣式
在 HTML 中，每個元素的 ID 名稱是唯一的，不能重複。你可以使用 ID 屬性來給某個元素指定一個特定的 ID 名稱。在 CSS 中，如果你想要針對某個唯一的元素設定樣式，可以使用專用的 ID 樣式，前面加上 # 符號表示。
h1 id=myHeaderMy Header/h1
在上面的例子中，我們給 h1 標籤指定了一個 ID 名稱為 myHeader。
接著，在 CSS 中我們使用 #myHeader 來針對這個具有特定 ID 的元素設定樣式。
style
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/style
上述 CSS 中的樣式會應用在具有 ID 為 myHeader 的 h1 標籤上。這個樣式會將背景顏色設為淺藍色，文字顏色設為黑色，並添加 40px 的內距和文字居中對齊。
完整程式碼範例：
html
head
style
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/style
/head
body
h1 id=myHeaderMy Header/h1
/body
/html
這樣你就可以輕鬆地針對特定元素設定個別的樣式，並且 ID 名稱的唯一性確保了你的樣式不會影響其他元素。
在網路上看到華麗的網頁想拆解怎麼做，卻還是看不懂程式嗎？
Frontend前端開發不只帶著你從零到一開始學，還能讓你打造專屬個人作品集，輕鬆就業轉職無負擔😍
四、標籤樣式
在 CSS 中，你可以直接針對 HTML 標籤來設定樣式，這稱為標籤樣式。這樣的樣式將應用於所有具有該標籤的元素，而不需要給它們指定類別或 ID。
在下面的例子中，我們使用 CSS 設定了幾個標籤樣式，分別針對 h1、h2、h3 和 h4 標籤。
html
head
style
/* 標籤樣式 - 針對 h1 標籤的樣式設定 */
h1 {
color: Red; /* 文字顏色為紅色 */
font-family: Odibee Sans, cursive; /* 字型為 Odibee Sans 和 cursive 類型 */
font-weight: bold; /* 粗體字 */
border: 1px #336699 solid; /* 1像素寬度、深藍色(#336699)的實線邊框 */
}
/* 標籤樣式 - 針對 h2 標籤的樣式設定 */
h2 {
color: #0000CC; /* 文字顏色為藍色 */
font-family: ParkAvenue BT; /* 字型為 ParkAvenue BT */
font-weight: bold; /* 粗體字 */
border: 3px #669900 double; /* 3像素寬度、深綠色(#669900)的雙線邊框 */
}
/* 標籤樣式 - 針對 h3 標籤的樣式設定 */
h3 {
border: 3px orange dotted; /* 3像素寬度、橘色的虛線邊框 */
}
/* 標籤樣式 - 針對 h4 標籤的樣式設定 */
h4 {
border: 3px orange dashed; /* 3像素寬度、橘色的虛線邊框 */
}
/style
/head
body
h1今天是星期五天氣晴/h1
h2今天是星期五天氣晴/h2
h3今天是星期五天氣晴/h3
h4今天是星期五天氣晴/h4
/body
/html
上述程式碼是使用 CSS 的標籤樣式（Tag Style）來設定不同標籤元素的外觀。我們分別針對 h1、h2、h3 和 h4 標籤來設定不同的樣式，使用標籤樣式可以讓你更輕鬆地針對多個元素設定相同的樣式，而不需要每個元素都加上類別或 ID。這使得你的 CSS 程式碼更加簡潔，並且增加了可讀性和可維護性。
五、優先套用：行內樣式ID樣式類別樣式標籤樣式
在這個範例中，我們使用了行內樣式、ID 樣式、類別樣式和標籤樣式來設定 h1 標題的外觀。根據 CSS 的優先順序，它們的套用順序是：行內樣式ID 樣式類別樣式標籤樣式。
行內樣式（Inline Style）：在 h1 標籤內使用 style 屬性來設定行內樣式。例如：style=color:blue。
ID 樣式（ID Style）：在 style 區塊中，使用 # 加上 ID 名稱來定義 ID 樣式。例如：#myh1。
類別樣式（Class Style）：在 style 區塊中，使用 . 加上類別名稱來定義類別樣式。例如：.color_pink 和 .size30。
標籤樣式（Tag Style）：在 style 區塊中，直接使用標籤名稱來定義標籤樣式。例如：h1。
html
head
style
/* 標籤樣式 - 針對 h1 標籤的樣式設定 */
h1 {
color: Red; /* 文字顏色為紅色 */
font-family: Odibee Sans, cursive; /* 字型為 Odibee Sans 和 cursive 類型 */
font-weight: bold; /* 粗體字 */
border: 1px #336699 solid; /* 1像素寬度、深藍色(#336699)的實線邊框 */
}
/* ID 樣式 - 針對 ID 為 myh1 的元素設定 */
#myh1 {
color: orange; /* 文字顏色為橘色，優先套用於行內樣式 */
}
/* 類別樣式 - 針對擁有 color_pink 類別的元素設定 */
.color_pink {
color: pink; /* 文字顏色為粉紅色 */
}
/* 類別樣式 - 針對擁有 size30 類別的元素設定 */
.size30 {
font-size: 30px; /* 文字大小為 30 像素 */
}
/style
/head
body
!-- 套用了多個樣式 --
h1 class=color_pink id=myh1 style=color: blue今天是星期五天氣晴/h1
!-- 同時套用了 color_pink 和 size30 兩個類別樣式 --
h1 class=color_pink size30一次套用多個類別樣式/h1
/body
/html
第一個 h1 標題套用了多個樣式：它具有 color_pink 類別樣式，ID 為 myh1 的 ID 樣式，並且行內樣式設定了文字顏色為藍色。根據優先順序，行內樣式的優先權最高，所以文字顏色為藍色，即使有其他樣式也會被覆蓋。
第二個 h1 標題套用了兩個類別樣式：color_pink 和 size30。它的文字顏色為粉紅色，並且文字大小為 30 像素，這兩個樣式的效果都被套用到這個標題中。
六、混合樣式標籤樣式+類別樣式
在這個範例中，我們結合了混合樣式，使用了標籤樣式與類別樣式來設定文字的顏色。
html
head
title標籤樣式/title
style
/* 標籤樣式 - 針對 h1 標籤的樣式設定 */
h1 {
color: Red; /* 文字顏色為紅色 */
font-family: Odibee Sans, cursive; /* 字型為 Odibee Sans 和 cursive 類型 */
font-weight: bold; /* 粗體字 */
border: 1px #336699 solid; /* 1像素寬度、深藍色(#336699)的實線邊框 */
}
/* 標籤樣式 - 針對 h2 標籤的樣式設定 */
h2 {
color: #0000CC; /* 文字顏色為藍色 */
font-family: ParkAvenue BT; /* 字型為 ParkAvenue BT */
font-weight: bold; /* 粗體字 */
border: 3px #669900 double; /* 3像素寬度、深綠色(#669900)的雙實線邊框 */
}
/* 類別樣式 - 針對具有 txt1 類別的元素設定 */
.txt1 {
color: green; /* 文字顏色為綠色 */
}
/style
/head
body
!-- 混合樣式 - 使用了標籤樣式 h1 與類別樣式 txt1 --
h1今天是 span class=txt1星期五/span天氣晴/h1
h1今天是 span class=txt1星期五/span天氣晴/h1
h1今天是 span class=txt1星期五/span天氣晴/h1
!-- 混合樣式 - 使用了標籤樣式 h2 與類別樣式 txt1 --
h2今天是 span class=txt1星期五/span天氣晴/h2
h2今天是 span class=txt1星期五/span天氣晴/h2
h2今天是 span class=txt1星期五/span天氣晴/h2
/body
/html
我們建立了 h1 和 h2 標籤的樣式，並設定了文字顏色、字型、粗體以及邊框等屬性，同時，我們也建立了一個名為 .txt1 的類別樣式，設定了文字顏色為綠色。
在 HTML 中，我們使用 span 標籤來套用 .txt1 類別樣式，並且這個 span 標籤是位於 h1 和 h2 標籤內部的，因此文字的顏色會依照類別樣式 .txt1 的設定而變為綠色。這就是混合樣式的作用，藉由混合樣式，我們可以更靈活地組合多個樣式，為不同元素套用不同的效果，使得網頁的外觀更加多樣化。
七、串接樣式表
在這個範例中，我們介紹了如何串接樣式表，讓 HTML 檔案引用外部的 CSS 樣式表。請看以下程式碼的解釋：
在 mystyle.css 檔案中，我們建立了三個樣式，分別為 h1 標籤樣式、#myfont ID 樣式和 .txt1 類別樣式，設定了不同的文字顏色、字型、粗體和邊框等屬性。
/* css/mystyle.css */
h1 {
color: Red;
font-family: Odibee Sans, cursive;
font-weight: bold;
border: 1px #336699 solid;
}
#myfont {
color: #0000CC;
font-family: ParkAvenue BT;
font-weight: bold;
border: 3px #669900 double;
}
.txt1 {
color: green;
}
在 page/page1.html 檔案中，我們使用 link 標籤來嵌入 mystyle.css 樣式表，並設定 href 屬性為 ../css/mystyle.css，表示樣式表 mystyle.css 位於 css 資料夾的上一層目錄。
!-- page/page1.html --
html
head
title標籤樣式/title
link rel=stylesheet type=text/css href=../css/mystyle.css
/head
body
h1今天是 span class=txt1星期五/span天氣晴/h1
h1今天是 span id=myfont星期五/span天氣晴/h1
h1今天是 span class=txt1星期五/span天氣晴/h1
/body
/html
透過上述的設定，page1.html 檔案會引用 mystyle.css 樣式表中所定義的樣式，使得文字在網頁中顯示出設定的效果。這種方式使得我們可以將 CSS 樣式與 HTML 檔案分開管理，提高程式碼的組織性和可維護性。
八、CSS瀏覽器支援度，各家瀏覽器的前綴詞
在 CSS 中，不同的瀏覽器有時會實現 CSS 屬性的不同版本，這可能導致在不同的瀏覽器上顯示效果不同。為了處理這種兼容性問題，可以使用各家瀏覽器的前綴詞，這些前綴詞會告訴瀏覽器使用相應的版本來解釋 CSS 屬性。
一樣的程式碼，用各家瀏覽器支持程度都不一樣
以下是一些常見的瀏覽器前綴詞和對應的瀏覽器：
-moz-: Firefox 瀏覽器
-webkit-: Safari 和 Chrome 瀏覽器
-o-: Opera 瀏覽器
-ms-: Internet Explorer 瀏覽器
瀏覽器前綴詞
對應瀏覽器
-moz-
Firefox
-webkit-
Safari and Chrome
-o-
Opera
-ms-
Internet Explorer
例如，假設我們想在 Firefox 和 Safari/Chrome 瀏覽器中使用多欄佈局，可以使用以下方式：
/* 多欄佈局，Firefox */
-moz-column-width: 15em;
-moz-column-gap: 2em;
/* 多欄佈局，Safari 和 Chrome */
-webkit-column-width: 15em;
-webkit-column-gap: 2em;
/* 通用多欄佈局，可支援 Firefox、Safari 和 Chrome */
column-width: 15em;
column-gap: 2em;
現在你已經掌握了行內樣式、類別、ID、標籤樣式和串接樣式表等網頁選擇器的基本概念和使用方法。無論你是在開發自己的個人網頁、建立專業的企業網站，還是參與網頁開發項目，這些技能都將成為你的利器，幫助你打造出更具吸引力和互動性的網頁。
在程式設計的世界中，學習永無止境。現在你已經掌握了這些基礎，接下來可以進一步深入學習更多高級的網頁選擇器技巧，或是探索其他前端開發的領域，如JavaScript、框架等，來提升你的技術水平。
FB粉絲團：https://www.facebook.com/lccnetzone
YouTube頻道：https://www.youtube.com/user/LccnetTaiwan
痞客邦Blog：http://lccnetvip.pixnet.net/blog
