在前面文章中我们提到了用什么软件Software来编写CSS文件今天我们来看些介绍:如何才能高效进行CSS编码？
　　CSS网页布局开发应该使用什么软件Software比较好http://www.52css.com/article.asp?id=485

　　CSS被吹捧好处的就是它能减小页面大小由此缩短下载时间不仅仅是首页载入还包括样式表被缓存Cache以后后续页面载入也被加快了那部分时间这没错但首页载入时间缩短几乎看不出来这是CSS代码往往过于冗长了

　　好吧现在切都区别了学点高效地进行CSS编码窍门技巧吧让你把样式表马上裁减到最小为止自然你可能看不到什么惊人改变但对于大站来说微小字节减少也很重要

　　有很多地方可以减少代码长度包括简记属性(handproperties)多重声明(multipledeclarations)默认值(defaultvalues)继承(inheritance)和空白(whitespace)

简记属性

　　Zeroingpagemargins提到了组这样简记属性但对于此还有更多
　　通常简记属性包括:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
font(控制\"font-size\",\"font-weight\",\"line-height\",等等)background(控制元素背景放置位置重复次数等等)
list-style(设置列表元素前边那个“原点”属性)
margin(定义box各侧边缘空白(margin)宽度)
border(定义box边界(border)属性——有很多和边界有关简记属性)padding(定义box各侧补白(padding)宽度)


　　上述项目是链接至W3CCSS2规范标准相关章节

　　例如font属性是用于同时设置font-style,font-variant,font-weight,font-size,line-height,和font-family简记属性当然它们并非全都必须写在简记属性中旦在简记属性中忽略了其中某个那些缺失属性都将被设置为它们值就像W3C规范标准中fontproperty节提到那样若需要控制很多和字体相关属性使用这个简记属性就可以省下样式表中大量字节了

　　background和list-style属性也是如此现在还剩下有关CSS盒(box)模型 4边那些属性和点没法归类杂碎了

盒侧边简记属性

　　任何块级(blocklevel)元素(像div表格列表段落等) 4边都有边白(margin)边界(border)和补白(padding)都可以分别设置区别宽度对于边界(border)来说还能给每边分配区别border-style和border-color若要条条地显式地指明所有这些属性代码就会变得很冗长使用简记规则意义正在于此:彻底地减少这样负担

“钟面”

　　当需要指定这 3类“盒侧”属性的而且各侧情况又是样时候使用简记属性最基本功能就行了:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
margin:5px;border-width:5px;padding:5px;


　　注意:要让边界显示出来还必须设置border-style属性否则单有border-width边界是显示不出来既可以直接通过border-style来设置它也可以通过border属性

　　然而很有可能某侧需要个区别值这时CSS“钟面”特性就上台了把此处盒子想象为个钟面当指针指向12点时表示盒子正上方这就是简记属性中第个值含义；下个是3点这是盒子右侧；接下来是6点表示盒子下方；最后呢是9点盒子左侧

　　让我们看看这个例子吧在页面中我们需要个10px上边白5px右边白3px下边白无左边白盒子则margin简记属性应该这么写:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
margin:10px5px3px0;


　　在属性声明中几个值必须也只能用空格来分隔而且只要那个值不是零就必须给它指定单位

　　为什么零宽度边白就不需要指定单位了呢？零个任何单位(px,em,%,等等)值也就等于任意其他单位值

改进钟面

　　当某些值重复时这些“盒侧”属性还能压榨得更短前面提到过若各侧都样可以只指定个让它应用到全部而旦顶部和底部样式是致左侧和右侧却是另种margin代码可以这么写:



\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
margin:10px5px;


　　这行代码把顶部和底部边白设置为10px两侧设为5px最后个窍门技巧是这样:若顶部和底部区别两侧却是样比如上边白10px左右边白5px下边白20px我们可以这么写:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
margin:10px5px20px;


　　这些缩写完全是根据给出值数目和顺序决定整理总结起来个值=所有各侧；两个值=上下种两侧另种； 3个值=上侧种左右同种下侧种；当然还有 4个值=按照顺时针好了现在不那么难记住了吧？

边界(border)些区别

　　同样钟面简记模型也可以用于border简记属性和paddingborder-width,border-color,border-style,和padding也采用和margin样方式工作然而处理border属性时却有点区别border属性是同时给盒子各侧设置border-width,border-style,及border-color属性

　　如果所有 4侧样式都样那当然不会有什么问题可万他们区别呢？我们还得回去用那些老式border-top,border-right们？没错是可以但幸好我们还有更有效率点思路方法

　　考虑我们这个盒子各个边界有同样style和color但宽度区别情况最有效思路方法是先像往常样用border简记法来定义好border-width,border-style,和border-color；然后再设置次border-width属性覆盖上面设置宽度:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
border:10pxsolidred;
border-width:10px5px3px0;


　　如果所有边界属性(width、style和color)都各侧区别那上面思路方法恐怕就没什么用了但通常不会遇到这么怪异情况如果变化属性仅仅是border-style或者border-color话上述思路方法改改就可以像border-width情况那样用了

　　下面我们看看在另种情形下书写高效CSS会带来什么改变

多重声明

　　考虑我们有6个采用绝对定位div(比如Dreamweaver里层)且它们其他属性都样只不过在页面中位置区别它们位置区别自然应该有区别ID或者是但剩下属性还是样

　　个(所见即所得)布局编辑器恐怕给每个ID都各自写套属性包括字体规则、文本规则、位置定义等等可遍遍地给这些div重复完全样规则未免笨了点不是么？那这样就可以把这些规则减到最短了:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
#first{left:0;}
#second{left:100px;}
#third{left:200px;}
#fourth{left:300px;}
#fth{left:400px;}
#sixth{left:500px;}
#first,#second,#third,#fourth,#fth,#sixth{
position:absolute;
top:0;
width:75px;
font-size:.9em;
font-weight:bold;
text-align:center;
line-height:1.4em;
background-color:silver;
color:navy;
padding:5px;
border:1pxsolidnavy;
}


