語言

這是一份翻譯。與英文版本相比,它可能包含錯誤或者過時。翻譯員:Samuel Chong of Chinese Translation Services through its pro bono translation services

網頁樣式表CSS 提示與竅門

請見 索引 查看所有提示

多種顏色的菜單

你看到的下面的五顏六色的功能表中, 只不過是一個有一些一些P元素在內的DIV元素。 這樣的視覺效果源於 每個P元素都單獨定位,並有自己的字體和顏色。它應用於短的文本為最佳,因為視覺效果是基於重疊的,如果文本過長, 重疊過多,就會變得難以閱讀。

樣式表允許功能表最多有10個元素,上面的例子中使用了8個元素。這裡是上面的例子中的HTML原始程式碼:

<div class="map">
<p id="p1"><a href="../../CSS/#news">What's new?</a>
<p id="p2"><a href="../../CSS/#learn">Learning CSS</a>
<p id="p3"><a href="../../CSS/#browsers">CSS Browsers</a>
<p id="p4"><a href="../../CSS/#editors">Authoring Tools</a>
<p id="p10"><a href="../../CSS/#specs">Specs</a>
<p id="p6"><a href="../../CSS/Test">CSS1 Test Suite</a>
<p id="p9"><a href="/StyleSheets/Core">W3C Core Styles</a>
<p id="p8"><a href="http://jigsaw.w3.org/css-validator/">CSS Validator</a>
</div>

注意DIV元素被定義為class "map",它使得該元素成為功能表的容器,和P元素的ID屬性。每個P元素都必須有一個(不同的)ID,稱為P1,P2,...P10。 ID不必按照順序使用(如例子所示)。你可以將樣式表複製到你自己的樣式表,或用@import 或用LINK元素去直接從W3C網頁導入map.css

@import "http://www.w3.org/Style/map.css";

or

<link rel="stylesheet" href="http://www.w3.org/Style/map.css">

樣式表的解釋

下面介紹樣式表的使用。首先,樣式表將DIV元素界定class "map"。它創建了一個190px高的空間,P元素將被放置其中。 每一個具有ID的P元素,從P1到P10便被給於顏色和字體,每個元素都依據"邊距"屬性被置於由DIV創造的空間中: 一 個負的頂端邊距將元素移到的DIV元素空間,一個正的底端邊距確定了下一個元素從DIV的底部重新開始。

(本樣式表的缺點是,它是以px為單位的。如果你的流覽器可以很好地執行CSS,你可以把它改成用百分比。)

DIV.map {                        /* Reserve some room for the links */
  padding-top: 190px;
  margin-left: -2em;             /* Adapt this to your own page... */
  margin-right: -2em;            /* Adapt this to your own page... */
  margin-bottom: 4em;
  margin-top: 5em;
  clear: both;
  text-shadow: 0.2em 0.2em /* 0.2em */ silver }

#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
  white-space: nowrap }
#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
  text-indent: 0 }
#p1 A, #p2 A, #p3 A, #p4 A, #p5 A, #p6 A, #p7 A, #p8 A, #p9 A, #p10 A {
  text-decoration: none }

#p1, #p1 A   {color: #DDD; font: 100px/1 Impact, Helvetica Narrow, sans-serif}
#p2, #p2 A   {color: #000; font: italic 40px/1 "Georgia", serif}
#p3, #p3 A   {color: #080; font: 40px/1 "Verdana", sans-serif}
#p4, #p4 A   {color: #37F; font: bold 40px/1 Courier New, Courier, monospace}
#p5, #p5 A   {color: #F73; font: bold 100px/1 "Verdana", sans-serif}
#p6, #p6 A   {color: #22A; font: bold 25px/1 "Verdana", sans-serif}
#p7, #p7 A   {color: #088; font: italic 80px/1 "Verdana", sans-serif}
#p8, #p8 A   {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p9, #p9 A   {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p10, #p10 A {color: #F73; font: bold 60px/1 "Verdana", sans-serif}

#p1  {text-align: right;  margin: -185px 0 85px 0}    /* top right */
#p2  {text-align: left;   margin: -190px 0 150px 5%}  /* top left */
#p3  {text-align: right;  margin: -90px 35% 50px 0}   /* center */
#p4  {text-align: right;  margin: -95px 0 55px 0}     /* center right */
#p5  {text-align: left;   margin: -130px 0 30px 0}    /* center left */
#p6  {text-align: left;   margin: -40px 0 15px 35%}   /* bottom center */
#p7  {text-align: right;  margin: -80px 0 0px 0}      /* bottom right */
#p8  {text-align: left;   margin: -40px 0 20px 3%}    /* bottom left */
#p9  {text-align: right;  margin: -25px 0 5px 0}      /* bottom right */
#p10 {text-align: left;   margin: -130px 0 70px 0}    /* center left */

當然,你可以自由地更改樣式表來嘗試不同的字體、顏色和位置,或額外建立可以超過10個元素的樣式規則。 再來看 看DIV的左、右邊距:他們都被給於負值,因而菜單比周圍的文本寬,但在你的頁面上,邊距未必足夠寬,所以你可能需要刪除這些規則。

如果你嘗試這種風格,你可能會注意到它無法在Netscape 4良好地運行。 當然,這是Netscape 4的錯。然而, map-ns.css 一個類似的樣式表, 似乎可以在該流覽器上運行。下面有個竅門,置於你的HTML文檔的頂端,可以允許適用於Netscape 4版本和以上更利於CSS執行的版本實現共存:

<link href="map-ns.css" rel="stylesheet" type="text/css">
<link href="map.css" rel="stylesheet" type="text/css" media="all">

正確地執行CSS將讀取兩種樣式表,但第二個規則會覆蓋第一個規則。因此,除了一點不必要的工作,並沒有什麼改變。 但是,Netscape 4不會載入第二個它不識別的樣式表,因為其"media"屬性。

此外,你可能會問,為什麼元素是給與負值來定位,而似乎用 絕對定位屬性更為合適。事實上,用"position"和"left"和"right"可 以達到同樣目的。這個樣式表之所以使用邊距定位,是因為這樣做它可以在只執行CSS1的流覽器中運行。

Bert Bos,style activity lead
Copyright ©1994–2022 W3C®Privacy policy

創建於2001年5月5日;
最後更新2022年02月10日 星期四 05:40:52

語言

關於翻譯