Web Style SheetsCSS tips & tricks
See also the index of all tips.
On this page:
圖表與標題
迷你法國公園裡艾菲爾鐵塔的模型縮放
超文字置標語言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;
}
夕陽中的聖特羅佩及其堡壘
另外的方法是縮放圖像本身。那就是我們對在右邊的圖像所做的。你可以看到﹐如果你把邊框弄得很寬﹐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(邊框與內邊距以內的面積)的內側一樣寬。
安置標題到頂部
靠近卡普費拉的地中海
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內的圖表及標題
不像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;
}
若要將圖像縮放到表格的寬度(就跟我們在右方圖像所做的一樣)，你可以增加種類屬性以及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內將標題放置頂端
若要將標題放置在頂端，將這些之前的段落中提到的規則加到樣式表內:
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;
}