多重定義CSS樣式

這次介紹的多重宣告可以讓同樣的標籤在不同的環境下能夠以不同的方式呈現.

CSS最好用的地方就是能夠更有效率的管理整個網站的配色. 利用CSS來設計的網站要修改配色和各種視覺呈現的細節都十分的方便.

以前的CSS通常大家都這樣設定:

A:link 
{
  FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: Tahoma,Verdana,Arial;
}

.nameclass 
{
  FONT-SIZE: 11px;
}

#nameid 
{
  COLOR: #000000;
}

用這種方式來設定是沒錯, 但是卻將CSS的應用侷限了.

我們來試試看:

div.nameclass 
{
  FONT-SIZE: 11px; COLOR: #003399;
}

span.nameclass
{
  FONT-SIZE: 11px; COLOR: #FF0000;
}

設定完以後套用CSS, 並且在套用的網頁加上:

<div class="nameclass">
hello
</div>

<span class="nameclass">
hello
</span>

執行該網頁, 無誤的話, 執行結果應該是這個樣子:

hello
hello

很有趣吧! 我們來看看一些邏輯:

用過CSS的朋友都知道, 單一的名稱代表的是標籤, 前面有一個點的名稱是class, 而前面有一個井字號的則是id.

在這個範例中, nameclass 這個 style class 被定義了兩次, 而一次是定義在 DIV 標籤下, 一次則是在 SPAN 標籤下, 因此同樣的一個style class, 套用在 DIV 與 SPAN 的呈現效果各不相同.

不只是 id, class和標籤而已, 連 link 都可以多重設定:

div A:link 
{
  FONT-SIZE: 15px; COLOR: #003399; FONT-FAMILY: Tahoma,Verdana,Arial; 
}

div A:visited
{
  FONT-SIZE: 15px; COLOR: #003399; FONT-FAMILY: Tahoma,Verdana,Arial; 
}

div A:hover 
{
  FONT-SIZE: 15px; COLOR: #ff0000; FONT-FAMILY: Tahoma,Verdana,Arial; 
}

div A:active
{
  FONT-SIZE: 15px; COLOR: #ff0000; FONT-FAMILY: Tahoma,Verdana,Arial; 
}

div span
{
  FONT-SIZE: 13px; COLOR: #666666; FONT-FAMILY: Tahoma,Verdana,Arial;
}

設定完以後套用CSS, 並且在套用的網頁加上:

<div>
<a href="." target="_self">酷必網</a><br>
<span>這是div標籤下的span標籤敘述的文字</span>
</div>

如果執行無誤的話, 應該可以看到以下的執行結果:

酷必網
這是div標籤下的span標籤敘述的文字

很有趣吧!

利用CSS的多重定義, 要以一個CSS檔案定義整個網站的樣式就簡單多了.

如果要製作動態效果, 用這種定義方式也可以省下許多寫 Script EventHandler的時間.

最後更新日期: 8/6/2003 12:21:50 AM