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-p_w_picpath: url(background.gif); background-repeat: no-repeat; background-p_w_upload: fixed; background-position: 0 0; 缩写为 ==> background: #f00 url(background.gif) no-repeat fixed 0 0;
你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：
color: transparent; p_w_picpath: none; repeat: repeat; p_w_upload: 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);}