当前位置:  编程技术>WEB前端

css下margin、padding、border、background和font缩写示例

    来源: 互联网  发布时间:2014-10-04

    本文导语:  下面用一些比较常用的属性来做示例。  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:...

下面用一些比较常用的属性来做示例。 

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(/tech-webtech/图片路径/index.html); 
  background-repeat:repeat-x; 
  background-position:5px 4px; 
  代码简化为:background:#CFF url(/tech-webtech/图片路径/index.html) 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

    
 
 
 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: background定义及介绍
  • css 之 background-position-x
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: background_color定义及介绍
  • css也疯狂! 用background 插入flash播放器
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: background_image定义及介绍
  • CSS3实例分享之多重背景的实现(Multiple backgrounds)
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: background_position定义及介绍
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: background_attachment定义及介绍
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: background_repeat定义及介绍
  • CSS background-attachment 属性
  • CSS3 background-origin 属性
  • CSS3 background-clip 属性
  • CSS background-color 属性
  • CSS3 background-size 属性
  • CSS background-position 属性
  • CSS background-image 属性
  • CSS background-repeat 属性
  • CSS background-blend-mode 属性
  • CSS background 属性
  • java命名空间javax.swing.text.html类css的类成员方法: css定义及介绍
  • <!--@import"css/cssset/.css-->,css/cssset/.css是什么意思?
  • java命名空间javax.swing.text.html类css的类成员方法: getattribute定义及介绍
  • CSS预处理器 Less CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: font定义及介绍
  • css强制换行 css强制不换行的css方法
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: margin定义及介绍
  • CSS代码格式化 CSS Beautify
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: padding定义及介绍
  • jquery css类用法(添加、修改与删除css)
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: border定义及介绍
  • CSS 框架 Simpl.css


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3