[翻译]标记语言和样式手册 Chapter 4 引用（3）

为<blockquote>加上样式

Fast Company从杂志存档里选出每日引言放在首页,已经行之有年了,为了保留FC的印刷体裁和强调效果,因此有很长一段时间这个引言被做成GIF图片,让设计者能以任何方式处理字型,达成期望的效果.

在2003年早秋,差不多是在我看着至爱的红袜队迎向历史性冠军之时,我决定抛弃GIF图片,换上加了样式的<blockquote>标签.

从易用性角度看,以文字显示引用内容很有道理,由于无法重现GIF带来的体裁便利性,因此我们面对着美化引言的挑战.当然,CSS帮了很大的忙.

背景的引用符号

想法十分简单,就是分别制作开引号,闭引号两张图片,选用的色调足以隐没在略为重叠的引用文字后面,引用同时也放在了270像素宽,淡灰色的圆角方块内,以便配合网站整体风格.第三张图片用来完成圆角效果以及引号.这三张图片完全以各个元素debackground属性放在css中.

我们先以photoshop或者你惯用的图形处理程序建立这些图片.这边是个使用特殊字体的好机会,你能选用一般浏览器不支持的字体,在Fast Company的例子里,使用了杂志上的引号字体.

三张图片

图4-1 是刚建立的三张图片,一张是开引号,顶部圆角,一张是闭引号,最后一张是底部的两个圆角.这三张图片背景都是透明的,以便我们用css来控制背景的颜色.同时我们以白色制作了圆角,灰色制作了引号.

图 4-1 为了制作引号圆角而以Photoshop创建的3张图片

标记元素

目前,你只能以background或者background-image属性为一个元素指定单张背景图,因此,我们将为<blockquote>里的每个段落加上id.

我们会把一段内容标为#quote,另一段内容标为#other,使得最后有三个独特元件能够制定背景图.来看看我们会在这个示例接下来的步骤里中使用的标记方法:

<blockquote cite="http://www.somesite.com/path/to/page.html">
  <p id="quote"><strong>Misquotations</strong> are the only quotations
that are <strong>never</strong> misquoted.</p>
  <p id="author">&#8212;Hesketh Pearson</p>
</blockquote>

这样就完成了使用背景图的预备工作了

三个元素,三张背景图

如先前所述,现在你只能以background或者background-image属性为一个元件指定一张背景图,因此我们将善用示例中的三个元素,也就是<blockquote>,#quote段落和#author段落,以便指定三张背景图完成我们期望的效果.

在新增元素前,看看还有那些元素可以用上,这是个很好的习惯.你经常能在完善,结构化的标记源代码中找到适合加上css的元素,大成你需要的效果.

我们先从<blockquote>元素的css规则开始书写:

blockquote {
  width: 270px;
  margin: 0;
  padding: 0;
  font-family: georgia, serif;
  font-size: 150％;
  letter-spacing: -1px;
  line-height: 1em;
  text-align: center;
  color: #555;
  background: #eee url(top.gif) no-repeat top left;
  }

我们把整个组件的宽度设为270像素,与提供顶部圆角,开引号效果的top.gif宽度相同,同时我们也照顾了一下文字效果,为它指定了字体,大小和颜色.最后,我们置中所有文字,并以最后一条规则指定了背景色,背景图以及背景图的显示位置.

去掉<blockquote>的内外补丁也很重要,我们该为每个段落元素加上内补丁,这能让我们避免windows版IE5错误解析CSS盒模型的问题.我们会在本书第二部分进一步讨论盒模型的细节.

接着,让我们帮#quote段落设定样式:

blockquote {
  width: 270px;
  text-align: center;
  margin: 0;
  padding: 0;
  font-family: georgia, serif;
  font-size: 150％;
  letter-spacing: -1px;
  line-height: 1em;
  color: #555;
  background: #eee url(top.gif) no-repeat top left;
  }
#quote {
  margin: 0 10px 0 0;
  padding: 20px 10px 10px 20px;
  background: url(end_quote.gif) no-repeat right bottom;
  }

借着指定margin:0 10px 0 0;我们能取消浏览器在段落上下的预设补丁,以便使用精确的内补丁设定值排好版面.然而我们还是在右侧加上了10像素的外边界,以便把闭引号挤开,配合左边的效果.如果我们不留下这10像素的话,开引号就会紧靠整个外边框的最右边.另一种可行方法是直接在图片右边加上适当的留白.

同时也要留意,我们指定把背景图(开引号)放在<blockquote>的右侧(right)底部(bottom).

最后,我们要在作者段落(#author)放上最后一张背景图,也就是引言底部的圆角.

blockquote {
  width: 270px;
  text-align: center;
  margin: 0;
  padding: 0;
  font-family: georgia, serif;
  font-size: 150％;
  letter-spacing: -1px;
  line-height: 1em;
  color: #555;
  background: #eee url(top.gif) no-repeat top left;
  }
#quote {
  margin: 0 10px 0 0;
  padding: 20px 20px 10px 20px;
  background: url(end_quote.gif) no-repeat right bottom;
  }
#author {
  margin: 0 10px 0 0;
  padding: 0 0 10px 0;
  color: #999;
  font-size: 60％;
  background: url(bottom.gif) no-repeat bottom;
  }

我们再度取消段落上下的预设补丁,改在底部加上一些内部补丁.第三张图片已经到位了.为引用内容加上两个圆角,借以padding代替margin设定author部分的排列方式,我们得以让圆角图出现在适当的位置上,也就是最底部.