DIV CSS优化技巧有哪些
这篇文章主要讲解了"DIV CSS优化技巧有哪些"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"DIV CSS优化技巧有哪些"吧！
一、CSS样式属性单词代码简写优化
1、border(CSS边框)简写：
1)、4个边边框宽度为1px，颜色为#000
border-color:#000; border-style:solid; border-width:1px
可以简写为：
border:1px solid #000;
2)、单独上、下、左、右边框简写
左边：
border-left-color:#000; border-left-style:solid; border-left-width:1px
简写：
border-left:1px solid #000
右边：
border-right-color:#000; border-right-style:solid; border-right-width:1px
简写：
border-right:1px solid #000
上边：
border-top-color:#000; border-top-style:solid; border-top-width:1px
简写：
border-top:1px solid #000
下边：
border-bottom-color:#000; border-bottom-style:solid; border-bottom-width:1px
简写：
border-bottom:1px solid #000
3)、技巧性简写边框
有时只设置3边的边框时候，我们可以技巧性减少代码量。
假如我们不设置上边框，而其他3边为1px实现黑色边框。
传统代码：
Div{border-right:1px solid #000;border-bottom:1px solid #000;border-left:1px solid #000}简写：
Div{border:1px solid #000;border-top:0}这样达到相同效果也大大地减少CSS代码量
了解更多css边框优化压缩教程。
2、padding（CSS padding）简写：
1)、四边设置padding内补白属性
传统思维：
Padding-left:2px;Padding-right:3px;Padding-top:4px;Padding-bottom:5px
可以css padding简写：
Padding:4px 3px 5px 2px
2）、只对3边设置padding
假如我们不对"上"设置padding，其它3边设置padding属性
传统：
Padding-left:2px;Padding-right:3px;Padding-bottom:5px
简写：
Padding:0 3px 5px 2px
3边相同情况：
传统：
Padding-left:2px;Padding-right:2px;Padding-bottom:2px
简写：
Padding:0 2px 2px 2px;
3、margin简写
Margin与padding缩写类似
1）、四边间距设置缩写：
传统：
Margin-left:2px;Margin-right:3px;Margin-bottom:5px;Margin-top:4px;
简写：
Margin:4px 3px 5px 2px
2)、四边设置距离相同缩写
传统：
Margin-left:2px;Margin-right:2px;Margin-bottom:2px;Margin-top:2px;
简写：
Margin:2px
3）、上下相同、左右相同
Margin-left:2px;Margin-right:2px;Margin-bottom:5px;Margin-top:5px;
简写：
Margin:5px 2px
4、background简写
background-color:#000;
可以简写为
background:#000;
background-image:url(图片地址)
可简写为：
background:url(图片地址)
CSS背景比较常用的样式属性，包括单独设置一个背景颜色、单独设置背景为图片、单独设置背景图片是否重复，重复是全部重复还是按照X横向或Y纵向重复。接下来我们介绍background背景样式常用简写与注意。
1）、单独设置背景一种颜色的背景优化
background-color:#CCC
优化为：
background:#CCC
2）、背景为图片，X横向重复平铺
background-image:url(http://www..com/img201207/-logo-2012.gif); background-position:0 0; background-repeat:repeat-x
简写：
background:url(http://www..com/img201207/-logo-2012.gif) repeat-x 0 0;
2）、背景为图片，Y纵向重复平铺
background-image:url(http://www..com/img201207/-logo-2012.gif);
background-position:0 0; background-repeat:repeat-y
CSS简写优化为：
background:url(http://www.thinkcss5.com/images2012/logo.gif) repeat-y 0 0;
3）、背景为图片，不重复平铺CSS压缩
background-image:url(http://www..com/img201207/-logo-2012.gif);
background-position:0 0; background-repeat:no-repeat
简写：
background:url(http://www..com/img201207/-logo-2012.gif) no-repeat 0 0;
4）、背景为图片，网页全背景X和Y重复平铺
background-image:url(http://www..com/img201207/-logo-2012.gif);
简写合并：
background:url(http://www..com/img201207/-logo-2012.gif) ;
5）、背景为黑色，图片向X横向重复平铺
background-color:#CCC;background-image:url(http://www..com/img201207/-logo-2012.gif); background-position:0 0; background-repeat:repeat-x;
简写合并：
background:#CCC url(http://www..com/img201207/-logo-2012.gif) repeat-x 0 0;
这里注意颜色与图片前后顺序。
5、font简写
font-size:12px; line-height:12px; font-family:Arial, Helvetica, sans-serif;
可简写为：
font:12px/12px Arial, Helvetica, sans-serif;
二、标点符号优化 - TOP
1、删除多余空格字符
我们常常写CSS代码时候CSS样式单词之间会多html空格，我们可以在开发完CSS代码时候，可以利用软件快速删除多余空格字符
标点符号字空格字符优化
例子：
div{ float:left; width:100px; height:100%;}删除空格后：
div{float:left;width:100px;height:100%;}
去掉空格优化压缩后的CSS代码
删除空格，在开发CSS过程不必删除，只需要在开发完成后利用如DW软件批量替换删除掉多余空格即可。
2、删除每个选择器最后一个分号
删除分号前CSS代码
代码：
div{float:left;width:100px;height:100%;} .{float:left;width:100px;height:100px;}简写删除分号压缩后：
div{float:left;width:100px;height:100%} .{float:left;width:100px;height:100px}
去掉最后一个分号
三、删除换行 - TOP
删除空格与换行，让代码都挤一起。
删除选择器之间换行空格截图
简写删除选择器换行占位
CSS代码：
div{float:left;width:100px;height:100%} .{float:left;width:100px;height:100px} /* www..com */简写缩写优化：
div{float:left;width:100px;height:100%}.{float:left;width:100px;height:100px}
/* www..com */
简写删除换行，依然可以借助DW软件进行操作删除。
四、CSS重用优化
这里主要介绍是CSS代码的共用属性提取来达到节约代码、维护方便，CSS实例如下：
.yangshi_a{ width:100px; height:20px; text-align:left; float:left; font-size:24px;} .yangshi_b{ width:100px; height:20px; text-align:right; float:left; font-size:24px;}他们都有相同高度、宽度、浮动、文字大小，而只有内容居左居右不同(你可能需要了解CSS居中)，我们就可以提取他们相同属性
优化压缩后:
.yangshi_a ,.yangshi_b{ width:100px; height:20px; text-align:left; float:left; font-size:24px;} .yangshi_b{text-align:right; }注意观察以上代码，自己理解，不懂可到CSS论坛提出问题。
感谢各位的阅读，以上就是"DIV CSS优化技巧有哪些"的内容了，经过本文的学习后，相信大家对DIV CSS优化技巧有哪些这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！
