1、爲何要縮寫樣式？
對於瀏覽者而言，縮寫可以減少CSS代碼量，進而減少CSS文件體積，有利於訪問者更快的打開網頁；對於開發者而言，CSS代碼量少，閱讀簡潔明瞭；對於網站服務器而言，在相同帶寬下可以承受更多的訪問請求。
2、常用CSS樣式表縮寫語法總結
● 顏色(color)
16進制的色彩值，如果每兩位的值相同，可以縮寫一半
例如：#000000可以縮寫爲#000; #336699可以縮寫爲#369;
● 盒尺寸(padding、margin)
順序：從上開始，順時針轉；margin:上 右 下 左;
上下左右都相等: margin: 5px(上下左右); <==> margin: 5px 5px 5px 5px;
上下相等, 左右相等: margin: 5px(上下) 15px(左右); <==> margin: 5px 15px 5px 15px;
上下不等，左右相等： margin: 5px(上) 10px(左右) 20px(下); <==> margin: 5px 10px 20px 10px
● 邊框(border)
border-width:1px;
border-style:solid;
border-color:#000;
縮寫爲 ==> border:1px solid #000;
● 背景(Backgrounds)
background-color: #f00;
background-image: url(background.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;
縮寫爲 ==> background: #f00 url(background.gif) no-repeat fixed 0 0;
你可以省略其中一個或多個屬性值，如果省略，該屬性值將用瀏覽器默認值，默認值爲：
color: transparent;
image: none;
repeat: repeat;
attachment: scroll;
position: 0% 0%;
● 字體(fonts)
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 1em;
line-height: 140%;
font-family: Arial, 宋體;
縮寫爲 ==> font: italic small-caps bold 1em/140% Arial, 宋體;
font的縮寫，如果省略family，如這樣子：font: bold 14px/22px; 則在Firefox下是不生效的
完整的寫法是：font: bold 14px/22px arial, 宋體;
2、common.css 樣式表總結——解決CSS的瀏覽器兼容性問題，多年切圖工作的總結：）
/* 統一各個瀏覽器下 外邊距margin、內填充padding的默認值 */
html,body,a,h1,h2,h3,h4,h5,h6,p,div,ul,li,ol,dl,dt,dd,img,form,input,textarea,select,fieldset { margin:0px; padding:0px }
/* 統一標題公共樣式 text-shadow:gray 0px 0px 5px; 文字陰影 font-weight:800 平滑的加粗 */
h1,h2,h3,h4,h5,h6,b,strong { font-family:Arial,Verdana,sans-serif; font-weight:800 }
/* 網頁公用的屬性: 字體、文字顏色、背景色等 */
body,table,input,select,textarea { font-family:SimSun, "宋體", Arial; font-size:12px; }
body, table { background-color:white }
body { color:#636363; font-size:12px }
/* 控制英文字符連續自動換行 */
div,span,th,td,dt,dd,h1,h2,h3,h4,h5,h6,em,strong,i,a,b,a,p { word-break:break-all; word-wrap:break-word; }
ul,ol,dl { list-style-type:none }
select,input,select { vertical-align:middle }
img { border:0 none; text-align:absmiddle; background-color:transparent }
/* 表格居中顯示 */
table { margin-left:auto; margin-right:auto; border-width:0 none }
/* 默認鏈接的樣式設置 */
a { color:#000; text-decoration:none }
a:hover { text-decoration:underline }
/* 去a虛線框 cdl: clear dotted line */
.cdl, a:active { outline:none; blr:expression(this.onFocus=this.blur()) }
:focus { outline:none } /* for Firefox */
/* 清浮動 */
.clear { display:block !important; clear:both; height:0px; line-height:0px; font-size:0 }
/* 常用，採用單詞首字母縮寫方式命名：保持良好的命名風格很重要 ：） */
.tdn { text-decoration:none } /* 鏈接無下劃線 */
.ofh { overflow:hidden } /* 溢出隱藏 */
.tal { text-align:left } /* 內容左對齊 */
.tar { text-align:right } /* 內容右對齊 */
.tac { text-align:center } /* 內容居中 */
.fl { float:left } /* 左浮動 */
.fr { float:right } /* 右浮動 */
.m0a { margin:0 auto } /* 容器內水平居中 */
.bn { border:0 none !important; } /* 無邊框 */
3、技巧積累（持續補充...）
1）利用 margin: 0 auto; 實現水平居中，必須同時定義容器的寬度(width)纔會有效果；
2）關於Border的寫法，如果您想定義div的四個邊的顏色不同，而粗細和樣式都一樣，您可以這樣寫：
div.border2 { border:1px solid; border-color:color1 color2 color3 color4 }
四種顏色依次是上，右，下，左的顏色
3）兼容所有的瀏覽器都可以顯示半透明效果的寫法
.alpha50 {
filter: alpha(opacity=50); /* 支持 IE 瀏覽器 */
-moz-opacity: 0.5; /* 支持 FireFox 瀏覽器 */
opacity: 0.5; /* CSS標準.該屬性支持firefox, Safari和 Opera */
}
4）使用media指令引入兩種CSS：打印版本的css和屏幕顯示的css
screen">
print">
5）我們可以使用page-break-after，page-break-before控制打印時的分頁
6）使用縮進（text-indent）顯示圖片，而隱藏文字（對SEO友好）
.logo { background: url(xxx.gif) no-repeat; width:160px; height:60px; text-indent: -2000px; }
< h1 class="logo" > 在售產品 < / h1 >
7）100%的高度
爲了讓 < div id="content" >< /div > 容器自動延伸到整個頁面的高度，我們需要告訴和容器高度應爲整個頁面的高度。
html { min-height: 100%; _height:100%; }
body { margin: 0; padding: 0; min-height: 100%; _height:100%; }
#content { padding: 0 20px 0 20px; margin: auto; font: 1.5em arial, verdana; width: 960px; min-height: 100%; _height:100%; }
8）跨瀏覽器的盒陰影效果實例頁面
.shadow {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
9）哀悼日網站灰化CSS代碼
html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}