网页样式表
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>