用CSS定义标题和几个实例

• 原文：What is the Best Way to Mark up the Title of a Document?
• 说明：本文是 《Web Standards Solutions: The Markup and Style Handbook》一书中的一章。书号：ISBN:1590593812。我们会陆续翻译此书中有价值的章节。
• 原作者：Dan Cederholm
• 翻译：阿宏

　　一个文档标题，最好的定义方法是什么？要回答这个问题，先设想我们要在一个页面上定义文章的标题，通常我们有三个方法来实现这个简单目的：

　　方法一： 有意义吗？

<span class="heading">文章标题</span>

　　虽然在某些情况下<span>会是一个方便的标签，但它并不能表达出标题的完整含义。采用这个方法的一个好处是，我们可以对它附加一个CSS规则，分配其一个heading class，使其文字象标题一样显示。

.heading {
font-size: 24px;
font-weight: bold;
color: blue;
}

　　ok，现在所有的标题都用heading class标记成了大号的粗体字体，并且为蓝色。太棒了！但是这样做对吗？如果有人用一个不支持CSS的浏览器来观看，会怎样呢？

　　举个例子，如果我们设置的这个外部样式表的规则不被老版本的浏览器支持，会怎样？又或者有视觉障碍的人用屏幕阅读器来阅读这个页面，又会怎样？一个访问者通过这些途径所看到（或听到）的应该和这个页面上正常的文本没有任何区别。

　　尽管class="heading"为这个标签增加了一点意义，但<span>仍然只是一个普通的标签，可以被大多数浏览器的缺省样式所修改掉。

　　搜索引擎检索这个页面时会略过<span>标签，就好象它不存在一样，不会对其可能包含的关键字给于一点额外的重视。在后面我们会更多的谈到搜索引擎和标题的关系。

　　最后，由于<span>标签是一个内嵌元素，我们可能需要把它嵌套在一个额外的块级元素中，比如<p>标签或<div>标签，为的是使它能够形成单独的行，这会进一步被非必要的代码弄乱你的标签。而这些额外增加的标签却是必须的，这样才能使不支持CSS的浏览器显示出没有差别的文本。

　　方法二:<p>和<b>组合

　　<p><b>文章标题</b></p>

　　使用一个段落标签，将会给我们带来块级的显示，<b>会把文本变成粗体。但是用这个方法标记一个重要的标题时，我们面对的是同样无意义的结果。

　　不象方法A，<b>标签能在可视化的浏览器中把文字显示成粗体——甚至在不支持CSS的浏览器中。但是和<span>标签一样，搜索引擎也不会因为有一些东西在段落中被加粗了而给予更高的优先。

　　难以设计样式

　　用普通的<p>和<b>的组合，也带来了另一个缺憾——无法把这个标题设计成不同于其他段落的样式。我们可能想用一个特别的样式来突出标题，来使页面内容更清晰更具结构，但是用这个方法只能使其显示成粗体。

　　方法三:样式加实质

　　<h1>文章标题</h1>

　　恩，多么好的标题定义。大多数的网页设计者对它都很熟悉。其实适当的使用它们，<Hn> 就能为页面内容提供灵活的、可索引的、以及可样式化的结构。

　　这也是聪明的定义方法，你会发现它很简单。不再需要额外的标签，你可以说，这仅仅比另外两个方法节省了一点点的字节，可以忽略不计，但节省一点是一点。

　　<h1>一直到<h6>，代表了标题的六个级别，从最重要的（<h1>）到最次要的（<h6>）。他们本身就是块级的，不需要增加其它元素来使其单独成行。简单，有效——就是好工具。

　　轻松定制样式

　　因为我们使用<h1>标签是唯一的，而<b>或<p>标签更适合使用在整个页面，所以我们可以用各种各样的CSS方法来样式化。

　　更重要的是，尽管完全不用样式，一个标题标签也能明显的表示出一个标题！可视化的浏览器把 <h1>显示成更大的粗体。一个非样式化的页面将以被期望的那样显示文档结构，用适当的标题标签来传达意思。

　　屏幕阅读器、PDA、手机、以及可视化的和非可视化的浏览器都会明白，碰到一个标题标签时该做的事情，正确的处理，比页面上的普通文本更重视的来对待。而使用<span>标签，那些不支持CSS的浏览器就不会特别的对待它。

　　讨厌的默认样式

　　以往，由于浏览器默认的缺省值非常的丑陋，设计者们也许会避免完全的使用标题标签。或者，因为缺省值的巨大尺寸而避免使用<h1>或<h2>，取而代之的是用更高数值的标题标签来实现更小的尺寸。

