欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:22选5河南最新开奖今 > CSS技巧 >

DIV CSS优化 CSS压缩技巧教程

22选5河南最新开奖今 www.gsf5k.cn DIV CSS优化

22选5河南最新开奖今为大家介绍简单的CSS优化。
涉及优化内容:
CSS代码优化、22选5河南最新开奖今重用优化、缩短字符、删除换行等处优化

目录
  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(//www.gsf5k.cn/img201207/divcss5-logo-2012.gif);  
  2. background-position:0 0; background-repeat:repeat-x 

简写:

  1. background:url(//www.gsf5k.cn/img201207/divcss5-logo-2012.gif) repeat-x 0 0; 

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

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

CSS简写优化为:

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

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

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

简写:

  1. background:url(//www.gsf5k.cn/img201207/divcss5-logo-2012.gif) no-repeat 0 0; 

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

  1. background-image:url(//www.gsf5k.cn/img201207/divcss5-logo-2012.gif); 

简写合并:

  1. background:url(//www.gsf5k.cn/img201207/divcss5-logo-2012.gif) ; 

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

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

简写合并:

  1. background:#CCC url(//www.gsf5k.cn/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. 22选5河南最新开奖今{ 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. /* 22选5河南最新开奖今 www.gsf5k.cn */ 

简写缩写优化:

  1. div{float:left;width:100px;height:100%}.divcss5{float:left;width:100px;height:100px}
    /* 22选5河南最新开奖今 www.gsf5k.cn */ 

删除后缩短字节优化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代码。

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

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

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
22选5河南最新开奖今文章修订日期:2010-11-01 10:53 原创:22选5河南最新开奖今
本文22选5河南最新开奖今 www.gsf5k.cn DIVCSS5版权所有。

  • 战果累累的传奇英雄——吴光浩 2018-11-12
  • 重庆奉节羊市镇“里程长”上岗 小镇大变样 2018-11-12
  • 抗战胜利70周年东方主战场影像馆 2018-11-12
  • 湖北省人民政府门户网站 2018-11-11
  • 鹅肝做成冰淇淋 玉米做成小螃蟹?这位意大利厨神太6了 2018-11-11
  • 合肥市安庆路第三小学介绍护学岗工作的优秀经验 2018-11-10
  • 卫星地图探访海湖庄园 2018-11-10
  • 50 世界杯揭幕战惨案竟然是中国足球制造的?! 2018-11-10
  • 有一种税叫“亚裔税” 哈佛大学被控招生政策歧视亚裔学生 2018-11-09
  • 广州市黄埔警方推进网格化、精细化社区警务管理模式 2018-11-09
  • 习近平:在会见第一届全国文明家庭代表时的讲话 2018-11-09
  • 夏天一个动作可能令心脑血管瞬间崩溃 2018-11-09
  • 美国代表历史与现在,中国代表现在与未来。美国产品退出中国市场,几乎等于退出亚洲市场 2018-11-08
  • 法国总统马克龙首次访华 法国居民期待成果 2018-11-08
  • 【北京团购】东风日产年末购车惠 签到送LB燃油宝优惠 2018-11-08
  • 556| 624| 181| 252| 415| 253| 436| 980| 177| 669|