• 中办印发《关于进一步激励广大干部新时代新担当新作为的意见》 2019-09-07
  • 一条塔里木河 串起南疆各色景致与无限风光 2019-09-07
  • 【互动话题】我为两会建言献策 2019-07-18
  • 还是中国足球队最牛,因为他稳定;中国股市就不一样了,怎么形容呢?唉,还不如中国足球! 2019-07-18
  • 新生代农民工市民化与城镇化发展 2019-07-04
  • 习近平应约同俄罗斯总统普京通电话 2019-07-02
  • 中粮集团混改再按“快进键” 2019-07-02
  • 人的本质,要能反映出人与动物的本质不同。过去有个网友说“劳动是人的本质”;真理先生现说是“财富占有”!???,能解释一下么? 2019-06-30
  • [鄙视]又一个“风水帖”。深坛什么时候成了“算命平台”了?!这些伪公知砖家不深入农村了解农民,凭一点表象就信口开河,“辛苦劳作的农民没有富起来”是这“4点原因” 2019-06-22
  • 击鼓-热门标签-华商生活 2019-06-22
  • 河北定州:秸秆回收变废为宝 2019-05-14
  • 妹妹半个多世纪前嫁到安徽 八旬老人想再见她一面 2019-05-14
  • 在这里,读懂2017——人民日报十大评论文章 2019-05-14
  • 步飘恒的专栏作者中国国家地理网 2019-05-14
  • 【奋斗者说】银河麒麟孔金珠:核心技术只有靠自己干出来 2019-05-13
  • 欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

    DIV CSS优化

    时时彩走势图后一为大家介绍简单的CSS优化。
    涉及优化内容:
    CSS代码优化、时时彩走势图后一重用优化、缩短字符、删除换行等处优化

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

    简写:

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

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

    1. background-image:url(//www.cuhw.com.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.cuhw.com.cn/img201207/divcss5-logo-2012.gif);
      background-position:0 0; background-repeat:no-repeat 

    简写:

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

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

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

    简写合并:

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

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

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

    简写合并:

    1. background:#CCC url(//www.cuhw.com.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. 时时彩走势图后一{ 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.cuhw.com.cn */ 

    简写缩写优化:

    1. div{float:left;width:100px;height:100%}.divcss5{float:left;width:100px;height:100px}
      /* 时时彩走势图后一 www.cuhw.com.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.cuhw.com.cn/jiqiao/j240.shtml

  • 中办印发《关于进一步激励广大干部新时代新担当新作为的意见》 2019-09-07
  • 一条塔里木河 串起南疆各色景致与无限风光 2019-09-07
  • 【互动话题】我为两会建言献策 2019-07-18
  • 还是中国足球队最牛,因为他稳定;中国股市就不一样了,怎么形容呢?唉,还不如中国足球! 2019-07-18
  • 新生代农民工市民化与城镇化发展 2019-07-04
  • 习近平应约同俄罗斯总统普京通电话 2019-07-02
  • 中粮集团混改再按“快进键” 2019-07-02
  • 人的本质,要能反映出人与动物的本质不同。过去有个网友说“劳动是人的本质”;真理先生现说是“财富占有”!???,能解释一下么? 2019-06-30
  • [鄙视]又一个“风水帖”。深坛什么时候成了“算命平台”了?!这些伪公知砖家不深入农村了解农民,凭一点表象就信口开河,“辛苦劳作的农民没有富起来”是这“4点原因” 2019-06-22
  • 击鼓-热门标签-华商生活 2019-06-22
  • 河北定州:秸秆回收变废为宝 2019-05-14
  • 妹妹半个多世纪前嫁到安徽 八旬老人想再见她一面 2019-05-14
  • 在这里,读懂2017——人民日报十大评论文章 2019-05-14
  • 步飘恒的专栏作者中国国家地理网 2019-05-14
  • 【奋斗者说】银河麒麟孔金珠:核心技术只有靠自己干出来 2019-05-13
  • 幸运飞艇计划软件网址 香港36码 赚钱计划方案 500w彩票手机版版 做微信订阅号怎么赚钱 本溪娱乐棋牌网大厅 澳门买大小怎样玩 西洋棋棋子样子 时时彩后三乘以0.618 后三组六 稳赚技巧 体彩河南十一选五 欢乐生肖开奖记录 食之契约格系最赚钱的菜 325游戏中心下载 全天精准计划数据 11选5中奖助手