首页 > > 网页制作 > css >

实现用CSS高效率进行网页编码的方法(2)

2008-02-23 08:40:07来源：互联网阅读 ()

　　一个 (所见即所得的) 布局编辑器恐怕给每个 ID 都各自写一套属性，包括字体的规则、文本的规则、位置的定义等等。可一遍遍地给这些 div 重复完全一样的规则未免笨了点，不是么？那这样就可以把这些规则减到最短了：

#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;
}

　　列出所有类似的这些 div 的 ID，用 , 和一个空格分隔，下面的规则块会被应用到所有这些 ID 上。显然这样的规则如果给每个 ID 都重复一遍，代码就膨胀得多了。这恐怕是最常用也最有效的缩短样式表方法了。

　　注意：注意最后一个 ID 选择符并没有跟着一个逗号。(若多了逗号) 有些浏览器中可能还能看到那些 div，另一些就有可能把这样的样式表视为错误而不显示任何一个 div 了。

　　默认值

　　许多 CSS 属性都有它们的默认值，如果这个属性没被定义取代，它们就将应用于 HTML 元素上。比如说每个补白属性中， padding-top , padding-right , padding-bottom , 和 padding-left 的初始值都是 0 。因此如果某个元素不需要任何的补白，自然就可以不设置补白的那些属性了。

　　注意：那些简记属性——比如我们先前讨论过的—— 里面，或者其本身都没有什么默认的值。毕竟简记属性其实只是独立属性的一种重现而已，所以如果硬说它们有默认值的话，采用的也是独立属性的那些默认值。尽管 CSS 规范的 Property Index 一节中规定的许多默认值都是 none 或 0 ，浏览器们却往往给不同的属性设置一些不同的默认值。

　　例：Opera 浏览器给 body 元素设置了 8px 的补白。h1-h6 标题和段落，默认都有非零的边白。列表和列表子项中用到的默认边白和补白，每个浏览器都有所不同。

　　继承

　　另一个避免写出冗余代码的方法是，了解哪些属于父元素的属性会由子元素继承下来。会被继承的属性只有很少一些，而且其中大部分是不常用的，比如 voice-family 。所以列个能继承的常用属性的表，其实是很短的，下面就是按字母顺序排出的：

color
font (及其相关属性)
letter-spacing
line-height
list-style (及其相关属性)
text-align
text-indent
text-transform
white-space
word-spacing

　　在某些老式浏览器中，继承功能可能有些问题，然而大部分现代浏览器在这方面都处理得很正确。记住上面这个列表，可以让你少写点多余的代码。当然了，如果你想看看完整的列表，还是参考 CSS 2 Property Index。

　　空白

　　并非指的是 CSS 的 white-space 属性，这个属性早有确定的值了。我们说的是样式表本身含有的那些空白。空白常用于换行字符，和在一行里面用来改进可读性的空格。尽管把它们都删除可能会剩下个把字节，但好处毕竟有限。

　　关键是，如果把它们都删除了，CSS 文件就会变得非常难读，更难修改。要是你真的打算这么做，不妨创建一个主 CSS 文件，再根据它生成一个删除了所有空白的副本，修改的时候只修改主文件，根据主文件重新生成一次副本就行了。

　　请注意，CSS 编码中需要一些空白，删除那些必要的会导致你未曾预料的问题。如果 W3C 规范中用了 "space separated" 这样的语句，那么空格就不可省略。常见的像简记属性中分隔值的那些空格，还有下降合并符 (descendant combinator)，或者称为下降选择符，就是一个空格。所以说不到非用不可的时候，删除空白这样的方法还是少用。

　　最后

　　你现在学会了好几种让你的样式表更高效的方法，益处是在这些技巧下，不仅下载时间被减少了，而且清晰、易于理解、更改的代码随之而来。就算你用排版工具来编辑样式表，也可以在最后用这些方法将其改定为高效的样子。