概要

让我们大致上回顾一下,为什么使用标题标签(<h1>到<h6>)来标记页面内的标题会比较好.

方法A:

可视化浏览器会在禁用或不支持css功能时,以一般文字相同的样式显示标题,非视觉浏览器则完全不知道标题和内文文字之间的差别.
搜索引擎不会特别重视以<span>标记的标题
我们能制定独特的样式,但是我们在新增标题时,却会被heading类困死.

方法B:

可视化浏览器只会用粗体显示内容,继续使用预设的字体大小.
我们无法为标题加上和内文不同的独特样式
搜索引擎同样不会特别重视以<p><b>创建的标题的内容.

方法C:

传达了标题标签中的文字确切的含义.
不管是可视化还是非可视化浏览器不管读到什么样式都会正确的处理标题内容
搜索引擎会重视标题标签中的关键字.

技巧延伸

这里我们将采用方法C,并用它来实验一些简单的css样式.我们将完全发挥标题标签独特性的优势.我们可以非常安心的使用标题标签,因为不管在什么浏览器和设备上,都能正确的处理标题内容.接下来我们来给他装扮装扮,然后带它上街(如果你能够带着一个html标签上街的话....)

简单的样式

使用css,最简单最容易实现的效果就是为标题设置不同的字型.我们可以编写一个css规则,然后套用到页面中所有的<h1>标签上(如果你用到了外部样式表,那就可以把样式套用到整个网站上).如果在稍后的时间里想要改变整个网站里每个<h1>的颜色,大小或者字体,那么只需要修改几条css规则就行了,而且修改之后的效果能够马上看到!这听起来很诱人,对吧?

让我们超级酷的标题来告诉我们自己吧:

<h1>Super Cool Page Title</h1>

让我们用css来改变它的颜色,字体和大小吧:

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

就像我们刚才所说的,非常简单,整个页面的所有<h1>都被设置成24像素大小,蓝色的Arial(或者默认的sans-serif)字体,如图 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:加上灰色底边的标题样式示例

我们在文字底部多留了些内补丁,使得下面的边线不至于呼吸困难.因为标题标签是块级元素,因此边框会不止填满文字底部,还会继续向右边延伸,直到填满整个页面宽度.

另外值得一提的是,我们使用了边框的简写法 — 就是在一条声明中同时定义了宽度,样式,颜色.你可以试试看其他的设定值,看看有什么别的效果.