代码:
/*reset all*****************************/
* html {
filter: expression(document.execCommand("BackgroundImageCache", false, true));
}
*{ margin:0; padding:0; list-style:none;}
body{text-align:center; background:#FFF; font:12px/1.8 Verdana, Arial, "宋体";color:#666}
img{border:none;}
h1,h2,h3,h4,h5,h6,input,textarea{font-size:12px; color:#000}
h1{font-size:16px;}
h2{font-size:14px;}
table{border-collapse:collapse;border-spacing:0;}
fieldset{ border:none;}
small{font-weight:normal; color:#666; font-size:12px;}
address,em{font-style:normal;font-weight:normal;}
address{border-left:5px solid #CCC; padding-left:8px; margin:5px 0;}
caption{font-weight:bold; text-align:left;}
strong{color:#000}
form table{ margin:10px;}
form table td{margin:10px;vertical-align: top; color:#000}
img.imgBorder{ padding:2px; background:#FFF; border:1px solid #EBEBEB; margin:2px;}
img.imgBlock{ display:block}
a:link,a:visited{color:#000099;text-decoration:underline;}
a:hover,a:active{color:#000;text-decoration:none;}
/*commonality*****************************/
.clear{clear:both; height:0; overflow:hidden}
.hidden{display:none;}
.left{float:left;}
.right{float:right;}
.grayBorder{padding:5px;border:1px solid #EBEBEB; margin-top:10px; clear:both;height:1%;}
.grayBg{padding:5px; background:#F5F5F5}
.transverse li{display:inline;margin-right:5px;}
.transverse li a{white-space: nowrap;}
.upright li{display:block;margin-right:0; float:none}
.pager li{display:inline; margin-right:5px;padding:0 2px;}
.pager .on{color:#FF3300; }
.hot,.hot a{color:#FF6600}
.hotGreen,.hotGreen a{color:#7AC431}
.paddingLeft30{ padding-left:30px}
.font12Px{ font-size:12px;}
.font14Px{ font-size:14px; color:#000}
/*layout*****************************/
/*width 950px*/
#wrapper{margin:0 auto; text-align:left;}
#header,#content{clear:both;text-align:left;width:950px; margin:0 auto; padding:0 8px;}
#search,#footer{clear:both;}
代码:
按照功能来划分
1.设置公用的文本样式 typography.css，管理字体列表 大小行高 样式[粗斜]。『文本媒体』
2.设置公用的链接样式 link.css，管理四种链接l v h a 『链接媒体』
3.设置公用的布局样式 layout.css，这个省略 『布局代码』
4.设置公用的广告样式 flash.css， 适用于『动画媒体』
5.设置公用的图片样式 image.css ，适用于图片新闻内容『图片媒体』
6.设置公用的视频样式 video.css， 适用于 播放器 播放 『视频音频』
7.设置公用的其他样式 other.css， 适用于 未归类的媒体
8.设置公用的CSS hack hack.css， 适用于浏览器bug
如果是播客视频，电影网站，或者是博客相册，图片网站 一般对image.css 和 video.css要求就比较高，使用次数多。
通常情况下的普通网站 『文字』『链接』『广告』『布局』四类样式代码是必须的。
至于写成一个css文件还是四个css文件，那就仁者见仁智者见智了。
团队协作 按照功能来划分的话，建议写成四个文件。
如果是个人的话，cssxp也建议您写成四个文件。
理由是：4个文件合成一个文件，然后用topstyle之类的整理压缩css文件，再发布。
1>节省体积
2>代码混淆拥挤让模仿者难以下手，当然dw有个整理代码功能可以轻松还原了。
3>源码在自己手中，而发布仅是精简代码
如果是一个文件拆分成四个的话，目前没有软件可以帮助您区别分类，或者是胜任此项工作。
介绍完按功能划分之后（针对全站所有页面），再介绍按页面划分（针对站点每种类型页面）
复制内容到剪贴板
代码:
按照页面类型来划分
1.首页样式index.css 省略
2.子页样式page.css 放置二级栏目样式，
其中包括了混合『文字』『链接』『广告』『布局』样式
3.文章样式article.css 放置文章内容样式，
包括『文字』『图片』『视频』『广告』『布局』样式等等
4.评论样式comment.css 评论页面样式，可以参考网易评论
5.代码样式code.css 技术教程类的网站通常需要放置代码，参考csdn博客 blueidea
6.演示样式demo.css 省略
7.站点中其他类型的页面样式 other-page.css
当然还有其他的情形，笔者才疏学浅，就等您来添加上去了。
按照页面来划分，一人专注一个|一类页面即可，就好像行政区域划分一样。
介绍完了按页面类型划分之后，下面开始介绍按照指定页面 | 专题页面 内的布局块来划分
复制内容到剪贴板
代码:
按布局来划分
1.头部样式header.css 省略
2.面包屑样式crumb.css 省略
3.广告样式ad.css 省略
4.左列样式left.css （一行三列布局，很容易扩充成三行三列布局）
5.中列样式middle.css 省略
6.右列样式right.css 省略
7.第一行样式 row1.css （三行三列布局第一行样式）
8.第二行样式 row2.css （三行散列布局第二行交互样式altnate.css）
8.第三行样式 row3.css （三行散列布局第三行样式 可以同第一行，或者另起样式）
9.友情链接样式 friendlink.css | blogroll.css 省略
10.新闻公告样式 anounce.css 省略
11.底部版权样式footer.css 省略
12.页面中其他的区域块 unkown-zone.css
复制内容到剪贴板
代码:
以上三中样式分类管理是按照
一、全站『所有页面』 all page；
二、某一类型页面『多个页面』category page；
三、特定页面『一个页面』specific page。
这三中范围来划分的了。
体验css 提示您在设计css的时候先做好计划，看是要做全站的页面，还是某个专题页面了。根据不同的需求来选择不同的方式来管理。
tips:
1.搭积木『松耦合』的方式最为灵活多变，分开来写，最后发布上传的时候可以pack压缩一下。
2.好的设计与注释是密不可分的。
3.学会使用topstyle的style swapper “样式清道夫”功能来去除注释压缩代码
4.学会使用dreamweaver的“命令”>“套用源文件格式”来整理混乱的html & css代码