R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R

      <noframes id="LVXRHZN"><address id="LVXRHZN"><nobr id="LVXRHZN"></nobr></address>

      <noframes id="LVXRHZN"><noframes id="LVXRHZN"><address id="LVXRHZN"><listing id="LVXRHZN"></listing></address>
      <sub id="LVXRHZN"></sub>

        <sub id="LVXRHZN"></sub>
        <address id="LVXRHZN"><listing id="LVXRHZN"><menuitem id="LVXRHZN"></menuitem></listing></address>

        <sub id="LVXRHZN"></sub>

        <address id="LVXRHZN"></address>

        <address id="LVXRHZN"></address>
        <noframes id="LVXRHZN">

          <noframes id="LVXRHZN">
          <sub id="LVXRHZN"></sub>
              <address id="LVXRHZN"><listing id="LVXRHZN"><menuitem id="LVXRHZN"></menuitem></listing></address>
            1. 820466150 2017-11-04
            2. 388113149 2017-11-04
            3. 740898148 2017-11-04
            4. 892683147 2017-11-04
            5. 540252146 2017-11-04
            6. 888745145 2017-11-04
            7. 981419144 2017-11-04
            8. 544637143 2017-11-04
            9. 454205142 2017-11-04
            10. 212476141 2017-11-04
            11. 39821140 2017-11-04
            12. 170835139 2017-11-03
            13. 37766138 2017-11-03
            14. 538854137 2017-11-03
            15. 926181136 2017-11-03
            16. 18188135 2017-11-03
            17. 420335134 2017-11-03
            18. 553276133 2017-11-03
            19. 4149132 2017-11-02
            20. 883561131 2017-11-02
            21. 891189130 2017-11-02
            22. 649552129 2017-11-02
            23. 950957128 2017-11-02
            24. 295914127 2017-11-02
            25. 781243126 2017-11-02
            26. 682892125 2017-11-02
            27. 829649124 2017-11-02
            28. 168426123 2017-11-01
            29. 406171122 2017-11-01
            30. 724134121 2017-11-01
            31. “砥砺奋进的五年”大型成就展
            32. “总书记的回信说到了我们心坎上”
            33. 德媒:拒绝“洋垃圾”——肮脏的游戏,中国不玩了
            34. 求实创造 为人师表
            35. 家长群里质疑老师收礼排座位 被班主任踢出家长群
            36. 两手抓两促进 打造坚强战斗堡垒
            37. 新论:党章,每个党员都需时刻铭记
            38. 谁击落了MH17?各方互相指责
            39. 互联网用户公众账号信息服务管理规定
            40. 台籍律师在大陆 就业+创业不是“梦”
            41. 法国总统说政治对话是保证叙利亚实现可持续和平的唯一办法
            42. 天胶“保险+期货”精准扶贫首批给付500万 惠及云南临沧400余建档贫困户
            43. [征集]资深网友看这里 新时代老人们希望何种"夕阳红"
            44. 近千家A股公司三季报业绩预喜
            45. 台媒吹台特种兵“斩首”能力一流:堪比海豹三角洲
            46. 欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
              您的位置:DIVCSS5学习网 > CSS技巧 >

              DIV CSS优化 CSS压缩技巧教程

              DIV CSS优化

              DIVCSS5学习网为大家介绍简单的CSS优化。
              涉及优化内容:
              CSS代码优化、DIVCSS5学习网重用优化、缩短字符、删除换行等处优化

              目录
              1. CSS样式单词简写优化
              2. 标点符号优化
              3. 删除换行
              4. CSS重用优化
              5. CSS代码优化简写总结

              一、CSS样式属性单词代码简写优化   -   TOP

              1、border(CSS边框)简写:

              1)、4个边边框宽度为1px,颜色为#000

              1. border-color:#000; border-style:solid; border-width:1px 

              可以简写为:

              1. border:1px solid #000; 

              2)、单独上、下、左、右边框简写
              左边:

              1. border-left-color:#000; border-left-style:solid; border-left-width:1px 

              简写:

              1. border-left:1px solid #000 

              右边:

              1. border-right-color:#000; border-right-style:solid; border-right-width:1px 

              简写:

              1. border-right:1px solid #000 

              上边:

              1. border-top-color:#000; border-top-style:solid; border-top-width:1px 

              简写:

              1. border-top:1px solid #000 

              下边:

              1. border-bottom-color:#000; border-bottom-style:solid; border-bottom-width:1px 

              简写:

              1. border-bottom:1px solid #000 

              3)、技巧性简写边框
              有时只设置3边的边框时候,我们可以技巧性减少代码量。
              假如我们不设置上边框,而其他3边为1px实现黑色边框。

              传统代码:

              1. Div{border-right:1px solid #000;border-bottom:1px solid #000;border-left:1px solid #000} 

              简写:

              1. Div{border:1px solid #000;border-top:0} 

              这样达到相同效果也大大地减少CSS代码量

              了解更多css边框优化压缩教程。

              2、padding(CSS padding)简写:

              1)、四边设置padding内补白属性
              传统思维:

              1. Padding-left:2px;Padding-right:3px;Padding-top:4px;Padding-bottom:5px 

              可以css padding简写:

              1. Padding:4px 3px 5px 2px 

              2)、只对3边设置padding
              假如我们不对“上”设置padding,其它3边设置padding属性

              传统:

              1. Padding-left:2px;Padding-right:3px;Padding-bottom:5px 

              简写:

              1. Padding:0 3px 5px 2px 

              3边相同情况:
              传统:

              1. Padding-left:2px;Padding-right:2px;Padding-bottom:2px 

              简写:

              1. Padding:0 2px 2px 2px; 

              3、margin简写

              Margin与padding缩写类似

              1)、四边间距设置缩写:
              传统:

              1. Margin-left:2px;Margin-right:3px;Margin-bottom:5px;Margin-top:4px; 

              简写:

              1. Margin:4px 3px 5px 2px 

              2)、四边设置距离相同缩写
              传统:

              1. Margin-left:2px;Margin-right:2px;Margin-bottom:2px;Margin-top:2px; 

              简写:

              1. Margin:2px 

              3)、上下相同、左右相同

              1. Margin-left:2px;Margin-right:2px;Margin-bottom:5px;Margin-top:5px; 

              简写:

              1. Margin:5px 2px 

              4、background简写

              1. background-color:#000; 

              可以简写为

              1. background:#000; 
              1. background-image:url(图片地址) 

              可简写为:

              1. background:url(图片地址) 

              CSS背景比较常用的样式属性,包括单独设置一个背景颜色、单独设置背景为图片、单独设置背景图片是否重复,重复是全部重复还是按照X横向或Y纵向重复。接下来我们介绍background背景样式常用简写与注意。

              1)、单独设置背景一种颜色的背景优化

              1. background-color:#CCC 

              优化为:

              1. background:#CCC 

              2)、背景为图片,X横向重复平铺

              1. background-image:url(http://www.tommstudio.com/img201207/divcss5-logo-2012.gif);  
              2. background-position:0 0; background-repeat:repeat-x 

              简写:

              1. background:url(http://www.tommstudio.com/img201207/divcss5-logo-2012.gif) repeat-x 0 0; 

              2)、背景为图片,Y纵向重复平铺

              1. background-image:url(http://www.tommstudio.com/img201207/divcss5-logo-2012.gif); 
                background-position:0 0; background-repeat:repeat-y 

              CSS简写优化为:

              1. background:url(http://www.tommstudio.com/images2012/logo.gif) repeat-y 0 0; 

              3)、背景为图片,不重复平铺CSS压缩

              1. background-image:url(http://www.tommstudio.com/img201207/divcss5-logo-2012.gif);
                background-position:0 0; background-repeat:no-repeat 

              简写:

              1. background:url(http://www.tommstudio.com/img201207/divcss5-logo-2012.gif) no-repeat 0 0; 

              4)、背景为图片,网页全背景X和Y重复平铺

              1. background-image:url(http://www.tommstudio.com/img201207/divcss5-logo-2012.gif); 

              简写合并:

              1. background:url(http://www.tommstudio.com/img201207/divcss5-logo-2012.gif) ; 

              5)、背景为黑色,图片向X横向重复平铺

              1. background-color:#CCC;background-image:url(http://www.tommstudio.com/img201207/divcss5-logo-2012.gif);  
              2. background-position:0 0; background-repeat:repeat-x; 

              简写合并:

              1. background:#CCC url(http://www.tommstudio.com/img201207/divcss5-logo-2012.gif) repeat-x 0 0; 

              这里注意颜色与图片前后顺序。

              5、font简写

              1. font-size:12px; line-height:12px; font-family:Arial, Helvetica, sans-serif; 

              可简写为:

              1. font:12px/12px Arial, Helvetica, sans-serif; 

              二、标点符号优化   -   TOP

              1、删除多余空格字符
              我们常常写CSS代码时候CSS样式单词之间会多html空格,我们可以在开发完CSS代码时候,可以利用软件快速删除多余空格字符

              CSS代码优化字标点符号
              标点符号字空格字符优化

              例子:

              1. DIVCSS5学习网{ float:left; width:100px; height:100%;} 

              删除空格后:

              1. div{float:left;width:100px;height:100%;} 

              去掉标点符号之空格后的css代码
              去掉空格优化压缩后的CSS代码

              删除空格,在开发CSS过程不必删除,只需要在开发完成后利用如DW软件批量替换删除掉多余空格即可。

              2、删除每个选择器最后一个分号

              删除分号优化CSS代码
              删除分号前CSS代码

              代码:

              1. div{float:left;width:100px;height:100%;} 
              2. .divcss5{float:left;width:100px;height:100px;} 

              简写删除分号压缩后:

              1. div{float:left;width:100px;height:100%} 
              2. .divcss5{float:left;width:100px;height:100px} 

              CSS代码优化压缩之去掉最后一个属性分号截图
              去掉最后一个分号

              三、删除换行   -   TOP

              删除空格与换行,让代码都挤一起。

              删除空格前截图
              删除选择器之间换行空格截图

              简写删除选择器换行占位

              CSS代码:

              1. div{float:left;width:100px;height:100%} 
              2. .divcss5{float:left;width:100px;height:100px} 
              3. /* www.tommstudio.com */ 

              简写缩写优化:

              1. div{float:left;width:100px;height:100%}.divcss5{float:left;width:100px;height:100px}
                /* www.tommstudio.com */ 

              删除后缩短字节优化CSS
              简写删除换行,依然可以借助DW软件进行操作删除。

              四、CSS重用优化   -   TOP

              这里主要介绍是CSS代码的共用属性提取来达到节约代码、维护方便,CSS实例如下:

              1. .yangshi_a{ width:100px; height:20px; text-align:left; float:left; font-size:24px;} 
              2. .yangshi_b{ width:100px; height:20px; text-align:right; float:left; font-size:24px;} 

              他们都有相同高度、宽度、浮动、文字大小,而只有内容居左居右不同(你可能需要了解CSS居中),我们就可以提取他们相同属性
              优化压缩后:

              1. .yangshi_a ,.yangshi_b{ width:100px; height:20px; text-align:left; float:left; font-size:24px;} 
              2. .yangshi_b{text-align:right; } 

              注意观察以上代码,自己理解,不懂可到CSS论坛提出问题。

              五、CSS代码优化简写总结   -   TOP

              根据以上几点优化简写,你可以压缩你CSS代码,同时减少不必要占用字节空格、分号,通过简写常用CSS代码等大大解决压缩CSS代码。

              如需转载,请注明文章出处和来源网址:http://www.tommstudio.com/jiqiao/j240.shtml

              我要分享到:
              上一篇:DIV间距设置
              下一篇:DIV CSS图片_CSS img

              必备CSS教程 Essential CSS Tutorials

              必备HTML基础教程 Essential HTML Tutorials

              如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
              DIVCSS5学习网文章修订日期:2010-11-01 10:53 原创:DIVCSS5学习网
              本文www.tommstudio.com DIVCSS5版权所有。