CSS的简单利用
网上有许多介绍CSS的文章、电子书，大部分都是专业人写的或是文章写得专业化。对于非专业，兴趣也不大，但需要了解一点CSS来修改BLOG模板等其它需要的人而言，这样的文章就不很好理解。我只想用通俗、简浅的话来说明下CSS在BLOG或简单个人主页中的利用，剩下的如何写代码就需要另外学习了。
1 CSS的作用
通常一个BLOG可以分为三个主要部分：1，数据库；2，主页面，常被定名为index.php；定义主页面属性的CSS文件，常被定名为style.css。
当然如何将这三大部分及其它小部分一起显示出来需要一个程序来控制，这个不在此说明。
从上面可以看出CSS文件是一个定义网页属性的文件，例如表格的位置、显示的方式，字体的颜色、大小等。从下图中可以清晰的了解三者的相互作用。
2 CSS如何作用
下面两段分别是一个BLOG中的index.php和style.css中的一段代码。
index.php codes:
<head><body>
<div id="content”>
<h3><?php single_cat_title();
single_month_title();
single_post_title();?>
</h3>
</div>
<div class="bSideItem">
<h3><?php //$Blog->disp(’name’, ‘htmlbody’) echo "About me"?>
</h3>
</div>
</body></head>
style.css codes:
.bSideItem {
padding: 5px 10px 1em 10px;
border-bottom: 1px solid #ddd;
}
.bSideItem h3 {
padding: 30px 0 0 45px;
height: 10px;
background: url(img/sidebar_icon.gif) no-repeat 20px 15px;
}
.h3 {
margin: 10px 0px 0px 0px;
padding-bottom: 4px;
width: 75%;
border-bottom: 1px solid #CCC;
}
在两个文件中都有h3，bSideItem命名的code。程序在style.css中给h3、bSideItem分别定义属性，在index.php中只写代码名就完成了。
注意：css文件中“bSideItem h3”表示的是一定要在bSideItem下的h3才会使用的属性，这里h3的属性和下面的h3属性不同。这样的好处就是我们可以在想要特别标注的地方以此方法定义，又不影响整个模板的结构。而且这种做法在代码很长时会可以简化程序。
3 CSS的特点
CSS全称Cascade Style Sheet，用中文解释就是瀑布式的页面。
这种特点决定了以CSS写的程序只要在文件A处定义属性，下面所有有此代码的地方都会统一。如果在A处之后再次以另一种属性定义相同的代码B，那么B及以后有此代码的地方则以B属性定义。
只要在这三个基本点上，认识index.php，style.css中的各代码，就能简单的修改自己的模板、主页了。
youyou said,
November 21, 2005 @ 10:04 pm
我看到CSS就头大：P
————
Re youyou by tail
我也是，只能拿些现成的代码用用。。