[翻译]标记语言和样式手册 Chapter 2 标题（5）

方便替换的图标

我们也可以使用cssdebackground属性来设定放在文字左边的小图标以此来代替写死图片标签的方法,为标题加上装饰用的小图标.这个方法能使在未来的日子里改变网站显示效果的工作变得十分轻松—只需要替换那么一个css规则,就能同时改变整个网站的显示效果.

代码和上面的平铺背景大致相同:

h1 {
  font-family: Arial, sans-serif;
  font-size: 24px;
  color: #369;
  padding-left: 30px;
  background: url(icon.gif) no-repeat 0 50％;
  }

我们在文字的左边多留出一块空间以便防止我们想要的图标,然后设定no-repeat指定背景图片不进行平铺(如图2-8),同时我们希望图标的位置在据左边0像素,并且对起垂直中线.


图2-8:设定了图标的标题示例

容易更新

让我们设想这样一个场景:在一个包含了100个页面的网站里,我们没有使用上面的方法,而使用<img>标签写死每个标题旁边的图标,图标和网站风格是相融合的,几个星期后,网站的主人打算换掉网站风格,而新的图标大小和旧的并不一样,哎呦!这下我们就得回去修改整整100份页面里面的<img>标签以更新新图标的路径,真讨厌!想想这些事件会对项目预算造成怎样的影响,对完工期限带来多大的压力?时间就是金钱啊!

如果把这些并不十分重要的,装饰性的图标整合到一个css文件中,只要花上几分钟就能够一次性换掉整站的所有图标,带来崭新的外观!由此你应该可以渐渐明白到结构标记和显示效果分离的好处了吧.

变色龙效果

下来的技巧和我刚才所说的有一些矛盾,但是我认为这个技巧在某些情况下是十分有用的.这是我在2003年4月为Fast Company杂志的网站(www.fastcompany.com)做标准重构时大量使用的技巧.

那时我们在网站里的<h3>标签旁边用了许多13X13的小图标,就像这样:

<h3><img src="https://img.aspxhome.com/file/UploadPic/20081/16/2008116121451478.gif"  width="13" height="13" alt="*" /> FIRST IMPRESSION</h3>

有两个让我们决定要这样把图标写死在网页里面.首先,根据标题种类的不同,我们会使用到不同的图标(图书俱乐部是一本书,每日引言则是引号等等),第二个理由则是我们每个月会更换一次整个网站的配色,以配合当期杂志的封面主题.当然,这种替换工作因为使用了css而变得十分简单.

为了让图标跟着其他页面元素一起变色(这样才不必一直为了新色彩而重新制作图标),我们只用两种颜色做了一组图标:白色和透明(会显示除每次更改的背景颜色).图2-9就是放在首页引言之前的图标:


图2-9: 13X13的透明图标(放大后)

为了在透明部分填进颜色,我们使用了简单的css的background属性设定颜色,我们希望只希望这个颜色出现在图表的后面而不出现在标题文字后面,我们用到了css选择器只对<h3>标签内的图片使用这条规则,以便达到我们想要的效果:

h3 img {
  background: #696;
  }

这段css代码表示<h3>标签内的所有<img>标签都把背景设为绿色,背景色会透过透明像素显示出来,但是白色部分仍然还是白色,如此一来,每个月只需要修改这条css规则,换上不同的颜色,就能瞬间改变网站上每个图标的色彩了,就像变魔术一样.

对齐<img>标签

为了使图标和文字正确的对齐(我们希望垂直居中),因此我们加上了这条css规则:

h3 img {
  background: #696;
  vertical-align: middle;
  }

这条规则会使图标和<h3>文字内容垂直居中,图2-20就是设定玩的标题:


图2-10:以css为图标加上背景色的示例

这个例子还能说明另一个重要的概念—以css指定背景色彩会出现在任何页面内指定的图标或是css图标后面.

举例来说,我们回头看看"方便更新的图标"这个示例,为它加上背景色看看:

h1 {
  font-family: Arial, sans-serif;
  font-size: 24px;
  color: #fff;
  padding-left: 30px;
  background: #696 url(transparent_icon.gif) no-repeat 0 50％;
  }

如此以来 transparent_icon.gif 会显示在相同规则中稍早定义的背景色之上(如图2-11) —在这个例子中,背景色是#696,也就是撞球桌的绿色.


图2-11 设定了背景图,背景色的标题示例

当你为了考虑色彩为主的页面上加小圆角,装饰图标时,这个小技巧就十分好用了.这些不重的图片可以完全放进css文件里面,未来打算更新的时候也就可以轻松替换.现在多用点心思.就能节省未来许多的工作.

总结

我希望通过比较集中常用的方法后,你能发觉正确使用标题标签的好处.不管是视觉,非视觉浏览器或者其他设备,都能正确的历届标题的含义,并且以适当的方法展现它们,搜索引擎也会为他们建立索引,你也可以轻松的以css应用和修改需要显示的效果.

接着阅读：Chapter 3 * 的表格