2007年10月31日 星期三

[技研]網頁設計師不可不知的各種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

1 則留言:

ant2legs 提到...

歡迎使用我的線上手冊:
HTML,
CSS,
Javascript