常用CSS精簡(jiǎn)縮寫方法都有哪些

這篇文章給大家介紹常用CSS精簡(jiǎn)縮寫方法都有哪些，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

熟練的運(yùn)用CSS縮寫，精簡(jiǎn)CSS代碼，可以極大提高你的CSS代碼的可讀性，這里和大家分享一下幾種常用CSS精簡(jiǎn)縮寫方法，通過(guò)CSS縮寫可以讓你的CSS文件更小，更易讀。

常用CSS精簡(jiǎn)縮寫方法歸納

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

盒子大小

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

示例代碼

margin-top:1px;  margin-right:1px;  margin-botton:1px;  margin-left:1px;

這四個(gè)值進(jìn)行CSS縮寫的方式是：

示例代碼

margin:1px1px1px1px;

備注：縮寫的順序是上->右->下->左。順時(shí)針的方向。

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

示例代碼

margin:1px;//四個(gè)方向的邊距相同

更多的CSS縮寫方式：

示例代碼

margin:1px2px;//上下邊距都為1px，左右邊距均為2px，等同于margin:1px2px1px2px  margin:1px2px3px;//右邊距和左邊距相同，等同于margin:1px2px3px2px;  margin:1px2px1px3px;//注意，這里雖然上下邊距都為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)寫：

示例代碼

border:5pxsolid#369;

備注：border默認(rèn)的寬度是3px，默認(rèn)的色彩是black——黑色。border的縮寫中border-style是必須的。

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

示例代碼

border-width：1px2px3px;  border-style：soliddasheddottedgroove;  border-color:redbluewhiteblack;

背景(background)

還是照例先介紹一下background的基本語(yǔ)法

background-color:color||#hex||RGB(%||0-255)||RGBa;  background-image:url();  background-repeat:repeat||repeat-x||repeat-y||no-repeat;  background-position:XY||(top||bottom||center)(left||right||center);  background-attachment:scroll||fixed;

background的簡(jiǎn)寫可以大大的提高CSS的效率：

示例代碼

background:#fffurl(img.png)no-repeat00;

備注：background的簡(jiǎn)寫也有些默認(rèn)值：background:#fffurl(img.png)no-repeat00;background屬性的值不會(huì)繼承，你可以只聲明其中的一個(gè)，其它的值會(huì)被應(yīng)用默認(rèn)的。

關(guān)于常用CSS精簡(jiǎn)縮寫方法都有哪些就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。