.pageNava:link,.pageNava:hover,.pageNava:visted(Color:#36c;
font-weight:bold;font-size:120%;background:url(images/bg_siteMenu.jpg)#36c;
)
对于栏目导航，我们想给每个栏目连接加上背景色，并且有鼠标滑过和移出的效果。栏目导航区的html代码为：
<divclass="catalogNav">
<ul>
<li>
<Ahref="1">栏目1</A>
<li>
<Ahref="2">栏目2</A>
<li>
<Ahref="3">栏目3</A>
<li>
<Ahref="4">栏目4</A>
<li>
<Ahref="5">栏目5</A>
<li>
<Ahref="6">栏目6</A>
</li>
</ul>
</div>
栏目导航区对应的Css代码为：
.catalogNavul
(
margin-left:-30px;
list-style:none;
)
.catalogNavli
(
float:left;
background:#CCC;
line-height:30px;
border:solid1px#black;
)
.catalogNava
(
width:100%;
text-align:center;
height:30px;
)
.catalogNava:link
(
color:#666;
background:url(arrow_off.gif)#CCCno-repeat5px12px;
text-decoration:none;
)
.catalogNava:visited
(
color:#666;
text-decoration:underline;
)
.catalogNava:hover
(
color:#FFF;
font-weight:bold;
text-decoration:none;
background:url(arrow_on.gif)#F00no-repeat5px12px;
)
接下来我们还需要定义其他的站点独有的样式，如栏目标题、文章列表、文章正文、时间、注释、提示、错误等等各种样式，而且这些样式多以类和id来作为选择符。这些样式都是针对某个站点的，不适用于其他的站点，然后我们将这些样式保存为siteStyle.css文件。
这样我们就有了3个CSS文件。SiteComm.css：任何站点都可以使用的样式文件，定义了常用的html标签样式。SiteLayout.css：站点的布局文件，能适用于大多数的网站结构，具体细节需要调整。siteStyle.css：站点独有的样式文件，能显示出本站点独特的风格和适应于站点的内容。
然后我们采用外部调用法：将这些样式表与页面关联起来。
<LINKrev="stylesheet"media="all"href="css/SiteComm.css"type="text/css"rel="stylesheet">
<LINKrev="stylesheet"media="all"href="css/SiteLayout.css"type="text/css"rel="stylesheet">
<LINKrev="stylesheet"media="all"href="css/siteStyle.css"type="text/css"rel="stylesheet">
在符合XHTML标准的设计中，我们使用外部调用法，好处不言而喻，HTML文档会变得非常的小，CSS文件被存在浏览器的缓存中，仅仅需要下载一次即可，并且你只需要修改一个文件就可以改变整个网站的样式。
并且这样我们才能通过客户端脚本，或者服务器端代码方便地改变样式表的连接地址，而快捷地实现换肤功能。
