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