用 CSS 樣式表美化博客模板
收藏此頁到365Key
Published on 08/31,2006
前面的文章講到了編輯博客模板所需的 HTML 基礎(chǔ)知識 和對博客進(jìn)行 模板布局的基本方法，文中給出的示例都是簡陋的，只能勉強將頁面框架構(gòu)建起來，很難達(dá)到美觀的要求。那么怎樣才能將博客模板修飾漂亮一些呢？方法有很多，但我推薦您使用 CSS 樣式表進(jìn)行控制。
CSS 樣式表是一種非常簡單易用的控制網(wǎng)頁外觀的語言，盡管它被稱作語言，但比那些編程語言簡單易用得多，因為它和 HTML 一樣是描述性的，而且采用直觀易懂的英文，比如 background-color: red; font-weight: bold; 等等。而且這些樣式代碼既可以方便地嵌入網(wǎng)頁內(nèi)部，又可以獨立于網(wǎng)頁存儲在一個單獨的樣式表文件中。在后面的情況下，只要網(wǎng)頁的布局結(jié)構(gòu)沒有發(fā)生變化，甚至可以為同一個博客模板設(shè)計多個樣式表文件，為博客實現(xiàn) 瞬間換膚效果。
講了這么多概括性的東西您也許還是不能立刻理解樣式表的用法，我們不妨先來看一個例子：
<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>博客文章標(biāo)題</h2>
<h3>文章小標(biāo)題</h3>
<p> 今天終于開始寫博客了，好高興啊?。∥业拇笞骷磳⒄Q生，敬請關(guān)注~。</p>
<blockquote>有一句話說得好：失敗只有一種，那就是半途而廢--</blockquote>
<p> 后面還沒有想好，還是下次再寫吧！感謝鳳凰衛(wèi)視，感謝 CCTV，感謝蓋茨大叔的暈倒死操作系統(tǒng)。</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>
查看實際顯示效果
看上去很眼熟吧，是的，這就是上一篇介紹模板布局時所用的例子，丑陋得讓人無法忍受，不僅配色非常糟糕，文字版式也過于貼近邊界，部分文字邊緣還有毛刺，整體視覺效果很差。怎樣改變這種情況呢？只要設(shè)計一個 CSS 樣式表附加在這個網(wǎng)頁上就會有所改觀，下面就是一段樣式代碼，您可以先憑自己的分析判斷這段代碼能夠?qū)崿F(xiàn)什么顯示效果。
首先將原來網(wǎng)頁中的 style 代碼去掉，因為我們將用另一種方式控制網(wǎng)頁的外觀：
<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">
其次在網(wǎng)頁代碼的 <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 { // 這對大括號里描述網(wǎng)頁的背景
margin-top:0px;
background:#f3f6ed url(http://www./templates/connections/img/rap.jpg) left repeat-y;
}
h1 { // 這對大括號里描述 <h1></h1> 標(biāo)簽中的部分
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> 標(biāo)簽中的部分
font-family: tahoma;
font-size: 26px;
padding-left: 10px;
}
h3 { // 這對大括號里描述 <h3></h3> 標(biāo)簽中的部分
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 { // 這對大括號里描述左側(cè)顯示文章的面板
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 { // 這對大括號里描述右側(cè)的面板
font-size: 12px;
color: #333;
width: 186px;
float: left;
}
#right h3 { // 這對大括號里描述右側(cè)面板中的 <h3></h3> 標(biāo)簽中的內(nèi)容
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 { // 這對大括號里描述右側(cè)面板中的無序列表
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 { // 這對大括號里描述右側(cè)面板中的無序列表子項目
color: #909D73;
font-size: 12px;
}
</style>
</head>
查看實際顯示效果
上面這段代碼看起來有些長，但您未必需要看懂每一行內(nèi)容，重要的是找到語法規(guī)律。點擊查看實際顯示效果時發(fā)現(xiàn)雖然網(wǎng)頁正文<body>...</body>之間的內(nèi)容沒有任何改動，但整個頁面的外觀都發(fā)生了很大變化，而這些完全是上面列出的樣式代碼的功勞。
那么怎樣才能讀懂它們呢？上面代碼中的說明也許能夠幫助您：首先對于 <p> <body> <h1> <blockquote> 這樣的標(biāo)簽，我們只要用 標(biāo)簽名 { ... } 這樣的代碼段就可以描述其中的樣式，比如 p {color: red;} 就表示位于 <p></p> 之間的文字顏色都是紅色的；而對于 <div id="left"></div> 這樣的標(biāo)簽，我們則可以用 #left {...} 去描述，比如 #left {font-size: 14px;} 就表示左側(cè)面板中默認(rèn)的文字大小是 14 像素的。您也許會奇怪我在上面把一個大括號中的內(nèi)容分寫在好幾行中，怎么現(xiàn)在都寫在一行里面了？其實這并不影響實際效果，因為樣式表語言是不在乎有沒有換行的，只要把要描述的屬性寫在一對大括號里就可以。其它的內(nèi)容大部分可以"望文生義"：color 表示文字顏色，background-color 表示背景顏色，font-size 表示字號大小等等。當(dāng)然了，這只是入門級的代碼，要設(shè)計出專業(yè)的博客模板還需長期實戰(zhàn)訓(xùn)練才行。
短短一篇網(wǎng)志實在很難把 CSS 樣式表的基礎(chǔ)知識都串起來，也不能指望它為您帶來多少價值。個人認(rèn)為只要讀過本文后您能夠從總體上了解樣式表的功能，并對學(xué)習(xí)它產(chǎn)生興趣和信心就 OK 了。
延伸閱讀：CSS2 中文手冊 by 蘇沈小雨，CSS2 中文手冊電子版，CSS 資料網(wǎng)站鏈接
