• 首页
• 域名注册
• 虚拟主机
• 网站建设
• 服务器租用
• 营销推广
• 网站程序
• 前端开发
• 移动互联网
• 企业邮箱

• 当前位置：创新互联 >> 常见问题 >> 前端开发 >> css >> CSS属性简写，为网页加载提速

CSS属性简写，为网页加载提速

• 作者：创新互联 文章来源：前端开发部 点击数： 更新时间：2009-10-13
• 通过使用CSS 缩写以及其他的一些简单技巧，你可以在很大程度上减少样式表的大小，以有效的为网页加载提速。
  
  【1】、CSS字体属性的简写优化：例如以下的CSS字体属性：
  .mydiv {
  font-family:Verdana, Geneva, sans-serif;
  font-size:12px;
  font-weight:bold;
  line-height:180%;
  font-variant:small-caps;
  font-style:italic;
  }
  可以优化简写为一行：
  .mydiv {
  font: bold italic small-caps 12px/180% Verdana, Geneva, sans-serif;
  }
  同时将字体的六个属性简写为一行，这样便节省下了五行代码；
  
  【2】、magin/padding属性优化：例如我们定义一个div，设置它的class为：box
  box {
  margin-top:20px;
  margin-bottom:30px;
  margin-left:10px;
  margin-right:15px;
  }
  这样代码我们可以简写为：
  box {
  margin:20px 15px 30px 10px;
  }
  magin/padding属性优化规则是：四个值：将 边距的上、右、下、左值依次写出来， 具体的可再参考一下上面的代码，三个值：假设是只有box{ margin:20px 15px 10px;} 代码的缩写规则是 上、左右、下；即左右的边距是15px；两个值：例如box{ margin:20px 15px;}，代码的缩写规则是 上下、左右，即上线的边距是 20px，左右是15px;
  在padding属性中同理；
  
  【3】、border属性的缺省优化：
  通常可将border的属性
  css {
  border-width:3px;
  border-style:solid;
  border-color:#f90;
  }
  优化简写为：
  css{ border:3px solid #f90;}
  什么是缺省优化呢？还是拿上面的例子出发：以上代码实现的是边框3像素、样式为solid、颜色为#f90；而实际中我们只需要设置其颜色就可以 了，因为 border-style的缺省值即为：style，所以solid;可以省去不写，而border-width的缺省值为：medium，差不多为 3-4px,所以3px这个属性值可以省去不写，这样这行代码其实我们就可以简写为 boder-color:#f90;就可以了。
  同理其他的一些css属性值也是如此，在属性值和缺省值相等或相同的情况下可以省去不写。
• CSS基础教程 将图像设置为背景 :上一篇
  css解决英文字符与阿位伯数字自动换行 :下一篇