关于CSS在Blog中的应用（二）
3、利用CSS修饰其它元素
很多Web程序/设计人员都形成了这样一个良好的习惯，为他们的产品提供了CSS接口（也就是标签的id和class属性）。这就方便我们对其外观进行自定义，这里以Mybloglog的widget为例进行说明。
我们要想在自己的blog上显示哪些Mybloglog的用户访问了自己的页面，或者利用它跟踪链接，就需要插入Mybloglog提供的javascript代码，像这样的：
<script type="text/javascript"
src="http://pub.mybloglog.com/comm2.php?mblID=2007071601460924;
c_width=180&
c_sn_opt=y&
c_rows=5&
c_img_size=f&
c_heading_text=Recent+Readers&
c_color_heading_bg=005A94&
c_color_heading=ffffff&
c_color_link_bg=E3E3E3&
c_color_link=005A94&
c_color_bottom_bg=005A94">
</script>
src="http://pub.mybloglog.com/comm2.php?mblID=2007071601460924;
c_width=180&
c_sn_opt=y&
c_rows=5&
c_img_size=f&
c_heading_text=Recent+Readers&
c_color_heading_bg=005A94&
c_color_heading=ffffff&
c_color_link_bg=E3E3E3&
c_color_link=005A94&
c_color_bottom_bg=005A94">
</script>
上面的代码已经支持部分自定义，如颜色和标题，但是如果你对下面的三行链接感到多余的话，就无能为力了；这时我们就需要通过CSS定义其是否显示。在javascript代码中找不到CSS接口，需要利用浏览器打开包含该代码的页面将脚本代码解释成纯html代码，然后通过查看该页面的源文件，找到这些内容所对应的代码，比如这里是：
<table id="MBL_COMM"><tbody> //table的CSS接口 id="MBL_COMM"
<tr><td colspan='2' class='mbl_h'>Recent Readers</td></tr>
<tr id='tr1'> //tr的CSS接口 id="tr#"
<td id='tdd11' class='mbl_img'><img /></td>
<td id='tdd21' class='mbl_mem'> //td的CSS接口 id="tdd##"
<a href='#'></a></td></tr>
<tr id='tr2'>
<td id='tdd12' class='mbl_img'><img /></td>
<td id='tdd22' class='mbl_mem'><a href='#'></a></td>
</tr>
<tr id='tr3'>
<td id='tdd13' class='mbl_img'><img /></td>
<td id='tdd23' class='mbl_mem'><a href='#'></a></td>
</tr>
<tr id='tr4'> <td id='tdd14' class='mbl_img'><img /></td>
<td id='tdd24' class='mbl_mem'><a href='#'></a></td>
</tr>
<tr id='tr5'>
<td id='tdd15' class='mbl_img'><img /></td>
<td id='tdd25' class='mbl_mem'><a href='#'></a></td>
</tr>
<tr> //最后的三个tr标签对应最下边的三行链接
<td class=mbl_fo_hidden onclick=gU(2); colSpan=2><a
href="http://www.mybloglog.com/buzz/community/MynersDays/">
View Reader Community</a></td></tr>
<tr>
<td class=mbl_fo_hidden onclick=gU(5); colSpan=2><a
href=http://www.mybloglog.com/buzz/yjoin/?ref_id=2007071601460924;>
Join this Community</a></td></tr>
<tr>
<td class=mbl_fo_hidden onclick=gU(3); colSpan=2><a
href="http://www.mybloglog.com/">(provided by MyBlogLog) </a></td></tr>
</tbody></table>
<tr><td colspan='2' class='mbl_h'>Recent Readers</td></tr>
<tr id='tr1'> //tr的CSS接口 id="tr#"
<td id='tdd11' class='mbl_img'><img /></td>
<td id='tdd21' class='mbl_mem'> //td的CSS接口 id="tdd##"
<a href='#'></a></td></tr>
<tr id='tr2'>
<td id='tdd12' class='mbl_img'><img /></td>
<td id='tdd22' class='mbl_mem'><a href='#'></a></td>
</tr>
<tr id='tr3'>
<td id='tdd13' class='mbl_img'><img /></td>
<td id='tdd23' class='mbl_mem'><a href='#'></a></td>
</tr>
<tr id='tr4'> <td id='tdd14' class='mbl_img'><img /></td>
<td id='tdd24' class='mbl_mem'><a href='#'></a></td>
</tr>
<tr id='tr5'>
<td id='tdd15' class='mbl_img'><img /></td>
<td id='tdd25' class='mbl_mem'><a href='#'></a></td>
</tr>
<tr> //最后的三个tr标签对应最下边的三行链接
<td class=mbl_fo_hidden onclick=gU(2); colSpan=2><a
href="http://www.mybloglog.com/buzz/community/MynersDays/">
View Reader Community</a></td></tr>
<tr>
<td class=mbl_fo_hidden onclick=gU(5); colSpan=2><a
href=http://www.mybloglog.com/buzz/yjoin/?ref_id=2007071601460924;>
Join this Community</a></td></tr>
<tr>
<td class=mbl_fo_hidden onclick=gU(3); colSpan=2><a
href="http://www.mybloglog.com/">(provided by MyBlogLog) </a></td></tr>
</tbody></table>
我们可以看到这些代码的标签都带有 class 或者 id ，这就是我们需要的CSS接口。下面我们就为这些class或id编写CSS代码，改变其显示效果。
/* Mybloglog Styles
---------------------------------------*/
.mbl_fo_hidden{display:none;} //隐藏"View Reader Community"字样
.mbl_join_img{display:none;} // 隐藏"Join this Communtiy"字样
#tr0{display:none;} // 隐藏"provided by MyBlogLog"字样
---------------------------------------*/
.mbl_fo_hidden{display:none;} //隐藏"View Reader Community"字样
.mbl_join_img{display:none;} // 隐藏"Join this Communtiy"字样
#tr0{display:none;} // 隐藏"provided by MyBlogLog"字样
然后将这部分代码加入到blog模板的head部分或者存在某个.css文件中进行调用。经上面的CSS代码修饰后的Widget外观：
4、用CSS替换传统方法的总结
| HTML属性 | CSS方法 | 说明 |
| align="left" align="right" | float: left; float: right; | 应用CSS可以浮动任何元素，但必须给该元素设置固定宽度 |
| marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" | margin: 0; | margin 适用于任何元素，并且可以分别指定元素的top, right, bottom和left的margin值 |
| vlink="#333399" alink="#000000" link="#3333FF" | a:link #3ff; a:visited: #339; a:hover: #999; a:active: #00f; | 在HTML中，链接的颜色作为body的一个属性值定义。整个页面的链接风格都一样。使用CSS的选择器，可以让页面不同部分的链接实现不同样式 |
| bgcolor="#FFFFFF" | background-color: #fff; | 通过CSS可以为任何元素定义背景色，不仅仅局限于body和table元素 |
| bordercolor="#FFFFFF" | border-color: #fff; | 任何元素都可以设置边框，并分别定义top, right, bottom和left属性 |
| border="3" cellspacing="3" | border-width: 3px; | 用CSS可以统一定义table的边框样式，或者分别定义top, right, bottom和left的线条颜色和类型；也可以使用 table, td or th 这些选择器。如果设置无边框，可以使用： border-collapse: collapse; |
| <br clear="left"> <br clear="right"> <br clear="all"> | clear: left; clear: right; clear: both; | 许多2列或者3列布局都使用 float属性来定位。如果你在浮动层中定义了背景颜色或者背景图片，你可以使用clear属性. |
| cellpadding="3" vspace="3" hspace="3" | padding: 3px; | padding适用于任何元素，同样可以分别设置top, right, bottom, left。padding是透明的 |
| align="center" | text-align: center; margin-right: auto; margin-left: auto; | Text-align 适用于文本；像div，p这样的块级元素可通过margin-right: auto; 和margin-left: auto; 实现水平居中 |
关于CSS在Blog中的应用就先讲这些。 个人觉得了解这些已经足矣应用CSS打理自己的Blog了，剩下的就是尝试，以及自己有没有时间花的问题了。
