css优化
涉及优化内容:
①CSS样式单词简写优化
②标点符号优化
③删除换行
④CSS重用优化
⑤CSS代码优化简写总结
一、CSS样式属性单词代码简写优化
(1)border边框简写:4个边边框宽度为1px,颜色为#000
border-color:#000; border-style:solid; border-width:1px
可以简写为:
border:1px solid #000;
(2)单独上、下、左、右边框简写
有时只设置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代码量
【注意:】border:1px solid #000; 和border-top:none;前后顺序不能调换。
因为CSS读取有从上到下、从左到右读取原理,而先设置了整个边框样式,后再加上声明顶部上边边框为“none”没有意思,即实现该实例要的样式。从而无需分别设置下、左、右,从而节约一定代码。
拓展:
①border顺序:与margin和padding类似上右下左,举例:
margin: 10px 20px 30px 40px;/*顺时针顺序:上右下左*/ margin: 20px;/*上下左右均为20px*/ maigin:50px 80px 30px /*上为50px 左右为80px 下为30px*/
有三个的时候为上,左右,下。
(3)CSS背景比较常用的样式属性,包括单独设置一个背景颜色、单独设置背景为图片、单独设置背景图片是否重复,重复是全部重复还是按照X横向或Y纵向重复。接下来我们介绍background背景样式常用简写与注意。
①单独设置背景一种颜色的背景优化
background-color:#CCC
优化为:
background:#CCC
②背景为图片,X横向重复平铺
background-image:url(http://www.divcss5.com/img201207/divcss5-logo-2012.gif); background-position:0 0; background-repeat:repeat-x
简写:
background:url(http://www.divcss5.com/img201207/divcss5-logo-2012.gif) repeat-x 0 0;
③背景为图片,Y纵向重复平铺
background-image:url(http://www.divcss5.com/img201207/divcss5-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;
④背景为图片,不重复平铺CSS压缩
background-image:url(http://www.divcss5.com/img201207/divcss5-logo-2012.gif); background-position:0 0; background-repeat:no-repeat
简写:
background:url(http://www.divcss5.com/img201207/divcss5-logo-2012.gif) no-repeat 0 0;
⑤背景为黑色,图片向X横向重复平铺
background-color:#CCC;background-image:url(http://www.divcss5.com/img201207/divcss5-logo-2012.gif); background-position:0 0; background-repeat:repeat-x;
简写合并:这里注意颜色与图片前后顺序。
background:#CCC url(http://www.divcss5.com/img201207/divcss5-logo-2012.gif) repeat-x 0 0;
(4)font简写
font-size:12px; line-height:12px; font-family:Arial, Helvetica, sans-serif;
可简写为:
font:12px/12px Arial, Helvetica, sans-serif;
二、标点符号优化
(1)删除多余空格字符
我们常常写CSS代码时候CSS样式单词之间会多html空格,我们可以在开发完CSS代码时候,可以利用软件快速删除多余空格字符
(2)删除每个选择器最后一个分号
例子:
div{float:left;width:100px;height:100%;} .divcss5{float:left;width:100px;height:100px;}
删除末尾分号后:
div{float:left;width:100px;height:100%} .divcss5{float:left;width:100px;height:100px}
三、删除换行
删除空格与换行,让代码都挤一起,快捷键即可完成
四、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;}
观察后即可发现,他们都有相同高度、宽度、浮动、文字大小,而只有内容居左居右不同,那我们就可以提取他们相同属性
优化压缩后:
.yangshi_a ,.yangshi_b{ width:100px; height:20px; text-align:left; float:left; font-size:24px;} .yangshi_b{text-align:right; }
【注意:】二者顺序不能颠倒,css样式读取是由上到下,有左到右
五、CSS代码优化简写总结
根据以上几点优化简写,你可以压缩你CSS代码,同时减少不必要占用字节空格、分号,通过简写常用CSS代码等大大解决压缩CSS代码。