CSS高效编码技巧

CSS被吹捧的好处之一就是它能减小页面大小，由此缩短下载时间，这里向大家简单介绍一下进行高效CSS编码技巧，有很多地方可以减少代码的长度，包括简记属性(shorthandproperties)，多重声明(multipledeclarations)，默认值(defaultvalues)，继承(inheritance)，和空白(whitespace)。

创新互联建站-专业网站定制、快速模板网站建设、高性价比金塔网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式金塔网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖金塔地区。费用合理售后完善，10多年实体公司更值得信赖。

进行高效CSS编码技巧

在前面的文章中，我们提到了用什么软件来编写CSS文件。今天我们来看一些介绍：如何才能高效的进行CSS编码？

　　CSS被吹捧的好处之一就是它能减小页面大小，由此缩短下载时间，不仅仅是首页的载入，还包括样式表被缓存以后，后续页面的载入也被加快了的那部分时间。这没错，但首页载入时间的缩短几乎看不出来，这是因为CSS代码往往过于冗长了。好吧，现在一切都不同了。学点高效地进行CSS编码的技巧吧，让你把样式表马上裁减到最小为止。自然，你可能看不到什么惊人的改变，但对于大站来说，微小的字节减少也很重要。

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

简记属性

　　Zeroingpagemargins提到了一组这样的简记属性，但对于此还有更多的。

　　通常简记属性包括：

◆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)模型四边的那些属性和一点没法归类的杂碎了。

盒侧边的简记属性

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

“钟面”

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

ExampleSourceCode

 
 
 
    
  
  
  
  1. margin:5px;border-width:5px;padding:5px;  
    2.   
  
  
  2.  
    3.

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

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

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

ExampleSourceCode

 
 
 
    
  
  
  
  1. margin:10px5px3px0;  
    2.   
  
  
  2.  
    3.

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

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

改进的钟面

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

ExampleSourceCode

 
 
 
    
  
  
  
  1. margin:10px5px;  
    2.   
  
  
  2.  
    3.

这行代码把顶部和底部的边白设置为10px，两侧设为5px。最后一个技巧是这样的：若顶部和底部的不同，两侧的却是一样的，比如上边白10px，左右边白5px，下边白20px，我们可以这么写：

ExampleSourceCode

 
 
 
    
  
  
  
  1. margin:10px5px20px;  
    2.   
  
  
  2.  
    3.

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

边界(border)的一些区别

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

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

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

ExampleSourceCode

 
 
 
    
  
  
  
  1. border:10pxsolidred;  
    2.   
  
  
  2. border-width:10px5px3px0;  
    3.

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

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

多重声明

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

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

ExampleSourceCode

 
 
 
    
  
  
  
  1. #first{left:0;}  
    2.   
  
  
  2. #second{left:100px;}  
    3.   
  
  
  3. #third{left:200px;}  
    4.   
  
  
  4. #fourth{left:300px;}  
    5.   
  
  
  5. #fifth{left:400px;}  
    6.   
  
  
  6. #sixth{left:500px;}  
    7.   
  
  
  7. #first,#second,#third,#fourth,#fifth,#sixth{  
    8.   
  
  
  8. position:absolute;  
    9.   
  
  
  9. top:0;  
    10.   
  
  
  10. width:75px;  
    11.   
  
  
  11. font-size:.9em;  
    12.   
  
  
  12. font-weight:bold;  
    13.   
  
  
  13. text-align:center;  
    14.   
  
  
  14. line-height:1.4em;  
    15.   
  
  
  15. background-color:silver;  
    16.   
  
  
  16. color:navy;  
    17.   
  
  
  17. padding:5px;  
    18.   
  
  
  18. border:1pxsolidnavy;  
    19.   
  
  
  19. }  
    20.   
  
  
  20.  
    21.

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

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

默认值

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

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

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

继承

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

ExampleSourceCode

 
 
 
    
  
  
  
  1. color  
    2.   
  
  
  2. font(及其相关属性)  
    3.   
  
  
  3. letter-spacing  
    4.   
  
  
  4. line-height  
    5.   
  
  
  5. list-style(及其相关属性)  
    6.   
  
  
  6. text-align  
    7.   
  
  
  7. text-indent  
    8.   
  
  
  8. text-transform  
    9.   
  
  
  9. white-space  
    10.   
  
  
  10. word-spacing  
    11.   
  
  
  11.  
    12.

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

空白

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

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

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

最后

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

分享文章：CSS高效编码技巧
网页URL：http://www.shufengxianlan.com/qtweb/news33/45583.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

解决方案知识

同城分类信息

网站制作公司　　 　成都定制网站建设　　 　酒柜书柜鞋柜定制　　 　手机app　　 　免费收录网站　　 　成都小程序商城　　 　资阳做网站　　 　成都网站设计　　 　高县网站建设　　 　网站域名　　 　四川正泰动物　　 　定制网站　　 　seo优化排名　　 　雅安机房托管　　 　广安搬家公司　　 　网站制作　　 　成都茶叶销售　　 　定制网站开发　　 　企业网站建设　　 　网页设计制作