统一下载站 零度软件园 绿色软件 久友下载站 星星软件站 源码下载 游戏狗 51CTO下载 下载王 东坡下载 创e下载园 顶库下载 完美下载 绿软基地 当贝客 比克尔瞎子 软件E线下载 121下载站 快猴网 心愿下载 偶要下载站 华彩软件站 第六下载 雷达下载 ucbug软件下载站 维维软件园 欧普软件 动力软件园 游侠下载站 迷你下载 喜爱下载网 咕咕猪下载站 清清下载吧 AI下载 艾艾软件园 2秒下载网 谷普下载 飞翔下载 S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S
欢迎来到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版权所有。