再談css–如何針對不同位置的元素使用不同的風格

很多人已經開始逐漸的習慣於全面使用css排版，盡量做到展現與內容的分離。但在此習慣的過程中一定會遇到各種棘手的問題。我的一個經驗就是：多查css手冊，多嘗試，多琢磨專家們的網頁，可以將一些頁面另存一下，慢慢分析。

好，說正題。經常有這樣一種情況：我想在同一個頁面的不同位置對超連結的風格進行定義，比如，在頁面的導航部分，我不希望有底線，而在其他地方則需要底線。

實現的方式總的來說有兩種：

1。對在不同的地方的超連結直接使用css內嵌指定，如：。這種方式很明顯，最為強大和靈活。可以做到頁面上的任意一個超連結的風格都不一樣。但是，我們並不需要這麼靈活，而且，對每個超連結都實行這個定義，太繁瑣。

2。利用css本身的對象層級的支援，分批地制定超連結的風格。比如，普通情況下，我把整個頁面裡的超連結都定義成帶底線，而只有菜單不使用。那麼，可以使用如下方式：

a{color:Black;font-size:12px;text-decoration:underline;}

而菜單如果是使用 ul 定義，像我上一篇 blog裡描述的那種風格，我就可以這樣定義：

.Menu a{color:Black;font-size:12px;text-decoration:none;}

這裡的 .Menu是指菜單的外邊界使用的css 。這樣，只要是在這個菜單內的超連結都會使用這個風格。

當然，這種指定方法也可以有很多種。如：

#MyMenu a {....} 表示在ID為MyMenu的元素內部所有超連結樣式；

#MyMenu li a{...}表示在ID 為MyMenu的元素內部的 li 元素內部的 超連結樣式；

*************************************************************************************
當css遇到xhtml--從display:inline到float:left

幾天前，寫了一個tab control ，風格如下：

我使用了css來描述這個風格，html和css代碼如下：

 <ul><li><a href="#" class="selected">檔案</a></li><li><a href="#">編輯</a></li><li><a href="#">視圖</a></li><li><a href="#">網站</a></li><li><a href="#">編譯</a></li><li><a href="#">工具</a></li></ul>

ul{border-bottom:solid 1px #999999;border-left:solid 1px #999999;height:30px;width:100%;margin-left:0px;}li{border-top:solid 1px #999999;border-bottom:solid 0px #999999;border-left:solid 1px #999999;border-right:solid 1px #999999;background-color:#cccccc;width:100px;height:30px;display:inline;list-style-type:none;margin-left:-1px;margin-bottom:-2px;text-align:center;padding-top:10px;}.selected{border-top:solid 1px #999999;border-bottom:solid 0px #999999;border-left:solid 1px #999999;border-right:solid 1px #999999;background-color:#eaeaea;width:100px;height:30px;display:inline;list-style-type:none;margin-left:-1px;margin-bottom:-2px;text-align:center;padding-top:10px;}

在一個master page上使用沒有任何問題。下午，在將這個tab control 拖到一個vs2005產生的頁面上，啟動並執行時候，發現效果竟然變成這個樣子：

同樣一段代碼，同樣的瀏覽器，怎麼會出現不同的效果？ 仔細檢查後，發現原來在master page裡之所以正常是因為master page使用的是html4.0，而現在的新的頁面是使用xhtml1.0來定義，難道是由於xhtml的嚴格定義要求引起的？ 趕快去w3c以及其他資源網站查資料，最後終於發現根本的原因。

原來，以前的寫法一直都是錯誤的。由於預設情況下，“li” 元素一直是豎直排列的，所以，我就使用了 display:inline 強制讓它在行的方向排列，以達到我想要的效果，但是，在xhtml裡，這種不嚴謹的寫法是不被支援的，所以，這裡設定高度、寬度都沒有任何作用。在格式化xhtml標籤時，更加強化了 “box”的概念，要想使用一些margin,padding等填充效果，就必須先將元素轉變成 box 元素，然後就可以設定想要的效果了。那麼，如何將一個元素轉變成 box 元素？ 答案是: 可以使用 float:left/right 的方式來把元素漂浮起來，變成一個個的box，這樣就可以任意使用 box 元素支援的css屬性了。

基於以上的思路，我將上面css裡的display:inline修改掉，變成float:left，一切都ok了！

以上只是一個特例，在html4.0轉到xhtml的過程中，會有不少的css效果都會發生轉變，不過，這種轉變是有規律和準則的，只要掌握了這種思想，應該能解決大部分問題。