很多人可能会觉得奇怪,这标题是什么意思,不过就一个样式表而已,还谈什么结构化?且听如下理由:
玩Web重构的朋友对CSS应该都不会陌生了,都知道CSS里面有几种常用的选择符的样式定义方法,才子将常用的几种大致讲解一下:
第一种是通配选择符,就是将所有的元素先预定义一个样式,如:
* { margin:0px; padding:0px; }
这样设置之后,所有的元素都已经将内边距和外边距都设置成0px了。
PS:才子从来不这样设置,因为它会直接影响ul和ol之类的列表元素的样式。
第二种是类型选择符,才子喜欢称它为标签选择符,就是通过标签元素的名称直接定义其样式,如:
body { font-size:14px; }
这样设置之后,所有body元素里的字体大小都是14px,但表格元素是个例外,要令表格元素字体大小也一样,要这样:
body,td { font-size:14px; }
第三种是ID选择符,通过一个唯一的ID标识符来定义某个元素的样式,如:
#nav { color:red; }
这样设置之后,nav元素下的字体都应该是红色的了。
应用如:<div id="nav">这里是内容</div>
第四种是类选择符,才子一般叫它class选择符,通过一个类来定义一种样式,让所有指定这个类的元素都生效,如:
.left { text-align:left; }
.right { text-align:right; }
上面定义了两个类,这样设置之后,指定哪个类的元素下的内容就将依据类里的样式定义来居左或居右排列了。
应用如:
<div class="left">这里是left内容</div>
<div class="right">这里是right内容</div>
常用的大概就这四种,还有一些什么属性选择符,包含选择符,我们平时应用得相对比较少,在此不多说了,有兴趣的朋友请在本站下载苏小雨的CSS 2.0中文手册(http://www.54caizi.org/post/handbook-download.html)。
下面来讲主题了,怎么样来结构化呢?
做一个网站首先要有一个构思,整站采用什么样的色系,什么字体,字体大小如何等等,那么我们就可以把这些最基本的标签选择符的样式先写入一个CSS文件,如base.css,这个CSS里把这个站需要用到的一些标签元素都做一个基本的样式设定,如body下的字体颜色和大小,超链接的样式等等,甚至是用不到的标签也设置一下都无妨,为什么呢?哈哈,因为可以重用嘛。下次再做其它的站的时候,base.css基本不需要写了,直接拿来用,最多也只是稍微改动一下下就行了,省不少事。
OK,再来看网站结构了。玩Web重构的朋友都知道,现在都用div+css来布局了,那么我们也将整个布局做一个单独的CSS文件,如layout.css,把布局全部定义好。大多数网站布局也都差不太多,都大致有以下几个模块吧,如header,nav,content,sidebar,footer等等,那就都定义一下样式吧,考虑到元素都有样式的继承性,其实有一些具体的属性我们已经不需要再次定义在ID选择符里了。因为它们可以继承base.css里的一些样式了。
这个是重点了,我们再来做一个类选择符的辅助CSS文件,如common.css,里面是些什么内容呢?才子把自己用的文件copy一段共享一下。^0^