[原文翻译]样式表编写效率手册

来源：未知(读取中...)　2005-6-13　【字体:大中小】　切换为

边框差异
border shorthand properties(边框简写属性)和padding(内边距)同样也可以使用这种“时钟”简写方法。border-width，border-color，border-style和padding和margin(边距)的操控方式相同。不过，border属性还是有一点差异的。border属性可以同时设置盒状容器的四条边框的border-width、border-style和border-color。

当四条边框全都一样时很好处理，但是如果他们不一样呢？难道我们还要回到从前诸如border-top、border-right的日子么？好吧，也许可以。幸运的是，我们另高招。

譬如说盒状容器各边框的式样和颜色都相同，唯独宽度各不相同。最直接有效的写法是照常使用基本的border简写属性定义border-width、border-style和border-color，然后单独使用border-width属性定义不同的边框宽度来覆盖前面的设置，象下面这样:

border: 10px solid red;
border-width: 10px 5px 3px 0;

如果四条边框的所有边框属性都各不相同，那么这个办法就派不上大用场了，不过这种情形毕竟不常发生。如果仅是border-style或者border-color属性各有变化，那么用这个办法稍作修改就能像处理border-width那样来处理这些属性了。

接下来我们一起来看另一种情况，看看高效的CSS编写方式有什么不同。

多重声明
譬如说我们有六个绝对定位的区块(Dreamweaver中的层)，它们全都一样，所不同的是它们彼此隔开一定距离横排在页面顶部。由于它们的页面定位不同，必须给它们取单独的类名或ID，除此之外它们其余的属性统统一样。

用排版编辑器的话或许会为每个ID单独编写样式规则，包括所有的字体规则、文本规则、定位声明等等。像这样不停地重复那些完全一样的规则看上去实在不是什么明智之举，不是么？没错。下面就是如何最大限度地精简这些规则的方法:

#first {left: 0;}
#second {left: 100px;}
#third {left: 200px;}
#fourth {left: 300px;}
#fifth {left: 400px;}
#sixth {left: 500px;}
#first, #second, #third, #fourth, #fifth, #sixth {
　position: absolute;
　top: 0;
　width: 75px;
　font-size: .9em;
　font-weight: bold;
　text-align: center;
　line-height: 1.4em;
　background-color: silver;
　color: navy;
　padding: 5px;
　border: 1px solid navy;
　}

通过逐个列出这些相同区块的ID，并用逗号紧跟一个空格来分隔这些ID，后面大段的样式规则将同时应用于所有这六个区块。显而易见，如果每个ID都重复定义这些属性，整个CSS就会臃肿不堪。这可能是唯一最有效减小样式表体积的办法了。

注意: 确保最后一个ID选择符后面没有跟逗号，而应该像上面的多重ID规则集代码样本写的一样。有些浏览器仍旧能显示这些区块，但是有些就会将这个认作是代码错误而不显示任何一个区块。

使用默认值
多数CSS属性都有初始默认值，而当你为元素的这些属性重新定义了值的时候，它们的默认值也就被覆盖了。例如内边距的各个属性，padding-top、padding-right、padding-bottom和padding-left，它们的初始值都是0。如果不希望目标元素有内边距，那么内边距属性就可以省略不写。

注意: 我们先前讨论的简写属性本身并没有默认值。通常各个值都取自简写模型中所表现的单个属性。虽然CSS 2 specification Property Index(属性索引)里列出的默认值里很多是none或者0，但浏览器通常自己会根据不同元素为某些属性设置不同默认值的。

例如: Opera浏览器预设body元素的内边距为8px。h1-h6标题和段落元素通常默认的边距都不为零。不同的浏览器，为lists(列表)和list-items(列表项)预设的内外边距非零默认值也不尽相同。

属性继承
避免编写冗余代码的另外一个办法就是注意子元素从父元素那里继承下来的属性。可以继承的属性着实不多，可其中很多还是不常用到的属性，像voice-family。常用的可继承属性的列出来也没几个(按字母顺序):

color — 颜色
font (and related properties) — 字体及相关属性
letter-spacing — 字距
line-height — 行高
list-style (and related properties) — 列表样式及相关属性
text-align — 文本对齐
text-indent — 文本缩进
text-transform — 文本转换
white-space — 空白
word-spacing — 词距

在某些旧版浏览器中继承特性存在很多问题，而现在的新版浏览器一般来说都能正确实现继承。只要了解了哪些属性可以继承，你就又能少写不少多余代码了。重申一下，要查阅完整的属性列表请查看CSS 2 Property Index(CSS 2 属性索引)。

空白的处理
这里说的空白不是CSS里那个有特定值的white-space属性，这里说的是样式表文件里面本来就存在的空白间隔。这些个间隔来自于那些用于产生新行的换行符，以及那些在单独一行里有助提高可读性的空格。尽管移除这些间隔可以省出几个字节的体积，但是通常也省不了多少。

假如这些空隔被移除了，样式表会变得晦涩难读，更别提以后做修改了。如果工程明确要求删除每一个多余的字节，那你最好新建一个方便阅读的“主”样式表文件，然后复制一份，再把其中所有的空白移除，这份样式表就是使用中的“现场版”样式表。要是今后要修改的话，在那份易读的主样式表里修改，再像上面那样复制一份并移除空白，继续作为“现场版”。

小心！有些空格是CSS编码中必需的，要是这些空格被移除了，CSS规则也会跟着改变并导致一些意外结果的发生。W3C的规范说明中要使用了诸如"space separated,"(以空格间隔)这样的措词，那么这些空格就是必需的。这种情况常见于简写属性的各个属性值之间。往往我们讲到包含选择符就讲到包含组合符，它就是一个空格，要是把选择符里所有的空格都移除，那可不是什么好主意。也许移除空格这样的活留给那些狂热分子最适合不过了，是吧？

总结
至此你已经学习了如何使你的样式表更简洁经济高效的几种方法。经常使用这些技巧的好处不仅仅是节省样式表体积、加快下载，更令样式表常葆清爽整洁，通常易读易懂的代码也易于后期必要的修改维护。即便你是用排版编辑器来创建你的样式表，你一样可以用本文中所提及的这些方法来将你的“成品”编写得更合理更高效！

Holly 'n John　e-mail
©positioniseverything
Last updated: July 3, 2004
Created November, 2003
Translated by POPO EVER on October 10, 2004

——————————　全文完　——————————

译者注: 本文在翻译过程中有几点引起我的注意，主要是一些专属名词如何翻译最为恰当，我原本也有看过不少国内的Web Standards相关的翻译作品以及中文本土作品，其间对于一些名词一直纠缠不清，各说一词，我也就暂且不去管他们了，汉语博大精深，想要统一一个单词往往不是件容易事，更何况本来就是“舶来”的术语。比如padding，有翻成“填充”的，有翻成“补白”的，还有翻成“补丁”，对于后二者我倒觉得可以接受，至少谐音可以方便洋文差的朋友记忆，不过我还是坚持把它翻成“内边距”，因为这样从表意上说最形象，padding本来就是边框到内部文本的距离么，不叫“内边距”叫什么。至于margin究竟是译作“空白”还是“留空”或是“间隙”、“间隔”、“边距”，哪个更好，我母亲从前是做高级编辑的，她跟我说应该叫“白边”，既然我已经把padding翻成“内边距”，那么看来margin也只能凑成一对地翻作“边距”喽。还有一个是box，见得最多的是翻成“盒模型”或“盒对象”，我也懒得去罗嗦什么了。无论如何，只是一己之见，也就故妄译之，但愿没有混淆视听~~~

上一页 [1] [2]