　　列出所有类似这些divID用,和个空格分隔下面规则块会被应用到所有这些ID上显然这样规则如果给每个ID都重复遍代码就膨胀得多了这恐怕是最常用也最有效缩短样式表思路方法了

　　注意:注意最后个ID选择符并没有跟着个逗号(若多了逗号)有些浏览器中可能还能看到那些div另些就有可能把这样样式表视为而不显示任何个div了

默认值

　　许多CSS属性都有它们默认值如果这个属性没被定义取代它们就将应用于HTML元素上比如说每个补白属性中padding-top,padding-right,padding-bottom,和padding-left值都是0因此如果某个元素不需要任何补白自然就可以不设置补白那些属性了



　　注意:那些简记属性——比如我们先前讨论过——里面或者其本身都没有什么默认值毕竟简记属性其实只是独立属性种重现而已所以如果硬说它们有默认值话采用也是独立属性那些默认值尽管CSS规范标准PropertyIndex节中规定许多默认值都是none或0浏览器们却往往给区别属性设置些区别默认值

　　例:Opera浏览器给body元素设置了8px补白h1-h6标题和段落默认都有非零边白列表和列表子项中用到默认边白和补白每个浏览器都有所区别

继承

　　另个避免写出冗余代码思路方法是了解哪些属于父元素属性会由子元素继承下来会被继承属性只有很少些而且其中大部分是不常用比如voice-family所以列个能继承常用属性表其实是很短下面就是按字母顺序排出:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
color
font(及其相关属性)
letter-spacing
line-height
list-style(及其相关属性)
text-align
text-indent
text-transform
white-space
word-spacing


　　在某些老式浏览器中继承功能可能有些问题然而大部分现代浏览器在这方面都处理得很正确记住上面这个列表可以让你少写点多余代码当然了如果你想看看完整列表还是参考CSS2PropertyIndex

空白

　　并非指是CSSwhite-space属性这个属性早有确定值了我们说是样式表本身含有那些空白空白常用于换行和在行里面用来改进可读性空格尽管把它们都删除可能会剩下个把字节但好处毕竟有限

　　关键是如果把它们都删除了CSS文件就会变得非常难读更难修改要是你真打算这么做不妨创建个主CSS文件再根据它生成个删除了所有空白副本修改时候只修改主文件根据主文件重新生成次副本就行了

　　请注意CSS编码中需要些空白删除那些必要会导致你未曾预料问题如果W3C规范标准中用了\"spaceseparated\"这样语句那么空格就不可省略常见像简记属性中分隔值那些空格还有下降合并符(descendantcombinator)或者称为下降选择符就是个空格所以说不到非用不可时候删除空白这样思路方法还是少用

最后

　　你现在学会了好几种让你样式表更高效思路方法益处是在这些窍门技巧下不仅下载时间被减少了而且清晰、易于理解、更改代码随的而来就算你用排版工具来编辑样式表也可以在最后用这些思路方法将其改定为高效样子