語言

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

Web Style Sheets CSS tips & tricks

See also the index of all tips.

On this page:

圖表與標題

Eiffel tower

迷你法國公園裡艾菲爾鐵塔的模型縮放

超文字置標語言5(HTML5)有一種元素能夠插入有標題的圖表。(我們將展示一個慣例來用以下 HTML4做同樣的事情。)

<figure>
  <p><img src="eiffel.jpg"
    width="136" height="200"
    alt="Eiffel tower">
  <figcaption>
    迷你法國公園裡艾菲爾鐵塔的模型縮放
  </figcaption>
</figure>

例如,若要將圖表向右浮動與周邊于文寬度30%相等的距離,以下規則可以可以幫你把它做到:

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

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

圖像的縮放

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

如果你知道檔裡全部圖像的寬度﹐你可以添加一個DIV的最小寬度﹐就像這樣:

figure {
  min-width: 150px;
}

St. Tropez

夕陽中的聖特羅佩及其堡壘

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

<figure>
  <p><img class=scaled src="st-tropez.jpg"
    alt="St. Tropez">
  <figcaption>
    夕陽中的聖特羅佩及其堡壘
  </figcaption>
</figure>

還有這是樣式表:

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

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

安置標題到頂部

Cap Ferrat

靠近卡普費拉的地中海

HTML允許圖表標題元素作為圖表的第一個或最後一個元素,若無其它CSS規則,這將分別把標題放於圖表頂端或底端。

但無論標記如何,你還是能夠在CSS內指定標題在圖表上方或下方顯示。通過告訴流覽器那個圖像應該格式化為一個表格,並以圖像作為唯一的格子,並以標題作為表格的標題。只要將這些規則加到前段的樣式表內:

figure {
  display: table;
}
figcaption {
  display: table-caption;
  caption-side: top;
}

我們在本頁面使用的樣式含有灰色邊框。很不幸地,當我們使用表格排列把標題放在頂端或底端時,我們必須分別指定邊框,因為標題是在表格本身的邊框之外。我們可以把邊框的一部分放在標題上來解決這個問題:

figure {
  border-top: none;
  padding-top: 0;
}
figcaption {
  padding: 0.5em;
  border: thin silver solid;
  border-bottom: none;
}

HTML4內的圖表及標題

Eiffel tower

迷你法國公園裡艾菲爾鐵塔的模型縮放

不像HTML5,HTML4沒有元素可以插入有標題的圖表。有人曾提出, (請見 HTML3)但仍就沒有被包含到HTML4裡面。這是類比圖表元素的一種方式:

<div class=figure>
  <p><img src="eiffel.jpg"
    width="136" height="200"
    alt="Eiffel tower">
  <p>迷你法國公園裡艾菲爾鐵塔的模型縮放
</div>

然後再樣式表裡你可以使用"圖表"的分類來隨意格式化圖表。例如,若要將圖表向右浮動與周邊文章段落寬度30%相等的距離,可以使用以下規則:

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

跟之前一樣﹐只有前兩個定義(浮動和寬度)是必要的﹐其餘的只是為了裝飾而已。

HTML4縮放圖像

為避免圖像溢出表格,若你知道所有檔中圖像的寬度,你可以給DIV等等增加最低寬度,就像這樣:

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

St. Tropez

夕陽中的聖特羅佩及其堡壘

若要將圖像縮放到表格的寬度(就跟我們在右方圖像所做的一樣),你可以增加種類屬性以及CSS規則,與上面HTML5的範例非常相似。這是我們所使用的編碼:

<div class=figure>
  <p><img class=scaled src="st-tropez.jpg"
    alt="St. Tropez">
  <p>夕陽中的聖特羅佩及其堡壘
</div>

然後這是樣式表:

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

唯一增加的是最後一條規則: 它讓圖像與DIV內部一樣寬(邊框內區域)。

HTML4內將標題放置頂端

Cap Ferrat

靠近卡普費拉的地中海

若要將標題放置在頂端,將這些之前的段落中提到的規則加到樣式表內:

div.figure {
  display: table;
}
div.figure p + p {
  display: table-caption;
  caption-side: top;
}

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

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

跟之前一樣,用這種方式,在本頁面,我們放在圖表周圍的灰色邊框只會顯示在圖樣本身周圍。若要把它放置於圖像以及標題周圍,增加這些規則:

div.figure {
  border-top: none;
  padding-top: 0;
}
div.figure p + p {
  padding: 0.5em;
  border: thin silver solid;
  border-bottom: none;
}
Bert Bos, style activity lead
Copyright © 1994–2017 W3C®

Created 17 January 2001;
Last updated 2017年11月09日 星期四 04:40:59

語言

關於翻譯