关于CSS在Blog中的应用（二）

3、利用CSS修饰其它元素

很多Web程序/设计人员都形成了这样一个良好的习惯，为他们的产品提供了CSS接口（也就是标签的id和class属性）。这就方便我们对其外观进行自定义，这里以Mybloglog的widget为例进行说明。

我们要想在自己的blog上显示哪些Mybloglog的用户访问了自己的页面，或者利用它跟踪链接，就需要插入Mybloglog提供的javascript代码，像这样的：

上面的代码已经支持部分自定义，如颜色和标题，但是如果你对下面的三行链接感到多余的话，就无能为力了；这时我们就需要通过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>

我们可以看到这些代码的标签都带有 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"字样

然后将这部分代码加入到blog模板的head部分或者存在某个.css文件中进行调用。经上面的CSS代码修饰后的Widget外观：

Mybloglog_Widget

4、用CSS替换传统方法的总结

下面的列表将帮助你用CSS替换传统方法，HTML属性以及相对应的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了，剩下的就是尝试，以及自己有没有时间花的问题了。

Tech Note

Search This Blog