CSS常用属性缩写实例

(编辑:jimmy 日期: 2024/11/2 浏览: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

一句话新闻

微软与英特尔等合作伙伴联合定义“AI PC”:键盘需配有Copilot物理按键
几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。