自定類別

 

【天啊!什麼是類別?】

您或許想吐血了!因為,又出現了一個新東西「類別」,其實,別緊張,這東西或許您並不陌生呢!回想一下,在HTML標籤中,有個屬性叫做class,當時,工友從不解釋這個屬性能幹嘛。其實,不是工友不解釋,而是解釋了也不會用,所以就暫時不說,等到今天再說。這個class屬性,工友將之稱為「類別」屬性,他能幹嘛呢?他能夠讓我們在不同的標籤中使用相同的CSS設定,工友舉個例子如下:

我們在讀書的時候,常常會在課本上畫重點,怎麼畫呢?有的用紅筆畫,有的用螢光筆畫...如果,今天我們在網頁上,也想將一些比較重要的地方,用「紅色、粗體字」來呈現,您會怎麼做呢?我們把上一段拿來畫重點:
原始碼 您或許想吐血了!因為,又出現了一個新東西「<font color="Red"><b>類別</b></font>」,其實,別緊張,這東西或許您並不陌生呢!回想一下,在HTML標籤中,有個屬性叫做class,當時,工友從不解釋這個屬性能幹嘛。其實,不是工友不解釋,而是解釋了也不會用,所以就暫時不說,等到今天再說。這個class屬性,工友將之稱為「<font color="Red"><b>類別</b></font>」屬性,他能幹嘛呢?他能夠讓我們在不同的標籤中使用相同的CSS設定...
呈現結果 您或許想吐血了!因為,又出現了一個新東西「類別」,其實,別緊張,這東西或許您並不陌生呢!回想一下,在HTML標籤中,有個屬性叫做class,當時,工友從不解釋這個屬性能幹嘛。其實,不是工友不解釋,而是解釋了也不會用,所以就暫時不說,等到今天再說。這個class屬性,工友將之稱為「類別」屬性,他能幹嘛呢?他能夠讓我們在不同的標籤中使用相同的CSS設定...

目前的您應該會這樣做吧!

【用CSS"畫重點"】

用剛剛那種方法是相當不錯啦!簡單又易懂!不過,試想一種情形...若是您的網頁中有1000多個所謂的「重點」,今天您突然想把重點通通換成「藍色」的,那您該怎麼辦?

嘿嘿...傷腦筋了吧!這時,我們就請出CSS來幫我們解決難題吧!而且,我們的「自定類別」也要派上用場了喔!

樣式語法 <style type="text/css">
.important { color:red ; font-weight:bold }
</style>
新原始碼 您或許想吐血了!因為,又出現了一個新東西「<font class="important">類別</font>」,其實,別緊張,這東西或許您並不陌生呢!回想一下,在HTML標籤中,有個屬性叫做class,當時,工友從不解釋這個屬性能幹嘛。其實,不是工友不解釋,而是解釋了也不會用,所以就暫時不說,等到今天再說。這個class屬性,工友將之稱為「<font class="important">類別</font>」屬性,他能幹嘛呢?他能夠讓我們在不同的標籤中使用相同的CSS設定...

首先,我們在CSS表中動動手腳,自己做一個叫做important的類別,然後利用class屬性,套用在網頁中,不難吧!還不懂?看看範例吧!

以後若是要將「紅色」改成「藍色」,那麼只要改類別裡的設定就行囉!不管網頁中有幾萬個"重點",都不用怕了!

【自定類別的用法】

OK!看過自定類別的大概用法後,工友再來做詳細的解說,如何自定類別...。自定類別很簡單,方法和一般的CSS宣告沒什麼兩樣!唯一的不同是,CSS宣告是針對某標籤;而自定類別則不針對某標籤,而是要自己命名!

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

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


Established since: March 28, 2003
All the design R 2003 by Admin