当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS常用属性缩写实例

CSS样式表
CSS教程:表格不被撑开的解决办法
网页制作教程:简单总结CSS的基础属性
css文件不能被正常载入的问题解决方法
css模块化的思想让后期维护变得简单
凹陷文字 推荐
CSS 实用实例(推荐)
标准化:表格
一个导航条布局的简单写法
CSS实现阴影文字效果
全面考察“禁用浏览器后退”
让2个DIV居中并排显示
从gb到utf-8
以前写的两个CSS树形菜单
何为“VML”、VML的基底知识
Meta标签详解
学习标准:笔记
多中语言实现判断客户访问用得是那个域名 然后转到对应的目录
解决IE5/IE5.5/IE6/FF的兼容性问题:CSS
CSS网页布局入门教程9:用CSS设计网站导航:横向导航
web标准知识:从p开始,循序渐进

CSS样式表 中的 CSS常用属性缩写实例


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


  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