91网首页-91网页版-91网在线观看-91网站免费观看-91网站永久视频-91网站在线播放

CSS高手們經(jīng)常追求CSS代碼的精煉，結(jié)構(gòu)清晰，其中一個(gè)方向就是采用CSS簡(jiǎn)寫。通過CSS簡(jiǎn)寫可以讓你的CSS文件更小，更易讀。今天我們就歸納幾個(gè)經(jīng)常使用的CSS精簡(jiǎn)寫法
 

 盒子大小

這里主要用于兩個(gè)屬性：margin和padding，我們以margin為例，padding與之相同。盒子有上下左右四個(gè)方向，每個(gè)方向都有個(gè)外邊距：

[CSS在線]-示例代碼margin-top:1px;
margin-right:1px;
margin-botton:1px;
margin-left:1px;
這四個(gè)值縮寫的方式是：

[CSS在線]-示例代碼margin:1px 1px 1px 1px;
備注：縮寫的順序是上->右->下->左。順時(shí)針的方向。

如果四個(gè)空白數(shù)值相同還可以進(jìn)一步縮寫：

[CSS在線]-示例代碼margin:1px;//四個(gè)方向的邊距相同
更多的縮寫方式：

[CSS在線]-示例代碼margin:1px 2px;//上下邊距都為1px，左右邊距均為2px，等同于margin:1px 2px 1px 2px
margin:1px 2px 3px;//右邊距和左邊距相同，等同于margin:1px 2px 3px 2px;
margin:1px 2px 1px 3px;//注意，這里雖然上下邊距都為1px，但是這里不能縮寫。
邊框(border)

先介紹一下border的基本屬性：

•border-width:數(shù)字+單位;
•border-style: none || hidden || dashed || dotted || double || groove || inset || outset || ridge || solid ;
•border-color: 顏色 ;
border可以按照width、style和color的順序簡(jiǎn)寫：

[CSS在線]-示例代碼border:5px solid #369;
備注：border默認(rèn)的寬度是3px，默認(rèn)的色彩是black——黑色。border的縮寫中border-style是必須的。

我們還可以針對(duì)邊的每個(gè)屬性進(jìn)行精簡(jiǎn)縮寫,縮寫規(guī)則類似盒子大小的縮寫,如下：

[CSS在線]-示例代碼border-width：1px 2px 3px;
border-style：solid dashed dotted groove;
border-color: red blue white black;
背景(background)

還是照例先介紹一下background的基本語法

•background-color: color || #hex || RGB(% || 0-255) || RGBa;
•background-image:url();
•background-repeat: repeat || repeat-x || repeat-y || no-repeat;
•background-position: X Y || (top||bottom||center) (left||right||center);
•background-attachment: scroll || fixed;
background的簡(jiǎn)寫可以大大的提高css的效率：

[CSS在線]-示例代碼background:#fff url(img.png) no-repeat 0 0;
備注：background的簡(jiǎn)寫也有些默認(rèn)值：background:#fff url(img.png) no-repeat 0 0; background屬性的值不會(huì)繼承，你可以只聲明其中的一個(gè)，其它的值會(huì)被應(yīng)用默認(rèn)的。

熟練的運(yùn)用CSS簡(jiǎn)寫，精簡(jiǎn)CSS代碼，可以極大提高你的CSS代碼的可讀性。

該文章在 2010/8/13 22:54:49 編輯過