加入收藏 | 网站地图 | | RSS | WAP
你好,游客 登录 注册 搜索
背景:
阅读内容  领跑条码、标签打印软件 | 来电弹出客户资料

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

[日期:2012-02-10] 作者: 来源: [字体: ]

通过使用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属性值也是如此,在属性值和缺省值相等或相同的情况下可以省去不写。

关键词:提速  简写 

收藏 推荐 打印 | 录入:blue1000 | 阅读:
本文评论   查看全部评论 (0)
表情: 姓名: 字数
点评:
       
评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事/刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款