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

圖表與標題

超文本置標語言(縮寫為HTML)沒有一個元素允許插入有標題的圖表。有人曾經建議過(見HTML3)﹐但是始終沒有被加入到HTML4裏。這裡有一種方法來模擬如此圖表元素的插入﹕

<div class="figure">
  <p><img src="eiffel.jpg" width="136"
    height="200" alt="Eiffel tower">
  <p>Scale model of the
    Eiffel tower in Parc Mini-France
</div>

接著在樣式表裏你用"figure"類去按照你想要的方式來格式化圖表。例如﹐要將圖表浮動到右方﹐在等於週圍文章段落寬度25%的空間內﹐這些規則會幫你把它做到﹕

div.figure {
  float: right;
  width: 25%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.figure p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}

其實﹐只有前兩個定義(浮動和寬度)是必要的﹐其餘的只是為了裝飾而以。

圖像的縮放

這裡出現一個問題﹐就是圖像可能太寬了。在這種情況下﹐圖像總是在136圖元的寬度和DIV是週圍文章寬度的25%。那麼如果你將範圍調窄﹐有可能圖像會泄出DIV以外(試試看!)。

如果你知道文件裏全部圖像的寬度﹐你可以添加一個DIV的最小寬度﹐好像這樣﹕

DIV.figure {
  min-width: 150px;
}

另外的方法是縮放圖像本身。那就是我們對在右邊的圖像所做的。你可以看到﹐如果你把邊框弄得很寬﹐JPEG的圖像就不會縮放的太好。但是如果圖像是一個SVG格式的圖表或曲線圖的話﹐縮放實際上能美妙的運用。這裡是我們用的HTML標記﹕

<div class="figure">
  <p><img class="scaled" src="st-tropez.jpg"
    alt="St. Tropez">
  <p>Saint Tropez and its
    fort in the evening sun
</div>

還有這是樣式表﹕

div.figure {
  float: right;
  width: 25%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.figure p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}
img.scaled {
  width: 100%;
}

唯一的增加是最後的規則﹕規則使圖像和DIV(邊框與內邊距以內的面積)的內側一樣寬。

安置標題到頂部

你甚至可以把標題放在頂部﹐通過告訴瀏覽器那個圖像應該格式化為一個表格。你只要添加這些規則到前面章節的樣式表裏﹕

div.figure p {
  display: table-cell;
  width: 100%;
}
div.figure p + p {
  display: table-caption;
  caption-side: top;
}

'+'命令P的規則與它之前P的規則相配。這意味著在這種情況下P的規則會與第二個P的圖像相配﹐也就是含有標題的那一個。

(這個方法可能會揭露一些舊瀏覽器裏存在的編碼問題﹐特別是和圖像的縮放混合在一起的時候﹐像我在這裡做得一樣。)

可擴展超文本置標語言的圖案

現時(2003年1月)XHTML2的建議書包括一個CAPTION(標題)元素﹐可能會和OBJECT(對象)一起用。如果建議書被接受﹐那麼就不再需要用DIV和CLASS﹐但是﹐至少現在你可以用XHTML2編寫﹕

 
<object data="eiffel.jpg">
  <caption>Scale model of the
    Eiffel tower in Parc
    Mini-France</caption>
</object>