當我們在定義樣式時，除了網頁標籤外，我們還可自訂class或id名稱，而這兩者有何不同呢？
有些當我們在設定樣式時，有些標籤可能會有不同的樣式設定，例如前面我們提到，可能在一篇文章裡，我們就需要字型15pt與12pt，兩種字型也有不同的顏色，那我們該怎麼設定呢？class與id可以幫助您做到這一件事情。
樣式以class方式宣告與使用
當我們要使用class方式宣告樣式，我們得在樣式名稱前面加上句點（.），例如以下的網頁：
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>使用class1</title>
<style type="text/css">
.normalfont{font-size: 12pt; color: #0000ff}
.largefont {font-size: 15pt;color: #d77c1a}
</style>
</head><body>
<font class="normalfont">PHP圖書</font><br>
<font class="largefont">歡迎來到php6的世界</font>
</body></html>
如此這兩段同用<font>標籤的文字就會套用不同的樣式。
【圖17 樣式用class方式宣告，所以<font>的樣式就可以設計為兩種不同樣式】
有些屬性是很多標籤擁有的，所以我們也可利用class宣告的方式，讓這個屬性用於多個標籤內。例如padding這一個樣式屬性，這是設定標籤內資料與標籤間的上下左右邊之間距，這個屬性可用於table、div與span內，所以我們若使用class方式宣告，就可讓div與table用相同的標籤，設計相同內文與邊框的距離。
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>一個class可被多個標籤使用</title>
<style type="text/css">
.paddingset {padding:20px;}
</style>
</head>
<body>
<hr> <div class="paddingset">php6</div>
<table border="1">
<tr><td class="paddingset">a</td>
<td class="paddingset">b</td></tr>
<tr><td class="paddingset">c</td>
<td class="paddingset">d</td></tr></table>
</body></html>
【圖18 利用class宣告的方式，可讓一個class可被多個標籤使用】
一個class可以被不同的標籤使用外，一個標籤也可以使用多個class，例如以下的例子，一段文字具有「內文與邊框的距離為20px」及「字型大小為12pt，顏色為藍色」兩種樣式：
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>一個標籤使用多個class</title>
<style type="text/css">
.paddingset {padding:20px;}
.normalfont{font-size: 12pt; color: #0000ff}
</style>
</head>
<body>
<hr><div class="paddingset normalfont">歡迎來到php6的世界</div><hr>
</body></html>
【圖19 一個標籤可以套用多個class樣式】
樣式以id方式宣告與使用
當我們要使用id方式宣告樣式，我們得在樣式名稱前面加上#，例如以下的網頁：
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>使用id</title>
<style type="text/css">
#normalfont{font-size: 12pt; color: #0000ff}
#largefont {font-size: 15pt;color: #d77c1a}
</style>
</head><body>
<font id="normalfont">PHP圖書</font><br>
<font id="largefont">歡迎來到php6的世界</font>
</body></html>
如此這兩段文字就會套用不同的樣式。
【圖20 樣式用id方式宣告，所以<font>的樣式就可以設計為兩種不同樣式】
class與id有何不同呢？一個網頁標籤可以使用多個class，但是不能使用多個id。id可以被javascript的 GetElementByID 函數使用，但是class不行。所以您在參考其他網頁時，需考慮到這兩個不同的地方，再決定使用class 或id重新定義css。
接下來：3-6-4 使用CSS函數庫
相關文章：