淺談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（暫停）：後暫停、前暫停
附件是一款非常好用的CSS代碼編輯器，可以及時顯示效果。
()

