網頁樣式表
CSS的提示與竅門

一個固定住的功能表

你所看到的這一網頁右上角的功能表僅是一個含有一些A元素的DIV。使它固定在其位置的套裝程式含在樣式表的規則/程式之中。以下是直接從本網頁的根源程式中提取的編碼：

<div class="banner">
<p>
<a href="../../../"><img alt="W3C" src="../../../Icons/w3c_home"></a>
<a href="../../../Consortium/Activities">Activities</a>
<a href="../../../TR/">Tech.&nbsp;reports</a>
<a href="../../../Help/siteindex">Site index</a>
<a href="../../../Consortium/Translation/">Translations</a>
<a href="../../../Status">Software</a>
<a href="http://search.w3.org/">Search</a>
<em>Nearby:</em>
<a href="../../">Style</a>
<a href="../../CSS/">CSS</a>
<a href="./">tips&nbsp;&amp;&nbsp;tricks</a>
</div>

在一個沒有CSS功能或CSS功能被關掉的瀏覽器中，這只是一個含有鏈結的普通段落。但感謝以下的規則/程式，它看起來將是被釘在瀏覽器窗口的右上角，“漂浮”在網頁之上。

div.banner {
  margin: 0;
  font-size: 80% /*smaller*/;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
  position: fixed;
  top: 2em;
  left: auto;
  width: 8.5em;
  right: 2em;
}
div.banner p {
  margin: 0; 
  padding: 0.3em 0.4em;
  font-family: Arial, sans-serif;
  background: #900;
  border: thin outset #900;
  color: white;
}
 
div.banner a, div.banner em { display: block; margin: 0 0.5em }
div.banner a, div.banner em { border-top: 2px groove #900 }
div.banner a:first-child { border-top: none }
div.banner em { color: #CFC }
 
div.banner a:link { text-decoration: none; color: white }
div.banner a:visited { text-decoration: none; color: #CCC }
div.banner a:hover { background: black; color: white }

這裏有趣的規則/程式是：'position: fixed' 使DIV在螢幕上保持固定，'display: block' 使在DIV中的A元素成爲組元素，因此能有層次的顯示，而不是都在一條線上顯示。

小心最後三個規則/程式的順序。它們都具有相同的特異性，所以最後的規則/程式決定顔色。如果滑鼠徘徊在鏈結上，我們希望應用:hover，所以這一規則/程式必須在最後。

其他規則/程式如邊緣，邊界，顔色等可根據個人喜好而刪除或更改。但請注意我們在鏈結之間運用規則/程式的方法：因爲 ':first-child' 這一規則/程式，在除了第一個鏈結之外的所有鏈結上都有邊界。 像這樣的一組規則/程式（所有元素上加邊界和第一個元素上無邊界）對在元素之間加入邊界非常方便。

（如果你看從這一網頁所鏈結的樣式表，banner-k.css 和 banner.css, 你將看到一些貌似相互矛盾的規則/程式。它們是用來防止幾種老的瀏覽器可能碰到的錯誤。 特別是banner-o.css 使標題條隱藏起來，而banner.css 使標題條以塊狀形式出現。這可以使標題條在Netscape 4中隱藏起來，因爲它忽略了banner.css 的 @import)

常見問題：在Windows 上的IE5和6？

如果你用微軟IE5 或6的瀏覽器閱讀此頁("WinIE5" 和 "WinIE6") ，你會注意到它不好用。至少現在到2002年九月的版本是這樣的。很多人就此向我詢問，所以我想借此提供一點解釋。簡單的說，錯誤是在瀏覽器，而不在網頁本身。

很不幸WinIE5 和 WinIE6還不能識別 'fixed'，而更大的問題是它們不能正確解析 'position' 這一屬性。一個不識別 'fixed' 屬性的瀏覽器本應忽略 'position: fixed' 這一規則/程式，回到樣式表中之前所定義的 'position' 值。然後我們可以在 'fixed' 之前加入 'position: absolute'，瀏覽器應該使用'position: absolute'。 但在WinIE 5 和 6 中並非如此。很明顯，不知怎麽關鍵字'fixed' 被解釋成 'static'.

你無法讓WinIE5 和 WinIE6支援 'fixed', 但有一個針對解析問題的變通辦法。Johannes Koch 提醒了我這一秘訣(從他的 collection of work-arounds). 首先以 'position: absolute' 取代樣式規則中的 'position: fixed'，然後在樣式規則中靠後一點的位置加入

body>div.banner {position: fixed}

（如果DIV標題條是在BODY以外的元素中，以那一元素取代BODY。）這樣做的效果是能識別CSS '>' (child) 部分的瀏覽器將使用這一規則，但那些不能識別的瀏覽器，特別是WinIE5 和 WinIE6, 將忽略它。'position: absolute' 規則將被使用，並且功能表將在正確的位置，只是在你滾動滑鼠時它無法保持固定。

在 '>' 前後沒有空格是很重要的 。