css 缩写: 浅谈css代码的简化缩写_css

现在很多人所用的css代码都很冗赘，其实很多都可以简化缩写的。
这次就根据自己所知道的来跟大家谈谈有关CSS代码的简化缩写问题。
 
1、所有CSS代码只要用一个style标记就可以了，没必要每段都加一个，简直是多余。例如: 
body{background:url("") repeat fixed!important;}
 
.bodybg{background:url("") no repeat no scroll!important;}
 
可以简化合并为：
 
body{background:url("") repeat fixed!important;}
.bodybg{background:url("") no repeat no scroll!important;}
 
像更改博客各部分背景，更改博客各部分字体颜色，更改模版宽度，鼠标，滚动条等CSS代码都可以合并到一个style标记里。
2、颜色：16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：
 
黑色#000000可以缩写为#000；
白色#ffffff可以缩写为#fff；
红色#ff0000可以缩写为#f00；
蓝色#0000ff可以缩写为#00f；
#336699可以缩写为#369。
 
一些常见常用的颜色比如黑色，白色，红色，蓝色，绿色，黄色等如果大家记不住其代码的话可以用相应的英语black，white，red，blue，green，yellow等来表示。
3、对同一个标识进行多属性控制的时候可以把几个属性放在一个大括号里，不同属性中间用分号隔开。例如大背景和滚动条：
 
body {background:url("") repeat fixed!important;}
body {SCROLLBAR-FACE-COLOR: #EDF6F5;
SCROLLBAR-HIGHLIGHT-COLOR: #fff;
SCROLLBAR-SHADOW-COLOR: #fff;
SCROLLBAR-3DLIGHT-COLOR: #000;
SCROLLBAR-ARROW-COLOR: #000;
SCROLLBAR-TRACK-COLOR: #EDF6F5;
SCROLLBAR-DARKSHADOW-COLOR: #000;}
 
可以简化合并为：
 
body {background:url("") repeat fixed!important;
SCROLLBAR-FACE-COLOR: #EDF6F5;
SCROLLBAR-HIGHLIGHT-COLOR: #fff;
SCROLLBAR-SHADOW-COLOR: #fff;
SCROLLBAR-3DLIGHT-COLOR: #000;
SCROLLBAR-ARROW-COLOR: #000;
SCROLLBAR-TRACK-COLOR: #EDF6F5;
SCROLLBAR-DARKSHADOW-COLOR: #000;}
4、对多标识进行相同属性控制的时候也可以合并在一起，各标识间用逗号隔开。例如：
.bodytop{background:#transparent;}
.bodybg{background:#transparent;}
 
可以简化合并为：
 
.bodytop,.bodybg{background:#transparent;}
.bodytop{display:none;}
.bodyBottom{display:none;}
 
可以简化合并为：
 
.bodytop,.bodyBottom{display:none;}
.feeds .text a{color:#000;}
.feeds .function a{color:#000;} 
可以简化合并为： .feeds .text a,.feeds .function a{color:#000} 举这么多例子只是为了让大家更清楚明了一点，具体大家得根据自己的情况来简化缩写代码。 像现在很多人博客上发的首页透明模版的代码： .logo{background:#transparent}.banner{background:#transparent}.menu{background:#transparent}.bodyBg{background:#transparent}.bodyBottom{background:#transparent}.feeds .up{background:#transparent}.feeds .down{background:#transparent}.feeds .function{background:#transparent}.feeds .page{background:#transparent}.links .up{background:#transparent}.links .down{background:#transparent}.links .mid{background:#transparent}.photo .mid{background:#transparent}.label .mid{background:#transparent}. 本文链接http://www.cxybl.com/html/wyzz/CSS/20130904/40043.html

欢迎大家阅读《css 缩写: 浅谈css代码的简化缩写_css》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码

喜欢 (0)赏

[搞代码]

分享 (0)