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;
}
