CSS样式表也要玩结构化

时间：2023-03-01 16:18:01 | 来源：建站知识

时间：2023-03-01 16:18:01 来源：建站知识

很多人可能会觉得奇怪，这标题是什么意思，不过就一个样式表而已，还谈什么结构化？且听如下理由：

玩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中文手册()。

下面来讲主题了，怎么样来结构化呢？
做一个网站首先要有一个构思，整站采用什么样的色系，什么字体，字体大小如何等等，那么我们就可以把这些最基本的标签选择符的样式先写入一个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^

.clear { clear: both; } /*闭合浮动元素*/
.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }

.red { color: #F00; }
.green { color: #0F0; }
.blue { color: #00F; }
.yellow { color: #FF0; }
.orange { color: #F90; }
.gray { color: #696969; }

.bold { font-weight: bold; }
.hide { overflow: hidden; }
.none { display: none; }
.block { display: block; }
.inline { display: inline; }

.f11 { font-size: 11pt; }
.m5 { margin: 5px; }
.p8 { padding: 8px; }

哈哈，将一些我们比较常用的附加属性都定义了一下，方便我们随时调用，因为类选择符可以同时选用好几个，而且优先级比较高，比类型选择符和ID选择符都要优先，那么我们就可以不管类型选择符和ID选择符定义过什么，我们都可以用class选择符来重定义该元素的样式，如
<div id="nav" class="bold red p8">内容</div>
这样，不管nav的ID选择符里定义了什么内容，那么这个元素里的字体肯定是加粗的红色字体，内边距为8px。

讲到这里，相信大家也看到了才子说的所谓的结构化了，如同我们写程序时将表现层与数据层分开一样，三个CSS文件都非常重要，紧密关联，但似乎又很独立，只要layout.css文件加载成功，那么网站就应该已经不会很明显的变形了，而且这三个文件我们以后都可以很轻松的拿来重用，需要修改的地方不会太多，远比你重新为一个网站写一个完整的CSS文件要快得多。

以上是才子对CSS样式表的结构化的经验，欢迎各位讨论及拍砖！

风流才子 作品，转帖请保留原文地址链接，谢谢合作！
才子小窝：