　　然而，需要重点强调的是，我们可以很简单的用CSS来改变这些标题标签——举个例子，一个< ;h1>并非一定是占满大半屏幕的巨大标版。在后面，我将证明用CSS来样式化标题标签是多么的简单，希望可以帮助你减轻巨大的恐惧。

　　对搜索引擎友好的

　　这是一个巨大的好处。搜索引擎喜欢标题标签。另一方面，一个<span>标签或者普通的加粗的段落标签却在意味着次要一点。适当的用<h1>到<h6>标记你的标题，只需要你的一点点努力，然而却让搜索引擎更容易的检索到你的页面，让人们最终能找到它们。

　　搜索引擎机器人会给予标题标签特别的关注——这是你可能放置一些关键词的地方。就象检索到 <title>和<meta>，它们会顺着标题标签往页面下面查找。如果你不使用这些标签，那么包含在里面的关键词将不会被认为是有价值的，从而被忽略掉。

　　所以只要付出一点点的努力，你就能增加人们基于页面的内容找到你的站点的可能性。听上去不错，不是吗？

　　关于标题的次序

　　在范例中，这个特别的标题是页面中最重要的，因为它是文档的标题。因此，我们使用最重要的标题标签，<h1>。顺应W3C的规范，一些人认为跳过数个标题级是个不好的使用。举个例子，想象我们在下面的页面：

　　<h1>文章标题</h1>

　　我们接下去的标题（如果不是用另一个<h1>重复的话）应该是<h2>，然后是<h3 >，等等。你也许不应该在<h1>后面跳过一级，直接跟上<h3>。我倾向于同意以上的观点，顺着行文保持级别的连续性，来构造一个排版结构。这样的话，给一个已经存在的页面添加标题和样式就更容易了，你会减少因使用超出的数字而导致的错误。

　　前面提到的，设计者也许会用<h4>来标签一个页面上最重要的标题，仅仅是因为它的缺省的字体尺寸不象<h1>那样令人生厌的巨大。但是记住，先结构，后设计。我们总是能用CSS来把标题样式化成任何我们喜欢的文字尺寸。

　　简单的样式

　　使用CSS，最容易做的事情就是给我们的标题设置不同的字体样式。我们可以建立一个CSS规则，它将把样式应用到页面中出现的所有<h1>标签（或者是整个站点，当使用一个外部样式表的时候）。随后，如果我们想要改变整个站点上所有出现<h1>标签的地方的颜色、尺寸、字体的话，我们所有需要做的事情就是修改一些CSS规则，然后它们将立即改变。听上去非常诱惑人，不是吗？

　　让我们认识一下我们自己的超级酷的标题：

<h1>Super Cool Page Title</h1>

　　用CSS改变颜色、字体和尺寸：

h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
}

　　页面上所有找到<h1>的地方都将应用Arial字体（或者是缺省的sans-serif字体）、24点大小以及兰色，就象图2-2显示的。

图2-2： 应用样式后的标题

　　接着，让我们在文字的下面增加一条1点宽的灰色边框，以增强清晰度（看图2-3）：

h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
padding-bottom: 4px;
border-bottom: 1px solid #999;
}

图2-3：带有灰色下边框的样式化标题

　　我们在文字的下方增加了一点补白，来让线条附近宽松一点。由于标题是一个块级元素，所以它的边界不仅仅到文字，而是与页面的水平宽度灵活的保持一致。

　　值得指出的是，这个特别的创建边框的方法是一个由三部分组成的语句：宽度、式样、颜色。试着改变它们的值，看看会产生什么不同的效果。

　　增加背景

　　背景可以增强标题的整洁效果。增加一点补白和背景颜色，我们就有了一个不需要图片的，但又很有样子的标题。如下：

h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #fff;
padding: 4px;
background-color: #696;
}

　　我们把文字改成白色，周围加上4个点的补白，再把背景改成绿色。就象图2-4显示的那样，这可以建立一个好看的绿色条来横贯页面，分隔段落。

图2-4： 带有背景色和补白的标题

　　背景和边框

　　在标题下面增加一个窄窄的边框，加上淡淡的背景色，你能够创建一种三维的效果，却不需使用图片。

　　这个CSS和前面的例子很相似，仅仅改变一点颜色和在底部增加一个2点宽的边框。

h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #666;
padding: 4px;
background-color: #ddd;
border-bottom: 2px solid #ccc;
}

　　试着创建各种不同的同色阴影，产生的立体效果如图2-5显示。

图2-5：带有背景和下部边框的标题

　　平铺的背景

