我們?cè)谠O(shè)計(jì)CSS時(shí)可以使用css縮寫(xiě),這樣可以減少你CSS文件的大小，而且更加容易閱讀和查找。

css縮寫(xiě)的主要規(guī)則如下：

margin/padding

通常寫(xiě)法,會(huì)遇到以下三種情況

margin-top:1px;
margin-right:10px;
margin-bottom:5px;
margin-left:20px;

margin-top:5px;
margin-right:5px;
margin-bottom:5px;
margin-left:5px;

margin-top:0px;
margin-right:10px;
margin-bottom:0px;
margin-left:5px;

那么我們進(jìn)行CSS縮寫(xiě)后會(huì)讓你目驚口呆的效果.如下

margin:1px 10px 5px 20px;

margin:5px;

margin:0 10px 0 5px;

書(shū)寫(xiě)順序是 margin:上 右 下 左 ,

在CSS中.值為0的時(shí)候可以將單位省略不寫(xiě)就像第三種寫(xiě)法一樣.

其中padding和margin基本是一樣的寫(xiě)法

怎么樣.是不是大吃一驚.是的.CSS縮寫(xiě)就是這樣做到的.

border

通常寫(xiě)法:

border-width:1px;
border-style:solid;
border-color:#000;

縮寫(xiě)后:

border:1px solid #000;

書(shū)寫(xiě)順序:border:寬度 邊框線種類(lèi) 顏色;

Background

通常寫(xiě)法:

background-image:url(bg.png);
background-color:#00f;
background-repeat:no-repeat;
background-position:0 0;

縮寫(xiě)后:

background:url(bg.png) #00f no-repeat 0 0;

書(shū)寫(xiě)順序:background:背景圖片 顏色 重復(fù)類(lèi)型  定位;
         background:image   color  repeat   position;

Font

通常寫(xiě)法:

font-family:"宋體";
font-size:2em;
line-height:180%;
font-weight:800;


縮寫(xiě)后：

font:800 2em/180% "宋體";

書(shū)寫(xiě)順序:font:加粗 字體大小/行高 字體;

在使用Font縮寫(xiě)時(shí)至少要有 字體大小和字體這兩項(xiàng)

font:字體大小 字體;

Color

通常寫(xiě)法:

color:#000000;
color:#001188;

縮寫(xiě)后:

color:#000;
color:#018;

16進(jìn)制的色彩值時(shí)，如果每?jī)晌坏闹迪嗤?，可以縮寫(xiě)一個(gè)