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</font><br>
<font color="#227700">天空</font><br>
<font size="5">文字大小</font><br>
<hr>
<!-- CSS 設定文字顏色 -->
<!-- 也可以套用在空標籤 -->
<span style="屬性1:值1; 屬性2:值2;"></span>
<p style="color:#227700">綠Green</p>
<span style="color:blue">天空</span><br>
<p style="font-size:30px; color:#67b735">文字大小</p><br>
使用行內樣式可以迅速改變單一元素的外觀,但較不易維護和管理,特別在多個元素需要相同樣式時,行內樣式會讓程式碼變得冗長。這時候,推薦使用類別樣式 (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>
<title>123</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 font50">AAA</p>
這樣你就能在不同元素上套用一個以上的樣式,更有效地管理並修改網頁的樣式。
三、ID樣式
在 HTML 中,每個元素的 ID 名稱是唯一的,不能重複。你可以使用 ID 屬性來給某個元素指定一個特定的 ID 名稱。在 CSS 中,如果你想要針對某個唯一的元素設定樣式,可以使用專用的 ID 樣式,前面加上 "#" 符號表示。
<h1 id="myHeader">My 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="myHeader">My 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