　　当背景图片被一起加入后，就变得更富有创造性了。用Photoshop或者你喜欢的图片编辑器，创建一个10*10的图片，图片的顶部有黑色的边框，渐变的灰色一直到底部，象图2-6显示的。

图2-6：A 在Photoshop中创建10×10点大小的图片（被放大了）

　　我们可以用CSS把这个极小的图片平铺在<h1>的底部：

h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
padding-bottom: 14px;
background: url(10x10.gif?http://www.xvna.com) repeat-x bottom;
}

　　repeat-x会通知浏览器仅在水平方向平铺（repeat-y 将在垂直方向平铺）。我们再把图片设置在bottom，又增加了额外的padding-bottom，我们可以调节平铺的图片和上面文字之间的距离。（看图2-7）

图2-7： 带有平铺背景的标题

　　可替换的图标

　　处理行内的装饰性圆点和图标时，作为代替硬编码的方式，我们可以继续使用CSS的background属性来把图标设置在文字左边。这个方法可以迅速的改变整个站点的look and feel——升级一个CSS文件从而立刻改变整个站点的页面。

　　代码和前面平铺范例很相似：

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

　　这里，我们在左边留出了额外的空间（在那儿我们将显示一个图标），设为no-repeat，是为了让背景图片只显示一次（看图2-8）。我们把它放置在距离首部0点和距离顶部50%的位置上。

图2-8：A： 带有图标的标题

　　轻松升级

　　设想这样一个情景来代替前面的例子，我们已经在一个包含100个文档的站点中用<img>标签编码了这些图标。这些图标匹配着整个站点各个的题目。几个星期后，站点的所有者决定更改这个站点的look and feel。新的图标和老的图标有着不同的规格。天哪！我们将需要回到所有的100个文档里面，去改变每一个<img>标签，来更新它的image路径。对于一个项目的预算，这额外所需的时间就会推迟原先的期限。时间就是金钱。

　　把那些非必须的，装饰性的图片保持在CSS文件中，就可以使得更改背景图片只需几分钟，而不再需要几天，整个站点可以立刻得到升级。你应该开始明白把结构层和表现层的标记分离开的力量了吧。

　　可变换的效果

　　下面的技巧在某些情况下会很有用。这是我在2003年4月，用标准重构Fast Company magazine（www.fastcompany.com）站点时大量采用的方法。

　　我们在整个站点的大多数<h3>标题中使用了13*13点的小图标，就象这样：

<h3><img src="http://webdesign.chinaitlab.com/UploadFiles_8014/200604/20060417104607358.gif?http://www.xvna.com"
width="13" height="13" alt="*" /> FIRST IMPRESSION</h3>

　　我们用这种方法编码有两个原因。一个原因是，有各种各样的图标，它取决于标题的主题（读书俱乐部的一本书，引号标记着每天的引用，等等）。第二个原因是，当时，我们每个月都会根据当前发行的杂志封面来更换整个站点的配色方案。这种更换要成为可能，当然要用CSS。

　　要让这些图标随着页面上其它元素一起变换颜色，并不需要每次都创建新的图标。我们创建一个仅使用两种色彩的图标：白色和透明色（变换的色彩将被透出来）。图2-9显示了这些图标中的一个例子，它们被使用在首页上的每日引言中。

图2-9：A 13×13 点大小的透明图标（放大的）

　　透过图标中透明的部分，我们再次使用简便的CSS中background属性设置想让它透出来的颜色。另外我们还想让色彩仅仅出现在图标的后面，而不影响到标题的文字，因此我们又用下面的方法将规则仅施加于包含在<h3>内的<img>标签。

h3 img {
background: #696;
}

　　前面的代码确定了所有包含在<h3>内的<img>标签都有一个绿色的背景。色彩透过图片的透明部分显示出来，而白色的部分仍然保持白色。每个月，我们都能用一个不同的色彩值来升级CSS规则，从而改变整个站点中的每个标题以及相关联的图标的色彩。这就象变魔术！

　　对齐<img>标签

　　为了让图标和文本正确的排齐（我们想让它垂直居中），我们加入了以下CSS规则：

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

　　这样保证了包含于<h3>标签中的图片对齐于它的文本中点。图2-10显示了标题的效果。

图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?http://www.xvna.com) no-repeat 0 50%;
}

　　transparent_icon.gif?http://www.xvna.com将放置在我们在前面所指定的色彩上面，用的是同样的规则（看图2-11）——这里是#696，一个可爱的绿色。

图2-11：带有背景图片和色彩的标题

　　这个技巧使得放置一些与页面色彩相关联的小圆角或者装饰性的图片变得特别的方便。这些非必须的图片被完全的包含在CSS文件中，如果将来要升级，那将可以非常容易的改换。