css布局精简代码经验杂谈一。

希望大家在写css的时候，尽量精简一下代码，最近下了一个chinaren模板二手制作，发现原来的css编写很啰嗦，重复定义非常多修改的时候相当头痛。如果一个css文件太大，每个用户都要下载速度差别还是很明显的。下面我简单建议一下，：

1,css的定义名，尽可能的不超过4个字母：

  其实4个字母已经可以满足各种名称的千变万化了。这个是我在9rules和一些设计师讨论得出的结论，我们一直在致力于最高效执行的css编写方式，首个字母可以代表一类比较明了的意思，下面的注释/*xxx*/纯粹为了解释，真的写网页的时候千万不要这么废话哦，比如：
一个背景颜色color定义，我常常写为

.cw{background:#fff} /*白色white背景，这个相信最常用，我常常独立写出来，需要时就用*/
.chu1{background:#333}/*灰色hui背景，按照DW的色谱从深到浅按1~n数字排列，作为中国人hui这个拼音自己好懂*/
.chu3{background:#666}

我在所有的单独颜色css定义都使用c打头，就是为了方便统一查看，这类定义经常可以使用在class="w100 cw"这样的灵活组合编写方式中，其实这类定义我都喜欢在css表里写在一个区里，比如

/*颜色*/
.cw{background:#fff} .chu1{background:#333} .chu3{background:#666}
/*字体颜色*/
.zcw{color:#fff} .zch1{color:#333} .zch2{color:#666}

个人喜欢写成一行，同时也不喜欢留一个;号在后面浪费空间，一个;分号虽然看起来没什么，但是很多;号留在后面就会占用很多空间了。网页代码空格也算一串代码占用空间的，所以不分行，写得挤一些占用空间少。有人说这样不方便以后修改，其实这并不难看，原因有二：a，这种单独属性定义，很少需要改动，如果你需要经常改动的，建议另起一行，方便以后查看。b，如果是用专业的网页编辑工具比如Dreamweaver 8之类的，定义名cw和属性{background}还有:及属性值#fff是不同颜色显示，如：.cw{background:#fff} 很容易看清楚！万一少一个：号，或者多项属性定义少一个；号，颜色立刻大片不对，这对我们这种喜欢以形象思维方式来制作网页的设计师很方便。

2，利用好总集定义（常用的东东一起）和组合定义方式！这个是重点：


  很多的常用标签 和使用的属性的定义比如整个网站的最基本字体颜色，大小，连接字体的属性等等，我们经常重复使用的，最好能在前面一起定义完，比如：

  html,body,table,td,a{font-size:12px;color:#333;font-family:"宋体", Arial, Helvetica, sans-serif;letter-spacing:normal}
a:hover{color:#cc000e}
  /*注意不同的定义名用,分隔这样以后除了特殊要求，基本不用再重复定义字体的这些属性，table和td之所以在这里强调是因为表格标签经常不能继承css属性，写多几个词以后会少很多奇怪的问题，a:hover会继承a的其他定义，无需啰嗦*/
顺便写点其他总集定义：

* {margin:0;padding:0;border:0} /*这个定义所有的页面元素，非常狠不过写了网页很“稳当”以后稀奇古怪的小问题比如这个撑开点，那个框框不靠边等等麻烦事就少，放在css最顶部，以后特殊定义写在后面就可以优先执行*/

body{background:#fff;text-align:center;word-break:break-all}  /*白色body是最常用的，后面这个定义配合容器使用margin:0 auto 布局居中必备*/

table{border-collapse:collapse} /*表格无边框线*/

li{list-style:none;float:left} /*我习惯所有的 <Li> 标签全部用来做横向排列，其实这也是国际css布局用法，以后经常用来做内部的过去表格td做的工作list-style:none如果没有它li容器左边都会有个小点*/

a{text-decoration:none;line-height:18px} /*链接文字的基本定义，行高18~21px对最常用的12px/9pt字体阅读比较紧凑而又舒服*/

.fl{float:left} .fr{float:right} /*很常用的浮动靠左或者右边的定义，像cw一样经常插入组合定义中*/

.tl{text-align:left} .tm,body{text-align:center} .tr{text-align:right} .cl{clear:left}.cm{clear:both}.cr{clear:right} /*都是以后组合写法经常用的参数*/

.hd,li{overflow:hidden} /*很有效的防止内容溢出和容器之间撑开的参数！可以说是css布局稳定的根本之一，独立写出来是为了方便关键时刻就用，如果有什么标签最经常需要防止互相撑爆的和它写在一起，比如我经常把li写在这里，不然横向排列经常因为内容撑开把布局破坏*/

/*间隔*/
.pd5,.haha{padding:5px}  .mg5{margin:5px}  /*别小看这个独立定义，padding:5px这类是我们经常碰到的，如果每次都要写在那些定义名后面多了就比不上在class="xxx pd5"这个来得节省代码,当然如果有个定义名经常用到这个属性，写在它那里或者像haha这样集合进来写又比每次都class="xxx pd5"来得精炼，总之灵活运用！*/

/*字体大小*/
.z11{font-size:11px}  /*有的英文字用11px就是比较精致[email=#@!#*&*/]#@!#*&*/[/email]
  /*边框线*/
.bk,.haha{border-style:solid;border-color:#999}
.bk1{border-width:0 1px}
.bk2{border-width:1px 5px 2px 3px}
  有的时候上下左右有2~三个方向需要不同边框，或者是边框粗细不同，但是颜色和样式相同，比如都是#999色实线的时候，在后面加个如bk1或者bk2这样的就可以表达出来了，代码也简单例如下面的例子：

1. <div class="haha bk1">哈哈哈</div>
   
2.   <div class="haha bk2">哈哈哈哦</div>

复制代码

就可以很节省代码的实现两种变化甚至你可以直接写在如<div style="border-width:9px 0">这样。不过这个直接在容器标签用style定义最好尽可能避免，特殊的时候可以用，它会增加页面体积，每次别人重新回复或者刷新的时候都会重新执行下载这段代码，尽管它是不变的！而如果你写在css表中，css表下载在他的电脑里面当浏览器执行过载入内存的时候就无需再下载了，后者速度当然快！
  剩下的是工作经验了，经常根据你的习惯发展更精炼的写法吧。

3，一个标签下的同类标签重复定义的精炼表达方式：

我们经常看到这样的写法，代码冗长而效率低下：

1. <style><!--写在css表-->
   
2. #t{}   .ta{width:200px;text-align:left}  .tb{width:250px;background:#ccc}  .haha{width:50px;float:left}  .kk{color:#198080}
   
3. .kk2{color:#ff0000}
   
4. </style>
   
5. 
   
6. <div id="t"><!--页面-->
   
7.     <ul class="ta">
   
8.        <li class="haha">列a_1</li>
   
9.        <li class="haha">列a_2</li>
   
10.        <li class="haha">列a_3</li>
    
11.     </ul>
    
12.     <ul class="ta">
    
13.        <li class="haha">列b_1</li>
    
14.        <li class="haha">列b_2</li>
    
15.        <li class="haha">列b_3</li>
    
16.     </ul>
    
17.     <ul class="tb">
    
18.         <p class="kk">行a1</p>
    
19.         <p class="kk2">行a2红色字体</p>
    
20.         <p class="kk">行a3</p>
    
21.     </ul>
    
22. </div>

复制代码

如果我们改成下面这样来写，可以精简很多的代码，提高页面执行效率：

1. <style><!--写在css表-->
   
2. #t{}  #t ul{width:200px;text-align:left}  #t li{width:50px;float:left}  .tb p{color:#198080}
   
3. .tb{width:250px;background:#ccc}  /*tb写在后面，虽然重复了width，但后面的优先执行，前面的ul宽度定义无效！这样正好合服我们的意图*/
   
4. .kk2{color:#ff0000} /*和上面同理*/
   
5. </style>
   
6. 
   
7. <div id="t"><!--页面-->
   
8.     <ul>
   
9.        <li>列a_1</li>
   
10.        <li>列a_2</li>
    
11.        <li>列a_3</li>
    
12.     </ul>
    
13.     <ul>
    
14.        <li>列b_1</li>
    
15.        <li>列b_2</li>
    
16.        <li>列b_3</li>
    
17.     </ul>
    
18.     <ul class="tb">
    
19.         <p>行a1</p>
    
20.         <p>行a2红色字体</p>
    
21.          <p>行a3</p>
    
22.     </ul>
    
23. </div>

复制代码

这样的css写法在大型网页中相当有效率，如果你想特殊情况在一些布局标签里不破坏布局的情况下改变它们的css定义，可以考虑一些类似<span >这样的可以忽略布局因素的标签。

4，活用传统html标签：

很多人用了css制作网页以后，以为以前的传统htm标签没用了，其实传统标签在一些细节表达上比全部用css定义的标签来得简炼，我在这里下载的chinaren模板里，经常看到

1. <span class="bold">哈哈哈</span>

复制代码

这样的css定义过的标签来加粗字体，其实，你只要用<b >标签就可以实现同样的效果如

1. <b>哈哈哈</b>

复制代码

这类传统标签有其默认的独特含义，很多属性无需专门定义，节省了页面代码同时也减少了css表的代码。同样的还有

1. 下划线<u>哈哈哈</u>，斜体<i>哈哈哈</i>

复制代码

等等。

而标题的字体，和一些大尺寸字体，多用h1~h5标签会节省很多口水代码。

1. <br>

复制代码

非常有效的换行标签这个不需要写闭合，它可以独立作用插入就生效，比你用个容器标签之类的节省了6~n个代码，还省去了不少寻找首尾闭合的精力。

     然后说说表格， 表格显示标签td其实在新标准制作网页里面并不是不可以用，在横向自动适应屏幕方面，它有明显的优势，可以减少很多代码。

举个例子， 我们做一个左边固定像素大小，右边自动适应屏幕分辨率的容器,一种常用的css布局方式如下。

1. <style>
   
2. body{margin:0;padding:0;border:0;font-size:14px}
   
3. .w100,div{width:100%}div{overflow:hidden}
   
4. .l{width:200px;background:#ccc;float:left;clear:left}
   
5. .r{width:auto;background:#999}
   
6. .cm{clear:both}
   
7. .cw{background:#fff}
   
8. </style>
   
9. <body>
   
10. <div class="l"><h3>右边 ?</h3>我们做一个左边固定像素大小，右边自动适应屏幕分辨率的容器,一种常用的css布局</div>
    
11. <div class="r"><h3>左边 ?</h3>我们做一个左边固定像素大小，右边自动适应屏幕分辨率的容器,一种常用的css布局</div>
    
12. <div class="w100 cw cm">请尽量用分解根目录布局不要嵌套</div>
    
13. </body>

复制代码

上面的结构比较“时尚”，但是不稳定因素很多，当然灵活使用css也可以有效减少代码，下面先看看table实现的。

1. <style>
   
2. body{margin:0;padding:0;border:0;font-size:14px}
   
3. .w100,table{width:100%}
   
4. .ch_l{width:200px;background:#ccc}
   
5. .ch_r{background:#999}
   
6. .cw{width:100%;background:#fff}
   
7. </style>
   
8. <body>
   
9. <div>
   
10. <table>
    
11.   <td class="ch_l"><h3>右边 ?</h3>我们做一个左边固定像素大小，右边自动适应屏幕分辨率的容器,一种常用的css布局</td>
    
12.   <td class="ch_r"><h3>左边 ?</h3>我们做一个左边固定像素大小，右边自动适应屏幕分辨率的容器,一种常用的css布局</td>
    
13.   </table>
    
14. </div>
    
15. <div class="w100 cw">请尽量用分解根目录布局不要嵌套</div>
    
16. </body>

复制代码

div实现的横向排列会出现很多的不稳定因素，比如缩小浏览器到一定程度，就不能左右排列；还有左右容器的高度也不能自动同步；使用火狐opera等浏览器，还会经常有1~2px的宽度误差，在实际使用中会经常出现互相排挤布局变形的情况。现在这个例子的还不完善，实际使用中需要大量的css属性来稳定它，这就造成了代码的冗长。

使用表格就不会有这么多的麻烦，td标签之间的支撑很紧密，互动很明显，大部分情况下，它们的布局不会变化很严重，而且无需专门为了布局而写css，只要是

1. <td></td><td></td>

复制代码

这样的结构就很稳定！这里写的css基本是为了定义颜色等其他属性的，把属性写在css表里，可以节省页面代码。

当然我们也要注意的是，table的装载和浏览器解析方式，需要把里面的全部内嵌套标签内容下载完成以后这个根标签才开始解析显示。而div ul li等标签则可以分别并行同时解析，因此快很多，但只要不是嵌套很多表格，比如一个div里面只嵌套一个table就到内容信息了，这样的布局方式还是相当可取的。

总之灵活运用，多多学习。今天就写这么多，我还得赶快完成我的模板，然后可以好好休息下了，有空再说说下面的。

[ 本帖最后由 jijiyy007 于 2007-2-22 21:01 编辑 ]

欢迎来我们的网站:www.china-air.org

我倒，标签全部被论坛解析执行了，等下我重新编辑下。

这样的好东西不顶一下是实在说不过去的。

偶正在啃这些东西，谢谢楼主。

其实制顶的里面也有，不过恐怕很少人看。

看了...昏头昏脑...学css怎么感觉好难

感谢LZ。。。虽然难啃，也要努力学~

虽然难啃，也要努力学~