开店乐

开店乐电子商务研究 KaiDianLe.Com

网站地图 :

  搜索:

CSS代码缩写技巧

作者:佚名    文章来源:不详    点击数:    更新时间:2006-8-7    

Web网站可用性的关键指标是速度,更确切地说,是页面能以多快的速度出现在访问者的浏览器窗口里。影响速度的因素有很多种,包括Web服务器的速度、访问者的Internet连接情况,以及浏览器必须下载的文件大小。尽管你无法控制服务器和连接的速度,但是你可以控制构成网站Web页面的文件大小。

为了让网站能够更快,Web的建设者都会按常规地压缩和优化网站上的每一个图像文件,这常常使得为了将文件的大小减少几个百分点而牺牲了图像的质量。由于CSS样式表是纯文本文件,和图像相比相对较小,所以Web建设者很少考虑采取措施减少其CSS样式表文件的大小。但是,通过使用CSS缩写以及其他的一些简单技巧,你可以在很大程度上减少样式表的大小。在我对自己样式表的一次非正式的特别测试中,我把文件的大小降低了大约25-50%。

使用CSS的缩写性质
CSS的缩写性质(shorthand property)是一些专用的性质名,用来代替多个相关性质的集合。例如,间隙性质(padding property)是顶部间隙(padding-top)、右侧间隙(padding-right)、底部间隙(padding-bottom)和左侧间隙(padding-left)的缩写。

使用速写性质让你能够把多个性质/属性对(property/attribute pair)压缩进CSS样式表的一行代码里。例如,想一想下面的代码:
【文章来自:开店乐KaiDianLe.Com

