我对论坛中帖子的标题字体进行了重新定义,改变了字体的大小和色彩,有的会员问是如何修改的虽然已经回答,但随后想何不写个简单教程与大家分享,就算是抛砖引玉,下面切入正题:
.tpc_title { font-size: 12px;font-weight:bold;}
这个CSS定义大家都知道,这是对论坛帖子标题字体的定义,下面我们例举几个实例对其颜色、尺寸、字体进行修改,让你论坛帖子内的标题和内容截然不同,打造你自己的风格,非常诱惑人不是吗?
一、 先认识一下原始定义
.tpc_title { font-size: 12px;font-weight:bold;}
12点大小加粗字体,效果就象图 1 显示的
图 1 原始定义标题字体
二、 现在我们改变字体的颜色和尺寸,超级酷的标题:
.tpc_title {font-weight: bold; font-size: 14px;color: #ff0000;text-decoration: underline}
14点大小加粗字体,字体红色下划线,就象图 2 显示的。
图 2 改变字体颜色的标题
三、 接着,我们取消文字的下划线而是在下面增加一条1点宽的灰色边框,以增强清晰度。当然边框宽度和色彩你可以随意设置。(看图3)
.tpc_title {font-weight:bold;font-size: 14px;color: #ff0000;padding-bottom: 4px;border-bottom: 1px solid #999;}
图 3 有下边框的样式化标题
四、 增加背景:我们在文字的下方增加了一点补白,来让线条附近宽松一点。值得指出的是,这个特别的创建边框的方法是一个由三部分组成的语句:宽度、式样、颜色。试着改变它们的值,看看会产生什么不同的效果。背景可以增强标题的整洁效果。增加一点补白和背景颜色,我们就有了一个不需要图片的,但又很有样子的标题。
.tpc_title {font-weight:bold;font-size: 14px;color: #fff;padding: 4px;background-color: #ff0000;}
我们把文字改成白色,周围加上4个点的补白,再把背景改成红色。就象图4显示的那样,这可以建立一个好看的色彩条来横贯页面,分隔段落。
图 4: 带有背景色和补白的标题
五、 背景和边框:在标题下面增加一个窄窄的边框,加上淡淡的背景色,你能够创建一种三维的效果,却不需使用图片。这个CSS和前面的例子很相似,仅仅改变一点颜色和在底部增加一个2点宽的边框。见图5
.tpc_title {font-weight:bold;font-size: 14px;color: #666;padding: 4px;background-color: #ddd;border-bottom: 2px solid #ccc;}
图 5 带有背景和下部边框的标题
试着创建各种不同的同色阴影,产生的立体效果会不近相同。
六、 平铺的背景:当背景图片被一起加入后,就变得更富有创造性了。用Photoshop或者你喜欢的图片编辑器,创建一个10*10 的图片,图片的顶部有黑色的边框,渐变的灰色一直到底部,象图6-1显示的。

图6-1 在Photoshop中创建10×10点大小的图片
我们可以用CSS把这个极小的图片平铺在帖子标题字体的底部:
.tpc_title {font-weight:bold;font-size: 14px;color: #369;padding-bottom: 14px;background: url(10x10.gif) repeat-x bottom;}
repeat-x会通知浏览器仅在水平方向平铺(repeat-y 将在垂直方向平铺)。我们再把图片设置在bottom,又增加了额外的padding-bottom,我们可以调节平铺的图片和上面文字之间的距离。(看图6-2)
图6-2 带有平铺背景的标题
七、 标题文字前加入图标: 我们可以继续使用CSS的background属性来把图标设置在帖子标题文字左边。代码和前面平铺的背景范例很相似;比如把下面的这个图标

加入在标题前:
.tpc_title {font-weight:bold;font-size: 14px;color: #369;padding-left: 30px;background: url(icon.gif) no-repeat 0 50%;}
这里,我们在左边留出了额外的空间(在那儿我们将显示一个图标),设为no-repeat,是为了让icon.gif 背景图片只显示一次。我们把 icon.gif 放置在距离首部0点和距离顶部50%的位置上。(看图7)
图 7 带有图标的标题
这几个实例只是为了说明只要灵活的对CSS的应用,比如:标题的字体,大小,色彩,背景色,图标等你都可以根据自己的需要进行定义以打造你自己的风格,希望能抛砖引玉。
.