透明 发表于 2015-1-16 00:07:33

给大家带来CSS经常使用属性缩写实例

可以增加更多的用户而不需要建立独立的版本。可以一次设计,随处发布。
  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

那么什么是Div+CSS标准?Div+CSS的标准化设计到底有什么好处?

精灵巫婆 发表于 2015-1-18 05:15:51

HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器)

兰色精灵 发表于 2015-1-22 15:18:12

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

飘飘悠悠 发表于 2015-1-31 09:00:54

时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

蒙在股里 发表于 2015-2-6 18:59:43

每天上网看着那样多的网页,于是我才下定决心选择了网页制作这一门课程,目的就是希望以后能够做出一个完美的网页来。

愤怒的大鸟 发表于 2015-3-6 03:48:15

Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

透明 发表于 2015-3-12 20:50:20

学Dreamweaver技术的过程其实是一个增加信心的过程。

仓酷云 发表于 2015-3-20 03:56:54

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
页: [1]
查看完整版本: 给大家带来CSS经常使用属性缩写实例