CSS屬性簡寫彙總

CSS代碼編寫的過程當中，代碼數量很是龐大，許多屬性會被反覆使用，這樣來來回回地敲打一樣的屬性名稱會佔用很多的時間。做爲一名優秀的web前端人員，應當瞭解記憶各類屬性的簡寫方式，用以提升自身的工做效率，縮減代碼數量，加強可讀性。做爲一名剛接觸不久的初學者，在網上搜集資料，整理了經常使用屬性的簡寫模式，供你們參考。

一、顏色color簡寫

在顏色值採用16進制，且每兩位的值相同，能夠簡寫一半。

1	color : #113366 ;

簡寫爲

1	color : #136 ;

二、邊距margin和padding簡寫

外邊距margin和內邊距padding在CSS中使用率是很高，margin和padding都有四個方向的邊距

1 2 3 4

padding-top : 2px ; padding-right : 2px ; padding-bottom : 2px ; padding-left : 2px ;

有四種簡寫方式，都很好記

1 2 3 4

padding : 1px ;//四個方向的邊距相同 padding : 1px 2px ;//第一個值表示上下邊距，第二個值表示左右邊距 padding : 1px 2px 3px ;//第一個值表示上邊距，中間值表示左右邊距，第三個值表示下邊距 padding : 1px 2px 3px 4px ;//邊距值以順時針方向顯示，上、右、下、左

三、邊框border簡寫

邊框有三個屬性

1 2 3 4 5

border-width： 1px 2px 3px 4px ; //上下左右，相似邊距的簡寫 border-style： solid dashed dotted groove ; border-color : red #ffffff ; 1 按照width、style和color的順序簡寫 1 border: 1px solid #ffffff ;//我的喜歡總結爲三字口訣「粗型色」

四、背景background簡寫

一共五個屬性，background採用簡寫將大大提供效率

1 2 3 4 5

background-color : #ffffff || transparent ; background-image : url () || none ; background-repeat : repeat || repeat-x || repeat-y || no-repeat ; background-position : X Y || ( top || bottom || center ) ( left || right || center ); background-attachment : scroll || fixed ;

background簡寫按順序以下

1	background : #fff url (img.gif) no-repeat 0 0 ;//我的總結五字口訣「色圖重定位」

background的屬性有默認值，且不會繼承，你能夠只聲明其中的一個，其它的值會被應用默認值。

1	background : transparent none repeat scroll top left ;

五、字體font簡寫

font有六個屬性，採用簡寫的話好比簡化代碼提供效率，不過簡寫規則要求比較高，要注意

1 2 3 4 5 6

font-style : normal || italic || oblique ; font-variant : normal || small-caps ; font-weight : normal || bold || bolder || || lighter || ( 100 -900 ); font-size : 16px || 1em ; line-height : normal || 16px ; font-family : arial , sans-serif ;

上圖能夠看出font簡寫規則中font-size和font-famil是必寫的，其餘的四個屬性可選，四個屬性默認值都爲normal，未聲明屬性則應用默認值。

1	font : italic normal bold 12px / 20px arial , sans-serif ;//我的慣用口絕「型轉粗，大高體」

六、列表list-style簡寫

估計你們用得最多的一個列表屬性是list-style:none;其實list-style也有三個屬性

1 2 3

list-style-type : none || disc || circle || square || decimal || lower-alpha || upper-alpha || lower-roman || upper-roman list-style-position :  inside || outside || inherit list-style-image :  ( url ) || none || inherit

list-style的默認屬性以下，三個都是可選屬性，未聲明則應用默認值，可是若是聲明list-style-image則

list-style-type無效。

1	list-style : disc outside none ;

經常使用的CSS簡寫規則總結完畢，CSS3樣式屬性簡寫待總結中。