Categories:文章類別

[懶人語法小貼士] 多個樣式一次搞定
一般我們在網頁中引用樣式表的方法,
大多都是直接呼叫 CSS 文件中特定的 class
例如我們在網頁中,寫了這樣的 CSS 樣式表:
<style>
.myFont {color:red; font:9pt/160% verdana}
.myBorder {border:1px solid black}
.bold {font-weight:bold}
</style>

當我們要呼叫這些樣式的時候,
就直接在段落或文字串前後呼叫上面定義的 class
例如:
<span class="myFont">測試一個文字串囉</span>
<span class="myBorder">再測一個文字串囉</span>
出來的結果會顯示為:
測試一個文字串囉 再測一個文字串囉

上面的例子對一個天天用 CSS 語法寫網頁的人來說,
基本上已經是反射動作,無須思考的了。
但大多數在呼叫 class 的時候,
都是像上面的例子那樣,一次呼叫一個 class
所以即便不同的 class 所設定的樣式有重複,
我們還是會習慣性的建立一次。

像是如果你要紅色的字但沒有邊框,你就要設一個 class
如果還要一個同樣是紅色的字但這次要有邊框,你得再設一個 class
如果再要一個紅色的字又有邊框另外還要加上粗體,那麼還得再設一個 class.....
久而久之就有了一大堆的 class
感覺上很沒有效率,
尤其對於一個懶人來講,實在很傷元氣。

那麼懶人可以怎麼作呢?
事實上 class 是可以一次呼叫好幾個的。
這一點比較少人在應用,
但有時候一次呼叫多個 class 的確是挺方便的。

一次呼叫多個 class 的標準寫法是,
只要在呼叫的時候,把不同的 class 名稱用空白鍵作分隔,
這樣就可以一次呼叫好幾個不同的 class

例如同樣的例子,我們就可以寫成這樣:

<span class="myFont myBorder bold">
測試一個文字串囉</span>

一次呼叫三個 class,同時就有了三個樣式屬性
我們不需要另外再多設定一組 class 啦!

範例結果(紅字、邊框加上粗體)測試一個文字串囉


就這樣簡單,你可以玩玩看囉