學習CSS提示教程(5)自訂類別

css|技巧|教程

　　上一節：單獨調用

　　自訂類別

　　今天講的有一個新知識“類別”。其實，這知識並不陌生！回想一下，在 HTML 標籤中，有個屬性叫 class，當時沒有解釋這個屬性是幹什麼用的。其實，不是不解釋，而是解釋了也不會用，所以就暫時沒有說，等到了今天。這個 class 屬性，所以將之解釋為“類別”屬性，它有什麼作用呢？它能夠讓我們在不同的標籤中使用相同的 CSS 設定，舉個例子如下： 我們在讀書的時候，常常看到課本上有重點的地方，用紅色或其它顏色標明。如果，今天我們的網頁上，也想將一些比較重要的地方用“紅色、粗體字”來顯示，你會怎麼做呢？：

原始代碼	“<font color="Red"><b>網頁教學網</b></font>”
顯示結果	“網頁教學網”

　　使用CSS實現重點突出

　　用上面的那種方法是相當不錯的！簡單用易懂！不過，試想一種情形...若是在我們的網頁中有 1000 多個所謂的“重點”，今天你突然想把重點通通換成“紅色、粗體字”，那你該怎麼辦呢？這時，我們就講用CSS來幫我們解決難題吧！而且，我們的“自訂類別”也就用上了！

樣式文法	<style type="text/css"> .important { color:red ; font-weight:bold } </style>
應用方式	“<font class="important">網頁教學網</font>”

　　首先，我們在在CSS表中自己做一個叫做 important 的類別，然後利用 class 屬性，套用在網頁中，不難吧！以後若是要將“紅色”改成“藍色”，那麼只要改類別裡的設定就行了！不管網頁中有幾萬個“重點”，都不用怕了！

　　自訂類別的用法

　　看過了自訂類別的大概用法後，再來做詳細的解說，如何自訂類別？自訂類別方法很簡單，方法和一般的CSS聲明沒什麼區別！唯一的不同是，CSS聲明是針對某個標籤的；而自訂類別則是不針對某個標籤，而是要自己命名！

樣式文法	<style type="text/css"> .important { color:red ; font-weight:bold } </style>

　　以上為例，.important { color:red ; font-weight:bold }就是我們自訂的類別，其中的{}部份和一般的 CSS 聲明方法一模一樣！差別就在前面的.important，沒錯！important 就是我們自定的名稱，有了名稱，才能調用。注意！前面記得在自訂名稱前加一個小點“.”，這樣就完成了自訂的一個類別！這個類別可以利用class 來調用！套用到任何標籤中！

　　下一節：文字屬性