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

通过使用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属性简写为网页加载提速
转载来于：https://www.cdcxhl.com/news41/322241.html

成都网站建设公司_创新互联，为您提供网站收录、App开发、自适应网站、营销型网站建设、做网站、品牌网站制作

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联