用 CSS 样式表美化博客模板
收藏此页到365Key
Published on 08/31,2006
前面的文章讲到了编辑博客模板所需的 HTML 基础知识 和对博客进行 模板布局的基本方法，文中给出的示例都是简陋的，只能勉强将页面框架构建起来，很难达到美观的要求。那么怎样才能将博客模板修饰漂亮一些呢？方法有很多，但我推荐您使用 CSS 样式表进行控制。
CSS 样式表是一种非常简单易用的控制网页外观的语言，尽管它被称作语言，但比那些编程语言简单易用得多，因为它和 HTML 一样是描述性的，而且采用直观易懂的英文，比如 background-color: red; font-weight: bold; 等等。而且这些样式代码既可以方便地嵌入网页内部，又可以独立于网页存储在一个单独的样式表文件中。在后面的情况下，只要网页的布局结构没有发生变化，甚至可以为同一个博客模板设计多个样式表文件，为博客实现 瞬间换肤效果。
讲了这么多概括性的东西您也许还是不能立刻理解样式表的用法，我们不妨先来看一个例子：
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>这是一个简单的博客模板页面</title></head>
<body>
<div id="banner" style="width:600px;height:200px;background-color:red;">
<h1>大家好，我也开始写博客啦</h1>
</div>
<div id="left" style="width:400px;background-color:green;float:left">
<h2>博客文章标题</h2>
<h3>文章小标题</h3>
<p> 今天终于开始写博客了，好高兴啊！！我的大作即将诞生，敬请关注~。</p>
<blockquote>有一句话说得好：失败只有一种，那就是半途而废--</blockquote>
<p> 后面还没有想好，还是下次再写吧！感谢凤凰卫视，感谢 CCTV，感谢盖茨大叔的晕倒死操作系统。</p>
</div>
<div id="right" style="width:200px;background-color:blue;float:left">
<h3>我的好友列表</h3>
<ul>
<li>傻大木</li>
<li>乔布什</li>
<li>芙蓉姐夫</li>
</ul>
</div>
</body>
</html>
查看实际显示效果
看上去很眼熟吧，是的，这就是上一篇介绍模板布局时所用的例子，丑陋得让人无法忍受，不仅配色非常糟糕，文字版式也过于贴近边界，部分文字边缘还有毛刺，整体视觉效果很差。怎样改变这种情况呢？只要设计一个 CSS 样式表附加在这个网页上就会有所改观，下面就是一段样式代码，您可以先凭自己的分析判断这段代码能够实现什么显示效果。
首先将原来网页中的 style 代码去掉，因为我们将用另一种方式控制网页的外观：
<div id="banner" style="width:600px;height:200px;background-color:red;">
<div id="left" style="width:400px;background-color:green;float:left">
<div id="right" style="width:200px;background-color:blue;float:left">
其次在网页代码的 <head>...</head> 之间添加下面的代码：
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>这是一个简单的博客模板页面</title>
<style>
body { // 这对大括号里描述网页的背景
margin-top:0px;
background:#f3f6ed url(http://www./templates/connections/img/rap.jpg) left repeat-y;
}
h1 { // 这对大括号里描述 <h1></h1> 标签中的部分
font-family: simhei;
font-size: 26px;
font-weight: bold;
text-align: right;
color: white;
margin-top: 0px;
padding-top: 50px;
padding-right: 30px
}
h2 { // 这对大括号里描述 <h2></h2> 标签中的部分
font-family: tahoma;
font-size: 26px;
padding-left: 10px;
}
h3 { // 这对大括号里描述 <h3></h3> 标签中的部分
font-family: tahoma;
font-size: 14px;
padding-left: 20px;
}
blockquote { // 这对大括号里描述文章中的块状引用
background: url(http://www./templates/connections/img/blockquote.gif) no-repeat left top;
padding: 20px;
font-size: 12px;
}
p { // 这对大括号里描述文章中的段落版式
line-height: 150%;
font-size: 14px;
}
#banner { // 这对大括号里描述模板顶部的 Banner
background: #fff url(http://www./templates/connections/img/top.jpg) no-repeat bottom;
margin-top: 0px;
margin-left: 0.2em;
height: 183px;
width: 760px;
border: #fc9 0px solid;
}
#left { // 这对大括号里描述左侧显示文章的面板
background:url(http://www./templates/connections/img/content_bg.gif) repeat;
width: 510px;
float: left;
color: #333;
margin-left: 12px;
margin-right: 12px;
padding: 10px;
overflow: hidden;
}
#right { // 这对大括号里描述右侧的面板
font-size: 12px;
color: #333;
width: 186px;
float: left;
}
#right h3 { // 这对大括号里描述右侧面板中的 <h3></h3> 标签中的内容
background: url(http://www./templates/connections/img/sidenav_top.jpg) no-repeat center;
font-size: 12px;
font-weight: bold;
color: #676E04;
margin: 0px;
text-align: center;
border: #ccc 0px solid;
height: 22px;
}
#right ul { // 这对大括号里描述右侧面板中的无序列表
list-style-type: none;
padding: 5px;
margin: 0;
font-size: 0.9em;
padding-bottom: 20px;
background: #F3F6ED url(http://www./templates/connections/img/sidenav_bottom.jpg) no-repeat bottom;
border: #E1D6c6 1px solid;
border-top: #f3f6ed 1px solid;
}
#right ul li { // 这对大括号里描述右侧面板中的无序列表子项目
color: #909D73;
font-size: 12px;
}
</style>
</head>
查看实际显示效果
上面这段代码看起来有些长，但您未必需要看懂每一行内容，重要的是找到语法规律。点击查看实际显示效果时发现虽然网页正文<body>...</body>之间的内容没有任何改动，但整个页面的外观都发生了很大变化，而这些完全是上面列出的样式代码的功劳。
那么怎样才能读懂它们呢？上面代码中的说明也许能够帮助您：首先对于 <p> <body> <h1> <blockquote> 这样的标签，我们只要用 标签名 { ... } 这样的代码段就可以描述其中的样式，比如 p {color: red;} 就表示位于 <p></p> 之间的文字颜色都是红色的；而对于 <div id="left"></div> 这样的标签，我们则可以用 #left {...} 去描述，比如 #left {font-size: 14px;} 就表示左侧面板中默认的文字大小是 14 像素的。您也许会奇怪我在上面把一个大括号中的内容分写在好几行中，怎么现在都写在一行里面了？其实这并不影响实际效果，因为样式表语言是不在乎有没有换行的，只要把要描述的属性写在一对大括号里就可以。其它的内容大部分可以"望文生义"：color 表示文字颜色，background-color 表示背景颜色，font-size 表示字号大小等等。当然了，这只是入门级的代码，要设计出专业的博客模板还需长期实战训练才行。
短短一篇网志实在很难把 CSS 样式表的基础知识都串起来，也不能指望它为您带来多少价值。个人认为只要读过本文后您能够从总体上了解样式表的功能，并对学习它产生兴趣和信心就 OK 了。
延伸阅读：CSS2 中文手册 by 苏沈小雨，CSS2 中文手册电子版，CSS 资料网站链接
