我們在設(shè)計CSS時可以使用css縮寫,這樣可以減少你CSS文件的大小，而且更加容易閱讀和查找。

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

margin/padding

通常寫法,會遇到以下三種情況

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;

那么我們進行CSS縮寫后會讓你目驚口呆的效果.如下

margin:1px 10px 5px 20px;

margin:5px;

margin:0 10px 0 5px;

書寫順序是 margin:上 右 下 左 ,

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

其中padding和margin基本是一樣的寫法

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

border

通常寫法:

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

縮寫后:

border:1px solid #000;

書寫順序:border:寬度 邊框線種類 顏色;

Background

通常寫法:

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

縮寫后:

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

書寫順序:background:背景圖片 顏色 重復(fù)類型  定位;
         background:image   color  repeat   position;

Font

通常寫法:

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


縮寫后：

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

書寫順序:font:加粗 字體大小/行高 字體;

在使用Font縮寫時至少要有 字體大小和字體這兩項

font:字體大小 字體;

Color

通常寫法:

color:#000000;
color:#001188;

縮寫后:

color:#000;
color:#018;

16進制的色彩值時，如果每兩位的值相同，可以縮寫一個