当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > css下margin、padding、border、background和font缩写示例

CSS样式表
web标准常见问题集合4
web标准常见问题集合5
我的一些关于web标准的思考笔记(一)
关于filter滤镜应用于图片的两种创意
Div+Css(+Js)菜单代码及制作工具
css写菜单:简洁注释版
标准布局应用:显示/隐藏侧边栏 [附详细注解]
小心:CSS代码书写顺序不同,导致显示效果不一样
解决鼠标在 flash 链接上不停闪动的问题(web页面中)
从gb到utf-8
html在线编辑器的更新[2006-05]
对hao123进行重构
韩国商业网站设计分析
模仿combox(select)控件,不用为美化select烦恼了。
【已解决】标签页刷新问题
以前写的两个CSS树形菜单
CSS样式表的背景渲染效率
第1天:选择什么样的DOCTYPE
第2天:什么是名字空间
第3天:定义语言编码

CSS样式表 中的 css下margin、padding、border、background和font缩写示例


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 67 ::
收藏到网摘: n/a

CSS代码简化在工作中是非常有益的,也是必要的。在编写CSS代码时,经常会出现冗余的代码,为了提高代码的质量及文件压缩到最小,使代码具有可读性,不得不把CSS代码简化。 下面用一些比较常用的属性来做示例。
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:1px 2px
  margin-top:1px;
  margin-right:2px;
  margin-bottom:3px;
  margin-left:2px;
  代码简化为:margin:1px 2px 3px
  margin-top:1px;
  margin-right:2px;
  margin-bottom:3px;
  margin-left:4px;
  代码简化为:margin:1px 2px 3px 4px
  注意:当属性值是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:1px 2px
  padding-top:1px;
  padding-right:2px;
  padding-bottom:3px;
  padding-left:2px;
  代码简化为:padding:1px 2px 3px
  padding-top:1px;
  padding-right:2px;
  padding-bottom:3px;
  padding-left:4px;
  代码简化为:padding:1px 2px 3px 4px
border
  border-width:1px;
  border-style:solid;
  border-color:#000000;
  代码简化为:border:1px solid #000
background
  background-color:#CCFFFF;
  background-image:url(图片路径);
  background-repeat:repeat-x;
  background-position:5px 4px;
  代码简化为:background:#CFF url(图片路径) repeat-x 5px 4px
font
  font-size:26px;
  font-weight:bold;
  font-family: “宋体”;
  代码简化为:font:26px bold “宋体”
color属性值
  color:#000000;
  color:#ff0000;
  代码简化为:color:#000, color:#f00