语言

这是一份翻译。 与 英文版本 相比,它可能包含错误或者过时。 翻译员: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秒

语言

关于翻译