nav分隔線 nav分隔線

CSS樣式技巧:從入門到精通,類別、ID、標籤樣式和串接樣式表

icon_fb icon_twitter icon_google
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

本網站使用相關網站技術以確保使用者獲得最佳體驗,通過使用我們的網站,您確認並同意本網站的隱私權政策。欲了解詳情,請參閱 隱私權政策