[技研]網頁設計師不可不知的各種CSS縮寫方式

我的工作裡

在我的工作中除了自己要寫到CSS外，偶爾也會接到同事的網頁需要修改CSS的，有些人習慣用Dreamweaver內建的CSS編寫器，而我則偏好直接寫Code，不管使用的是哪種方式，只要順手的，就是好方法!

不過，有時候接到別人的CSS，會看得很辛苦，因為個人偏好將CSS做縮寫，而如果你是使用Dreamweaver內建的CSS編寫器的話，大部分都可能會變成非縮寫方式。

這邊稍微整理一下各種CSS縮寫方式，方便不熟悉CSS的人可以了解與學習

使用CSS縮寫的好處

第一點--當然就是CSS原始碼可變得更精簡，檔案也就更小。

第二點--的話，單一項目僅需一列即可清楚呈現，維護上與查找上也比較方便。

第三點--看起來比較舒服啦~

舉例來說

外框的設定如果像是下面的就很囉唆：
border-top-width:1px;
border-right-width:1px;
border-bottom-width:1px;
border-left-width:1px;

border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;

border-top-color:#666;
border-right-color:#666;
border-bottom-color:#666;
border-left-color:#666;

 

以上這一大串的東西~我只要寫一行縮寫就可以搞定了，如下

border:1px solid #666;

就是這麼簡單，可以感受到使用縮寫的好處了吧~^^

CSS的縮寫方式

●文字：
font: bold italic 12px/1.5 "新細明體","華康娃娃體",arial,sans-serif;
font:寬度 樣式 大小/行高 字體
說明：大小與行高之間一定要加"/"斜線，當文字有設定行高時，必須要設定字體，FireFox才會認得，否則在FireFox中將沒有效果

 

●文字簡單寫法：
font: 12px/2 "新細明體",Arial;
font:字型大小 / 行高 字型;
(此寫法若是沒有寫字型進去的話，FireFox會沒有作用)

 

●一次設定所有外框屬性(僅適用於四邊的屬性都一樣時)：
border: 1px solid #FFF;
border: 外框寬度 外框樣式 外框色彩
每個屬性之間需空一個空格

 

●同時設定外框粗細的四種方式：
border-width: 值(上下左右都一樣) ;
border-width: 值(上) 值(右) 值(下) 值(左);
border-width: 值(上跟下) 值 (左跟右);
border-width: 值(上) 值(右與左) 值(下);

 

●同時設定外框樣式的四種方式：
border-syle: 值(上下左右都一樣);
border-style: 值(上) 值(右) 值(下) 值(左);
border-style: 值(上跟下) 值 (左跟右);
border-style: 值(上) 值(右與左) 值(下);

 

●同時設定外框色彩的四種方式：
border-color: 值(上下左右都一樣);
border-color: 值(上) 值(右) 值(下) 值(左);
border-color: 值(上跟下) 值 (左跟右);
border-color: 值(上) 值(右與左) 值(下);

 

●背景：
background: #FFF(色彩) url(image/test.gif)(圖片URL) no-repeat(重複方向) 0px(左/右位置) 0px(上/下位置);

 

●色彩設定：
#FFFFFF;  可寫成  #FFF;
#666666;  可寫成  #666;
#0066FF;  可寫成  #06F;
#FF00FF;   可寫成  #F0F;

說明：色碼值兩個為一組，代表顏色的數值，也就是說RGB三色，R(兩碼)G(兩碼)B(兩碼)，合起來就組成了6碼，如果代表每個色碼的兩個直是一樣的話，就可以只寫一碼。但是要注意!! #FF0003不可寫成#F003