淺談css程式碼的簡化縮寫

現在很多人所用的CSS程式碼都很冗餘，其實很多都可以簡化縮寫的。
這次就根據自己所知道的來跟大家談談有關CSS代碼的簡化縮寫問題。
 
1、所有CSS代碼只要用一個style標記就可以了，沒必要每段都加一個，簡直是多餘。例如: 
body{background:url("") repeat fixed!important;}
 
.bodybg{background:url("") no repeat no scroll!important;}
 
: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;
SCRO -COLOR: #fff;
SCROLLBAR-3DLIGHT-COLOR: #000;
SCROLLBAR-ARROW-COLOR: #000;
SCROLLBAR-TRACK-COLOR: #EDF6F5;
SCROLLBAR-TRACK-COLOR: #EDF6F5;簡化合併為：
 
body {background:url("") repeat fixed!important;
SCROLLBAR-FACE-COLOR: #EDF6F5;
SCROLLBAR-HIGHLIGHT-COLOR: #EDF6F5;
SCROLLBAR-HIGHLIGHT-COLOR: #EDF6F5;
SCROLLBAR-HIGHLIGHT-COLOR:
SCROLLBAR-3DLIGHT-COLOR: #000;
SCROLLBAR-ARROW-COLOR: #000;
SCROLLBAR-TRACK-COLOR: #EDF6F5;
SCROLLBAR-DARKSHADOW-COL相同屬性控制的時候也可以合併在一起，各識別間用逗號隔開。例如：

.bodytop{background:#transparent;}
.bodybg{background:#transparent;}
 
可以簡化合併為：
 
.bodytop,.bodybg{background:#transparent;
 
.bodytop,.bodybg{background:#transparent; none;}
.bodyBottom{display:none;}
 
可以簡化合併為：
 
.bodytop,.bodyBottom{display:none;}


.feeds .text a; .function a{color:#000;} 
可以簡單合併為：
 
.feeds .text a,.feeds .function a{color:#000}
 
舉例具體大家得根據自己的狀況來簡化縮寫程式碼。
 
像現在很多人部落格上發的首頁透明模版的程式碼：
 
.logo
{background:#transparent}
.banner
{background:#transparent}
.menu}
.banner
{background:#transparent}
.menu}
.banner
{background:#transparent}
.menu}
{background:#transparent}
.bodyBottom
{background:#transparent}
.feeds .up
{background:#transparent}
.feeds .down
{backeds:#parent}. #transparent}
.feeds .page
{background:#transparent}
.links .up
{background:#transparent}
.links .down
{background:#transparent}
.links . }
.photo .mid
{background:#transparent}
.label .mid
{background:#transparent}
.calendar .mid
{background:#transparent}
.callboard .mid
{background:#transparent}
.callboard .mid
{background:#transparent}
.callboard . .callboard .down
{background:#transparent}
.callboard .mid
{background:#transparent}
.gbook .up
{background:#transparent}
.gbook .up
{background:#transparent}
.gbook .down
. .more
{background:#transparent}
.add .ico
{background:#transparent}
.add
{background:#transparent}
 
其實完全可以縮寫為：
 
.o.
,meno.
.bodyBg,.bodyBottom,.feeds .up,.feeds .down,.feeds .function,.feeds .page,
.links .up,.links .down,.links .mid,.photo .mid,. .mid,
.calendar .mid,.callboard .up,.callboard .down,.callboard .mid,
.gbook .up,.gbook .down,.links .more,.add .ico,.add
{back地址:#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) 1px; 
border-style:solid; 
border-color:#000; 

可以縮寫為一句話：border:1px solid #000; 
語法是：border:width9style#000; )

字體的屬性如下：
 
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%; 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程式碼編輯器，可以及時顯示效果。
()