点击这里前往爱易网任务室　HTML教程　栏目．

上文：标记言语——再谈清单

原文出处

Chapter 9 精简标签

先前我们不断提到结构化内容能够把结构与设计细节分类并精简标签,该怎样做呢?我们可以使用符合标准的XHTML与CSS代替表格,图片制造我们所需求的版面.

使用标准技术制造网站(特别是十分依赖CSS的网站)的时候,我们常常会养成一个不太好的习惯,就是加上多余的标签和class属性,技术完全不需求它们.

通过在CSS中使用集成选择器(descendant selectors),我们就能消弭多余的<div>,<span>与分类属性.精简标签代表页面将能读取得更快,同时更容易维护,在这一章中,我们会讨论几个完成这项任务的简单做法.

以标准技术制造网站时,如何精简标签?

精简标签是个值得讨论的重要话题,制造网站时,用合法的XHTML书写,用CSS设定展现效果能得到的巨大好处之一,就是精简标签.简短的代码代表着下载速度加快,对于使用56k拨号上网的用户来说,这绝对是关键,简短的代码也代表服务器空间需求,带宽耗费减少,这能让老板,系统管理者开心.

问题在于,单纯的确定页面符合W3C标准规范并不代表内容所使用的代码会缩短,你当然能为符合标准的标记内容加上各种不需求的标签,没错,他的确符合标准,但可能为了让设计CSS的时候方便一点,加了不少多余的代码.

别怕!这边有些技巧,让你能设计出简约,有符合标准的标记内容,但也同时保留足够的CSS款式控制能力.接着让我们学习几个精简标签的简单技巧.

承继选择器

在这里我们要看看两种在团体网站标记侧边栏(包括信息,链接和其他东西)的做法.把所有好东西塞进一个id是"sidebar"的<div>里,以便稍后把它放到浏览器视窗中的某一处(第二部分将会讨论CSS规划 / 排版功用).

方法A:快乐的分类

<div id="sidebar">

  <h3 class="sideheading">About This Site</h3>

  <p>This is my site.</p>

  <h3 class="sideheading">My Links</h3>

  <ul class="sidelinks">

    <li class="link"><a href="archives.html">Archives</a></li>

    <li class="link"><a href="about.html">About Me</a></li>

  </ul>

</div>

我在许多网站上看过类似方法A的标记内容,在设计者刚发现CSS的威力的时候,很容易感动过头,为每个想要制定特殊款式的标签指定class.

以前面这个例子来说,或许我们认为<h3>指定class=sideheading是为了协助它们指定与页面之内其他标题不同的款式;为<ul>和<li>指定class也是为了同样的理由.

分类CSS

指定款式时,假设我们想让标题变成橘色,使用serif字体,底部加上浅灰色边线,而"sidelinks"无序清单则要把小圆点符号去掉,清单项目改为粗体.

方法A需求的CSS内容看起来会像这样:

.sideheading {

  font-family: Georgia, serif;

  color: #c63;

  border-bottom: 1px solid #ccc;

  }

.sidelinks {

  list-style-type: none;

  }

.link {

  font-weight: bold;

  }

我们能参照标记内制定的分类名称(class),为这些标签指定特殊款式,你甚至能想象页面的其他部分也照这个方式组织: 导航条,页尾与内容区,每个标签都加上了芜杂的分类,以便对它们有完全控制权.

没错,它的确能运作,但是有个简单的做法能够节省这些分类属性(class),同时让你的CSS更容易阅读,更具组织性,接着看方法B.

方法B:自然的选择

<div id="sidebar">

  <h3>About This Site</h3>

  <p>This is my site.</p>

  <h3>My Links</h3>

  <ul>

    <li><a href="archives.html">Archives</a></li>

    <li><a href="about.html">About Me</a></li>

  </ul>

</div>

方法B短小精悍!但是等等,分类都到哪里去了?恩...你很快就会发现我们其实并不是真的需求它们,次要是由于我们把这些标签都塞进一个具有独一名称(本例是sidebar)的<div>的关系.

这就是发挥承继选择器作用的地方了.我们只需求直接以标签名称指定位于sidebar之内的标签,就能去掉这些多余的分类属性.

以内容前后关系指定CSS

让我们看看与方法A相反的款式,但是这次我们用承继选择器指定位于sidebar里的标签.

#sidebar h3 {

  font-fa