减小字体
增大字体- ·上一篇文章：IE下绝对定位的元素不能响应鼠标的bug修正
- ·下一篇文章：巧用CSS为图片添加修饰点缀效果
去掉CSS赘余代码，CSS可以更简洁
本篇文章适合css新手学习，对于已经掌握了css的朋友们也可以通过本片文章来复习知识。
作者通过实践，认为在有些情况下css的代码是可以更加简洁的，多数情况下是因为新手对于一些具有多属性的元素代码不能精简来写造成的。
精简的代码对于网页是有莫大的好处的，对于浏览者访问速度会有一定的提升，另外对于搜索引擎也更加可以抓取网页关键内容。废话不说了，下面就看看笔者总结的可以精简的代码:
| 以下为引用的内容：
1.Margin & Padding 例1： .div { margin-top:10px; margin-right: 5px; margin-bottom:30px; margin-left:0px; } |
精简后代码如下：
| 以下为引用的内容：
.div { margin:10px 5px 30px 0;}) 例2： .div { margin-top:10ox; margin-right:20px; margin-bottom:0; margin-left:20px; } |
精简后代码：
| 以下为引用的内容：
.div { margin:10px 20px 0; } 例3： .div { margin-top:0; margin-right:auto; margin-bottom:0; margin-left:auto; } |
精简后代码：
| 以下为引用的内容：
.div { margin:0 auto; } 例4： .div { margin-top:50px; margin-right:50px; margin-bottom:50px; margin-left:50px; } |
精简后代码：
| 以下为引用的内容：
.div { margin:50px; } 2.border的缩写 例1： .div { border-width:5px; (thin,thick,medium,set vaule)(default=medium) border-style:dotted; (solid,dashed,dotted,double,etc)(default=none) border-color:blue; (named,hex,rgb or 0-255)(default=value of elements/elements parent color property) } |
精简后代码：
| 以下为引用的内容：
.div { border:5px dotten blue; } 例2： .div { border-right-width:2px; border-right-style:solid; border-right-color:#666666; } |
| 以下为引用的内容：
.div { border-right:2px solid #666; } 例3： .div { border-top-width:3xp; border-right-width:2px; border-bottom-width:3px; border-left-width:2px; } |
| 以下为引用的内容：
.div { border-width:3px 2px; } 3.Background缩写 .div { background-color:#CCCCCC; (named,hex,rgb,0-255)(default=transparent) background-image:url(images/bg.gif); (url or none)(defaule=none) background-repeat:no-repeat; (repeat,repeat-x,repeat-y or no-repeat)(default=repeat) background-attachment:scroll; (fixed or scoll)(default=scroll) background-position:top left; (top,right,left,bottom or center)(default=0% 0%) } |
精简后代码：
| 以下为引用的内容：
.div { background:#CCC url(images/bg.gif) no-repeat 0 0; } 4.font .div { font-family:Verdana,Arial,Helvetica; font-size:12px; font-weight:bold; font-style:italic; font-variant:normal; line-height:1.5; } |
精简后代码：
| 以下为引用的内容：
.div { font:italic bold 12px/1.5 Verdana,Arial,Helcetica; } |
5.list缩写
| 以下为引用的内容：
.div { list-style-image:url(images/bullet.gif); list-style-position:inside; list-style-tupe:squere; } |
精简后的代码：
| 以下为引用的内容：
.div { list-style:square inside url(images/bullet.gif); } |
6.颜色的缩写
| 以下为引用的内容：
Aqua:#00ffff to #0ff Black:#000000 to #000 Blue:#0000ff to # 00f Dark Grey:#666666 to #666 Fuchsia:#ff00ff to #f0f Light Grey:#cccccc to #ccc Lime:#00ff00 to #0f0 Orange:#ff6600 to #f60 White:#ffffff to #fff Yellow:#ffff00 to #ff0 |
以上元素多属性，因此在某些时候可以遵从一定的规律对它们进行缩写。
更多精彩内容正在整理中，欢迎继续浏览。
文章来源：小帅博客 (http://www.lam5.cn )转载请保留链接。谢谢合作。