浅谈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}
.calendar .mid
{background:#transparent}
.callboard .up
{background:#transparent}
.callboard .down
{background:#transparent}
.callboard .mid
{background:#transparent}
.gbook .up
{background:#transparent}
.gbook .down
{background:#transparent}
.links .more
{background:#transparent}
.add .ico
{background:#transparent}
.add
{background:#transparent}

其实完全可以缩写为：

.logo,.banner,.menu,
.bodyBg,.bodyBottom,.feeds .up,.feeds .down,.feeds .function,.feeds .page,
.links .up,.links .down,.links .mid,.photo .mid,.label .mid,
.calendar .mid,.callboard .up,.callboard .down,.callboard .mid,
.gbook .up,.gbook .down,.links .more,.add .ico,.add
{background:#transparent}


6、背景(backgrounds)

背景的属性如下：

background-color:#f00;
background-image:url("");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;

可以缩写为一句：background:#f00 url("") no-repeat fixed 0 0;

语法是：background:color image repeat attachment position;


7、边框(border)

边框的属性如下：

border-width:1px;
border-style:solid;
border-color:#000;

可以缩写为一句：border:1px solid #000;

语法是：border:width style color;


9、字体(fonts)

字体的属性如下：

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;

可以缩写为一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。
10、CSS代码不记大小写，换行，空白，只要格式对了就行。

CSS缩写对我们做博客好处在于能够简化代码使看的没那么冗赘，而最于做网站却很重要，
CSS样式表文件调用的速度跟其文件的大小有关，所以文件越小的话调用速度越快，
在某一方面可以提高网站页面的加载速度，而速度是一个网站至关重要的因素。

所以做CSS样式表文件的话应尽量缩写简化代码，像一些多余的空格，
还有比如我在整体模版六《锁心为你》所提供代码中的加注释等都应尽量删除。


下面是CSS缩写性质的列表以及它们所表示的常规性质：

Background（背景）：背景附件、背景颜色、背景图像、背景位置、背景重复
Border（边框）：边框颜色、边框风格、边框宽度
border-bottom（底部边框）：底部边框颜色、底部边框样式、底部边框宽度
border-left（左侧边框）：左侧边框颜色、左侧边框样式、左侧边框宽度
border-right（右侧边框）：右侧边框颜色、右侧边框样式、右侧边框宽度
border-top（顶部边框）：顶部边框颜色、顶部边框样式、顶部边框宽度
cue（声音提示）：前提示、后提示
font（字体）：字体、字号、字体样式、字体粗细、字体变体、线高度、字体大小调整、字体拉伸
list-style（列表样式）：列表样式图像、列表样式位置、列表样式类型
margin（空白）：顶部空白、右侧空白、底部空白、左侧空白
outline（大纲）：大纲颜色、大纲样式、大纲宽度
padding（间隙）：顶部间隙、右侧间隙、底部间隙、左侧间隙
pause（暂停）：后暂停、前暂停

猫性男孩

不错不错，很实用的东西