.sample1 {
margin-top: 15px;
margin-right: 20px;
margin-bottom: 12px;
margin-left: 24px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 4px;
padding-left: 8px;
border-top-width: thin;
border-top-style: solid;
border-top-color: #000000;

将它用一些缩写性质来替代就能够把代码减少为下面这样,两者的实际效果是完全一样的:
.sample1 {
margin: 15px 20px 12px 24px;
padding: 5px 10px 4px 8px;
border-top: thin solid #000000;

要注意,缩写性质还有多个属性,每一个(属性)都对应一个被组合进入缩写性质的常规性质。属性由空白隔开。

当属性是类似的值的时候,例如用于边框空白性质(margin property)的线性测量的时候,接在缩写性质之后的属性的顺序很重要。属性的次序是从顶部(顶部的边框空白)开始,然后围绕格子(box)按顺时针次序继续。

如果缩写性质的所有属性都是相同的,那么你可以简单地列出单个属性,然后在前面将它复制四遍。因此,下面的两个性质是相等的:
margin: 5px 5px 5px 5px;

margin: 5px; 
类似的,你可以使用接在边框空白或者间隔性质之后的两个属性来代表顶部/底部和右侧/左侧属性对。
margin: 5px 10px 5px 10px;

margin: 5px 10px; 
属性的顺序在它们是不相似的值的时候是不重要的。因此,边框颜色、边框风格和边框宽度等属性可以以任何顺序接在大纲性质(outline property)之后。忽略某个属性等同于从样式规则里忽略掉对应的常规性质。

下面是CSS缩写性质的列表以及它们所表示的常规性质。
Background(背景):背景附件、背景颜色、背景图像、背景位置、背景重复 
Border(边框):边框颜色、边框风格、边框宽度 
border-bottom(底部边框):底部边框颜色、底部边框样式、底部边框宽度 
border-left(左侧边框):左侧边框颜色、左侧边框样式、左侧边框宽度 
border-right(右侧边框):右侧边框颜色、右侧边框样式、右侧边框宽度 
border-top(顶部边框):顶部边框颜色、顶部边框样式、顶部边框宽度 
cue(声音提示):前提示、后提示 
font(字体):字体、字号、字体样式、字体粗细、字体变体、线高度、字体大小调整、字体拉伸 
list-style(列表样式):列表样式图像、列表样式位置、列表样式类型 
margin(空白):顶部空白、右侧空白、底部空白、左侧空白 
outline(大纲):大纲颜色、大纲样式、大纲宽度 
padding(间隙):顶部间隙、右侧间隙、底部间隙、左侧间隙 
pause(暂停):后暂停、前暂停 
减少空白
减少CSS样式表大小的另一种方法是从文档里删掉大多数无用的空白。换句话说,将每条规则打破放进一行代码里,即把原来插入到代码里用来把每个性质/属性分割到不同行的换行符和缩进符删掉。

例如,下面的代码示例在内容上相同,但是第二个要精炼得多:
h1 {
font-size: x-large;
font-weight: bold;
color: #FF0000;


h1 {font-size: x-large; font-weight: bold; color: #FF0000} 
删掉注释

将注释从你的CSS代码里删掉是减少文件大小的另一种方式。尽管注释对于代码的阅读很有用,但是它无助于浏览器生成你的Web页面。很多Web建设者都习惯给每一行代码都加上注释,或者至少给每一条规则声明都加上。这样的慷慨注释在CSS样式表里是极少需要的,因为大多数CSS性质和属性都很容易阅读和理解。如果你对类、ID,以及其他的选择器都使用有意义的名称,你就可以省掉大多数的注释,同时仍然能够保持代码的可读性和可维护性。
h1 { /* Heading 1 style*/
font-size: x-large; /* x-large size */
font-weight: bold; /* Bold */
color: #FF0000; /* Red */

使用速写性质、删除无用的空白、省略注释都能够在很大程度上减少你CSS样式表文件的大小。这反过来会对加速你Web网站速度的总体目标作出小的、但是可能会是显而易见的贡献。

【日期:2006-10-19】【作者:不祥】【转载自:开店乐】

相关文章:
 最好的网上开店系统:凡人网络购物系统免费下载
 定位你的网站CI形象
 网页布局理念
 主页的艺术处理
 怎样设计首页?(解答)
 新颜:经典品牌logo的web2.0版
 世界顶尖网页设计师作品
 韩国站点精选
 服装网站
 商业网站设计主要原则
 几千个3D及素材网址收集!
 网站欣赏0131
 网站欣赏0130
 网站欣赏013
 网站欣赏0219
 网站欣赏0218
 网站欣赏0216
 网站欣赏0215
 网站欣赏0214
 网站欣赏0213
 网站欣赏0211
 网站欣赏0212
 网站欣赏021
 网站欣赏0119
 网站欣赏0118
 网站欣赏0117
 网站欣赏0115
 网站欣赏011
 网站欣赏113
 网站欣赏112
 网站欣赏111
 网站欣赏110
 网站欣赏109
 网站欣赏108
 网站欣赏108
 网站欣赏107
 网站欣赏107
 网站欣赏106
 网站欣赏105
 网站欣赏104
 网站欣赏103
 网站欣赏102
 网站欣赏101
 网站欣赏10
 网站欣赏99
 网站欣赏98
 网站欣赏97
 网站欣赏96
 网站欣赏95
 网站欣赏94
 网站欣赏93
 网站欣赏92
 网站欣赏91
 网站欣赏90
 网站欣赏9
 网站欣赏89
 网站欣赏88
 网站欣赏87
 网站欣赏86
 网站欣赏85
 网站欣赏84
 网站欣赏83
 网站欣赏82
 网站欣赏81
 网站欣赏80
 网站欣赏8
 网站欣赏79
 网站欣赏78
 网站欣赏77
 网站欣赏76
 网站欣赏75
 网站欣赏74
 网站欣赏73
 网站欣赏72
 网站欣赏71
 网站欣赏70
 网站欣赏7
 网站欣赏69
 网站欣赏68
 网站欣赏67
 网站欣赏66
 网站欣赏65
 网站欣赏64
 网站欣赏63
 网站欣赏62
 网站欣赏61
 网站欣赏60
 网站欣赏6
 网站欣赏59
 网站欣赏58
 网站欣赏57
 网站欣赏56
 网站欣赏55
 网站欣赏54
 网站欣赏53
 网站欣赏52
 网站欣赏51
 网站欣赏50
 网站欣赏5
 网站欣赏49
 网站欣赏48

版权所有:Kaidianle.Com  联系方式:Shnxn@Yhaoo.Com.Cn 京ICP备06028743号 在线留言