分类

HTML模板和CSS基准样式(二)

作者: 阮一峰

日期: 2009年2月 8日

腾讯课堂 NEXT 学院

今天,我要写的是CSS文件的模块化。

如果你看过CSS文件,就会知道很难看懂它。每个CSS文件有许多行,每一行就是一条命令,可以放在文件的任何位置,都能够同样生效,而且后面的行随时可以覆盖前面的行的设置。所以,阅读CSS文件就好像猜谜一样,必须努力将不同的线索拼起来,令人非常痛苦,这直接导致了日后难于维护和修改。

考虑到这一点,很早就有人提出了CSS文件的模块化,就是将相关的设置都放在一起。一般来说,CSS中的设置可以分成下面几个模块:

* typography(字体)

* colour(颜色)

* link(链接)

* forms(表单)

* layout(布局)

* navigation(导航)

这些模块当然不是固定不变的,你可以根据自己的需要进行增删。有时候,单单一个模块中就有许多行,这时候,你就可以把它独立出来,作为一个单独的CSS子文件,然后在父文件中进行调用。

比如,昨天的HTML模板中,调用CSS文件是这样写的:

@import url(style.css);

在这里,style.css就是父文件,然后我们在其中调用子文件:

/* typography styles */
@import url("typo.css");

/* form elements */
@import url("forms.css");

/* main layout */
@import url("layout.css");

/* navigation */
@import url("horizontal-nav.css");

/* colour scheme */
@import url("skin.css");

除了上面这些模块以外,CSS中有些设置是全局性的,主要用于覆盖浏览器的默认样式,这被称作CSS基准样式。我们可以把基准样式单独做成一个base.css,将它也加入主样式表。

/* basic styling */
@import url("base.css");

网上有很多别人已经写好的CSS基准样式,我下面采用的是Crucial Web Hosting提供的一份,我觉得写得比较规范,内容也很充分。

/***** Global Settings *****/

html, body {
border:0;
margin:0;
padding:0;
}

body {
font:100%/1.25 Arial, Helvetica, sans-serif;
}

/***** Headings *****/

h1, h2, h3, h4, h5, h6 {
margin:0;
padding:0;
font-weight:normal;
}

h1 {
padding:30px 0 25px 0;
letter-spacing:-1px;
font-size:2em;
}

h2 {
padding:20px 0;
letter-spacing:-1px;
font-size:1.5em;
}

h3 {
font-size:1em;
font-weight:bold;
}

/***** Common Formatting *****/

p, ul, ol {
margin:0;
padding:0 0 1.25em 0;
}

ul, ol {
padding:0 0 1.25em 2.5em;
}

blockquote {
margin:1.25em;
padding:1.25em 1.25em 0 1.25em;
}

small {
font-size:0.85em;
}

img {
border:0;
}

sup {
position:relative;
bottom:0.3em;
vertical-align:baseline;
}

sub {
position:relative;
bottom:-0.2em;
vertical-align:baseline;
}

acronym, abbr {
cursor:help;
letter-spacing:1px;
border-bottom:1px dashed;
}

/***** Links *****/

a,
a:link,
a:visited,
a:hover {
text-decoration:underline;
}

/***** Forms *****/

form {
margin:0;
padding:0;
display:inline;
}

input, select, textarea {
font:1em Arial, Helvetica, sans-serif;
}

textarea {
width:100%;
line-height:1.25;
}

label {
cursor:pointer;
}

/***** Tables *****/

table {
border:0;
margin:0 0 1.25em 0;
padding:0;
}

table tr td {
padding:2px;
}

/***** Wrapper *****/

#wrap {
width:960px;
margin:0 auto;
}

/***** Global Classes *****/

.clear { clear:both; }
.float-left { float:left; }
.float-right { float:right; }

.text-left { text-align:left; }
.text-right { text-align:right; }
.text-center { text-align:center; }
.text-justify { text-align:justify; }

.bold { font-weight:bold; }
.italic { font-style:italic; }
.underline { border-bottom:1px solid; }
.highlight { background:#ffc; }

.wrap { width:960px;margin:0 auto; }

.img-left { float:left;margin:4px 10px 4px 0; }
.img-right { float:right;margin:4px 0 4px 10px; }

.nopadding { padding:0; }
.noindent { margin-left:0;padding-left:0; }
.nobullet { list-style:none;list-style-image:none; }

有了HTML模板和CSS基准样式以后,最后就剩下一个页面布局的问题了,这将是我明天要写的内容。

(完)

留言(4条)

CSS的模块化,尤其是按这种类别细分的模块化是否合理还很有争议。

另外如果真的要模块化的话,也没必要划分那么多小文件
最好是一个文件里面用注释分开不同的部分。
文件越多对服务器的压力也越大。

另外这种写法的缺点还有就是同样的选择器要分别写在不同的部分,增加了修改的难度。
我比较推荐写法就是按选择器逐级缩进的写法,把每个都写全,比如
ul#nav{}
ul#nav li.menu_item{}
ul#nav li.menu_item a{}
这样对于维护来说已经足够清晰了。

text-center { text-align:center; }

这个只支持IE吧,firefox没有得到支持。

引用老犁的发言:

text-center { text-align:center; }

这个只支持IE吧,firefox没有得到支持。

text-center前面有一个点,表示这是一个class的名称,所以firefox也是可以支持的。
引用chumsdock的发言:
如果真的要模块化的话,也没必要划分那么多小文件 最好是一个文件里面用注释分开不同的部分。 文件越多对服务器的压力也越大。

我在文章中只是举个例子,实际上确实没有必要分得那么细。最多二三个子文件应该就够了。

CSS模块化的另一个好处就是很便于换肤。

我只能说:佩服!

阮先生涉猎的领域太宽了,就这点学习和探索的精神已经很值得学习了。

我要发表看法

«-必填

«-必填,不公开

«-我信任你,不会填写广告链接