CSS常见特性的编码简化案例

日期:2021-01-20 类型:科技新闻 

关键词:h5互动游戏,微信h5怎么制作,h5转盘抽奖,h5测试制作,凡科H5

  CSS编码简化在工作中中是是非非常有利的,也是必要的。在撰写CSS编码时,常常会出現冗余的编码,以便提升编码的品质及文档缩小到最少,使编码具备可读性,迫不得已把CSS编码简化。下面用1些较为常见的特性来做示例。
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
上一篇:css针对色调和文字特性的操纵 返回下一篇:没有了