《用css定义标题的几个实例》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、用CSS定义标题的几个实例作者：阿宏2005-4-2118:21:15·原文：WhatistheBestWaytoMarkuptheTitleofaDocument?·说明：本文是《WebStandardsSolutions:TheMarkupandStyleHandbook》一书中的一章。书号：ISBN:1590593812。我们会陆续翻译此书中有价值的章节。·原作者：DanCederholm·翻译：阿宏简单的样式使用CSS，最容易做的事情就是给我们的标题设置不同的字体样式。我们可以建立一个CSS规则，它将把样式应

2、用到页面中出现的所有

标签（或者是整个站点，当使用一个外部样式表的时候）。随后，如果我们想要改变整个站点上所有出现

标签的地方的颜色、尺寸、字体的话，我们所有需要做的事情就是修改一些CSS规则，然后它们将立即改变。听上去非常诱惑人，不是吗？让我们认识一下我们自己的超级酷的标题：

SuperCoolPageTitle

的地方都

3、将应用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:1pxsolid#999;}图2-3：带有灰色下边框的样式化标题我们在文字的下方增加了一点补白，来让线条附近宽松一点。由于标题是一个

4、块级元素，所以它的边界不仅仅到文字，而是与页面的水平宽度灵活的保持一致。值得指出的是，这个特别的创建边框的方法是一个由三部分组成的语句：宽度、式样、颜色。试着改变它们的值，看看会产生什么不同的效果。增加背景背景可以增强标题的整洁效果。增加一点补白和背景颜色，我们就有了一个不需要图片的，但又很有样子的标题。如下：h1{font-family:Arial,sans-serif;font-size:24px;color:#fff;padding:4px;background-color:#696;}我们把文字改成白色，周围

5、加上4个点的补白，再把背景改成绿色。就象图2-4显示的那样，这可以建立一个好看的绿色条来横贯页面，分隔段落。图2-4：带有背景色和补白的标题背景和边框在标题下面增加一个窄窄的边框，加上淡淡的背景色，你能够创建一种三维的效果，却不需使用图片。这个CSS和前面的例子很相似，仅仅改变一点颜色和在底部增加一个2点宽的边框。h1{font-family:Arial,sans-serif;font-size:24px;color:#666;padding:4px;background-color:#ddd;border-bott

6、om:2pxsolid#ccc;}试着创建各种不同的同色阴影，产生的立体效果如图2-5显示。图2-5：带有背景和下部边框的标题平铺的背景当背景图片被一起加入后，就变得更富有创造性了。用Photoshop或者你喜欢的图片编辑器，创建一个10*10的图片，图片的顶部有黑色的边框，渐变的灰色一直到底部，象图2-6显示的。图2-6：A在Photoshop中创建10×10点大小的图片（被放大了）我们可以用CSS把这个极小的图片平铺在

的底部：h1{font-family:Arial,sans-serif;font-siz

7、e:24px;color:#369;padding-bottom:14px;background:url(10x10.gif)repeat-xbottom;}repeat-x会通知浏览器仅在水平方向平铺（repeat-y将在垂直方向平铺）。我们再把图片设置在bottom，又增加了额外的padding-bottom，我们可以调节平铺的图片和上面文字之间的距离。（看图2-7）图2-7：带有平铺背景的标题可替换的图标处理行内的装饰性圆点和图标时，作为代替硬编码的方式，我们可以继续使用CSS的background属性来把图标

8、设置在文字左边。这个方法可以迅速的改变整个站点的lookandfeel——升级一个CSS文件从而立刻改变整个站点的页面。代码和前面平铺范例很相似：h1{font-family:Arial,sans-serif;font-size:24px;color:#369;padding-left:30px;background:url(icon.gif)