图2-2： 应用样式后的标题
接着，让我们在文字的下面增加一条1点宽的灰色边框，以增强清晰度（看图2-3）：
图2-4： 带有背景色和补白的标题
在标题下面增加一个窄窄的边框，加上淡淡的背景色，你能够创建一种三维的效果，却不需使用图片。
这个CSS和前面的例子很相似，仅仅改变一点颜色和在底部增加一个2点宽的边框。
图2-5：带有背景和下部边框的标题
当背景图片被一起加入后，就变得更富有创造性了。用Photoshop或者你喜欢的图片编辑器，创建一个10*10的图片，图片的顶部有黑色的边框，渐变的灰色一直到底部，象图2-6显示的。
图2-6：A 在Photoshop中创建10×10点大小的图片（被放大了）
我们可以用CSS把这个极小的图片平铺在<h1>的底部：
图2-7： 带有平铺背景的标题
处理行内的装饰性圆点和图标时，作为代替硬编码的方式，我们可以继续使用CSS的background属性来把图标设置在文字左边。这个方法可以迅速的改变整个站点的look and feel——升级一个CSS文件从而立刻改变整个站点的页面。
代码和前面平铺范例很相似：
图2-8：A： 带有图标的标题
设想这样一个情景来代替前面的例子，我们已经在一个包含100个文档的站点中用<img>标签编码了这些图标。这些图标匹配着整个站点各个的题目。几个星期后，站点的所有者决定更改这个站点的look and feel。新的图标和老的图标有着不同的规格。天哪！我们将需要回到所有的100个文档里面，去改变每一个<img>标签，来更新它的image路径。对于一个项目的预算，这额外所需的时间就会推迟原先的期限。时间就是金钱。
把那些非必须的，装饰性的图片保持在CSS文件中，就可以使得更改背景图片只需几分钟，而不再需要几天，整个站点可以立刻得到升级。你应该开始明白把结构层和表现层的标记分离开的力量了吧。
下面的技巧在某些情况下会很有用。这是我在2003年4月，用标准重构Fast Company magazine（fastcompany）站点时大量采用的方法。
我们在整个站点的大多数<h3>标题中使用了13*13点的小图标，就象这样：
图2-9：A 13×13 点大小的透明图标（放大的）
透过图标中透明的部分，我们再次使用简便的CSS中background属性设置想让它透出来的颜色。另外我们还想让色彩仅仅出现在图标的后面，而不影响到标题的文字，因此我们又用下面的方法将规则仅施加于包含在<h3>内的<img>标签。
图2-10： 应用CSS背景的透明图片的效果
这个方法还有另一个值得注意的地方——不但可以用一个单独CSS代码块来指定图片背后要显示出的背景颜色，同样也可以在CSS代码块的内部指定。
举个例子，让我们回到前面“可替换的图标”例子，增加一些背景色彩：
图2-11：带有背景图片和色彩的标题
这个技巧使得放置一些与页面色彩相关联的小圆角或者装饰性的图片变得特别的方便。这些非必须的图片被完全的包含在CSS文件中，如果将来要升级，那将可以非常容易的改换。
无忧CMS，5ucms.org建站仿站首选！
| 上一篇：5ucms培训,CSS中的滑动门技术 下一篇：5ucms插件,捷足先登学用CSS：HTML结构化 |
|
| 本站声明：本网站所载文章等内容，目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权及其它问题，请在30日内与本网联系（Email：3876307#qq.com），我们将在第一时间删除内容。若原创内容转载请注明出处。 5ucms插件,用CSS定义标题的几个实例的关键词: |
|
相关分类
本类最新
