CSS常用属性缩写实例

(编辑:jimmy 日期: 2024/12/25 浏览:2)


  CSS代码简化在工作中是非常有益的,也是必要的。在编写CSS代码时,经常会出现冗余的代码,为了提高代码的质量及文件压缩到最小,使代码具有可读性,不得不把CSS代码简化。下面用一些比较常用的属性来做示例。
相关CSS缩写文章:CSS代码缩写实例以及CSS缩写原因总结  CSS缩写6个图例总结
margin
  margin-top:1px;
  margin-right:1px;
  margin-bottom:1px;
  margin-left:1px;
  代码简化为:margin:1px
  margin-top:1px;
  margin-right:2px;
  margin-bottom:1px;
  margin-left:2px;
  代码简化为:margin:1px2px
  margin-top:1px;
  margin-right:2px;
  margin-bottom:3px;
  margin-left:2px;
  代码简化为:margin:1px2px3px
  margin-top:1px;
  margin-right:2px;
  margin-bottom:3px;
  margin-left:4px;
  代码简化为:margin:1px2px3px4px
  注意:当属性值是0的时候单位可以不写如:0px直接就写成0
padding
  padding的书写方法和margin相类似
  padding-top:1px;
  padding-right:1px;
  padding-bottom:1px;
  padding-left:1px;
  代码简化为:padding:1px
  padding-top:1px;
  padding-right:2px;
  padding-bottom:1px;
  padding-left:2px;
  代码简化为:padding:1px2px
  padding-top:1px;
  padding-right:2px;
  padding-bottom:3px;
  padding-left:2px;
  代码简化为:padding:1px2px3px
  padding-top:1px;
  padding-right:2px;
  padding-bottom:3px;
  padding-left:4px;
  代码简化为:padding:1px2px3px4px
border
  border-width:1px;
  border-style:solid;
  border-color:#000000;
  代码简化为:border:1pxsolid#000
background
  background-color:#CCFFFF;
  background-image:url(图片路径);
  background-repeat:repeat-x;
  background-position:5px4px;
  代码简化为:background:#CFFurl(图片路径)repeat-x5px4px
font
  font-size:26px;
  font-weight:bold;
  font-family:“宋体”;
  代码简化为:font:26pxbold“宋体”
color属性值
  color:#000000;
  color:#ff0000;
  代码简化为:color:#000,color:#f00