<html> <head> <title>CSS控制Title</title> <style> <!-- h1{ font-family:arial,sans-serif; font-size:28px; color:#336699; padding-bottom:4px; /*下方补白*/ border-bottom:1px solid #999999; /*线条 宽度 样式 颜色 */ } h1{ font-family:arial,sans-serif; font-size:28px; color:#ffffff; padding:4px; /*四周补白*/ background-color:#669966; } h1{ font-family:arial,sans-serif; font-size:28px; color:#666; padding:4px; /*四周补白*/ background-color:#ddd; border-bottom:3px solid #aaa; /*底边框*/ } h1{ font-family:arial,sans-serif; font-size:28px; color:#369; background-color:#000000; background-image:url(01.jpg) repeat-x bottom; /*底部背景 水平方向重复背景图片 设置在在文字底部*/ padding-bottom:10px; /*增加额外的底部补白*/ } h1{ font-family:arial,sans-serif; font-size:28px; color:#369; padding-left:32px; /*左侧移动*/ background:url(icon.gif) no-repeat 0 50%; /*把图标设置在文字左边*/ } /* img 可以通过CSS实现一些变幻的效果，例如在整个站点标题中大量使用小图标*/ body{ background-color:#000000; } h1{ font-family:arial,sans-serif; font-size:28px; color:#369; } h1 img{ background:#f22; vertical-align:middle; } --> </style> </head> <body> <h1><img src="bg.gif" border="0">Super Title CSS</h1> </body> </html>
img 这种编码有两个原因：一个原因是，有各种各样的图标，它取决于标题的主题。另一个原因：网站或许会根据当前的时间更换整个站点的配色方案，要让这些图标随着页面上其他元素一起变换颜色，并不需要每次都创建新的图标。创建一些透明的GIF图片即可。如上例，透过图标中透明的部分，使用CSS中的background属性设置其偷出来的颜色，便可以实现风格的改变。