易希飞

Shopex4.9
市场占有最好的商城建站系统

经典的免费网店系统

Shopex4.9集海量模板、交易支付、团购、秒杀、会员营销等于一身,轻松搭建网上商店,快速扩张营销推广。

了解Shopex4.9
网站首页 > 建站学院 > 网站建设技巧

CSS高效编码技巧(1)

2017-02-04 15:21:14 易希飞 阅读

 CSS 被吹捧的好处之一就是它能减小页面大小,由此缩短下载时间,这里向大家简单介绍一下进行高效CSS编码技巧,有很多地方可以减少代码的长度,包括简记属性 (shorthandproperties),多重声明(multipledeclarations),默认值(defaultvalues),继承 (inheritance),和空白(whitespace)。

进行高效CSS编码技巧

在前面的文章中,我们提到了用什么软件来编写CSS文件。今天我们来看一些介绍:如何才能高效的进行CSS编码?

CSS被吹捧的好处之一就是它能减小页面大小,由此缩短下载时间,不仅仅是首页的载入,还包括样式表被缓存以后,后续页面的载入也被加快了的那部分时间。这没错,但首页载入时间的缩短几乎看不出来,这是因为CSS代码往往过于冗长了。好吧,现在一切都不同了。学点高效地进行CSS编码的技巧吧,让你把样式表马上裁减到最小为止。自然,你可能看不到什么惊人的改变,但对于大站来说,微小的字节减少也很重要。

有很多地方可以减少代码的长度,包括简记属性(shorthandproperties),多重声明(multipledeclarations),默认值(defaultvalues),继承(inheritance),和空白(whitespace)。

简记属性

Zeroingpagemargins提到了一组这样的简记属性,但对于此还有更多的。

通常简记属性包括:

◆font(控制"font-size","font-weight","line-height",等等)background(控制元素的背景,放置位置,重复次数,等等)

◆list-style(设置列表元素前边那个“原点”的属性)

◆margin(定义box各侧的边缘空白(margin)宽度)

◆border(定义box边界(border)的属性——有很多和边界有关的简记属性)padding(定义box各侧的补白(padding)宽度)

上述项目是链接至W3CCSS2规范的相关章节的。

例 如,font属性是用于同时设置font-style,font-variant,font-weight,font-size,line- height,和font-family的简记属性。当然,它们并非全都必须写在简记属性中。一旦在简记属性中忽略了其中某个,那些缺失的属性都将被设置 为它们的初始值,就像W3C规范中fontproperty一节提到的那样。若需要控制很多和字体相关的属性,使用这个简记属性就可以省下样式表中的大量 字节了。

background和list-style属性也是如此。现在还剩下关于CSS盒(box)模型四边的那些属性和一点没法归类的杂碎了。

盒侧边的简记属性

任 何块级(blocklevel)元素(像div,表格,列表,段落等)的四边都有边白(margin),边界(border),和补白 (padding),都可以分别设置不同的宽度。对于边界(border)来说,还能给每边分配不同的border-style和border- color。若要一条条地显式地指明所有这些属性,代码就会变得很冗长。使用简记规则的意义正在于此:彻底地减少这样负担。

“钟面”

当需要指定这三类“盒侧”属性之一,而且各侧的情况又是一样的时候,使用简记属性最基本的功能就行了:

ExampleSourceCode 

margin:5px;border-width:5px;padding:5px;

注意:要让边界显示出来,还必须设置border-style属性,否则单有border-width边界是显示不出来的。既可以直接通过border-style来设置它,也可以通过border属性。

然而很有可能某一侧需要一个不同的值,这时CSS的“钟面”特性就上台了。把此处的盒子想象为一个钟面,当指针指向12点时,表示盒子的正上方,这就是简记属性中第一个值的含义;下一个是3点,这是盒子的右侧;接下来是6点,表示盒子的下方;最后呢是9点,盒子的左侧。

让我们看看这个例子吧。在页面中我们需要一个10px上边白,5px右边白,3px下边白,无左边白的盒子。则margin简记属性应该这么写:

ExampleSourceCode

margin:10px5px3px0;

在属性的声明中,几个值必须也只能用空格来分隔。而且只要那个值不是零,就必须给它指定单位。

为什么零宽度的边白就不需要指定单位了呢?因为零个任何单位(px,em,%,等等)的值也就等于任意其他单位的值。


改进的钟面

当某些值重复时,这些“盒侧”属性还能压榨得更短。前面提到过,若各侧都一样,可以只指定一个,让它应用到全部。而一旦顶部和底部的样式是一致的,左侧和右侧却是另一种,margin的代码可以这么写:

ExampleSourceCode 

margin:10px5px;

这行代码把顶部和底部的边白设置为10px,两侧设为5px。最后一个技巧是这样的:若顶部和底部的不同,两侧的却是一样的,比如上边白10px,左右边白5px,下边白20px,我们可以这么写:

ExampleSourceCode 

margin:10px5px20px;

这些缩写完全是根据给出值的数目和顺序决定的。总结起来,一个值=所有各侧;两个值=上下一种,两侧另一种;三个值=上侧一种,左右同一种,下侧一种;当然还有四个值=按照顺时针。好了,现在不那么难记住了吧?

边界(border)的一些区别

同 样的钟面简记模型也可以用于border简记属性和padding。border-width,border-color,border-style,与 padding也采用和margin一样的方式工作。然而处理border属性时却有点不同。border属性是同时给盒子的各侧设置border- width,border-style,及border-color属性的。

如果所有四侧的样式都一样,那当然不会有什么问题。可万一他们不同呢?我们还得回去用那些老式的border-top,border-right们?没错,是可以。但幸好我们还有更有效率一点的方法。

考 虑我们这个盒子的各个边界有同样的style和color,但宽度不同的情况,最有效的方法是,先像往常一样用border简记法来定义好border- width,border-style,和border-color;然后再设置一次border-width属性,覆盖上面设置的宽度:

ExampleSourceCode 

border:10pxsolidred;  border-width:10px5px3px0;

如 果所有的边界属性(width、style和color)都各侧不同,那上面的方法恐怕就没什么用了,但通常不会遇到这么怪异的情况。如果变化的属性仅仅 是border-style或者border-color的话,上述的方法改改就可以像border-width的情况那样用了。

下面我们看看在另一种情形下书写高效的CSS会带来什么改变。

多重声明

考虑我们有6个采用绝对定位的div(比如Dreamweaver里的层),且它们的其他属性都一样,只不过在页面中的位置不同。因为它们的位置不同,自然应该有不同的ID或者是class,但剩下的属性还是一样的。

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

ExampleSourceCode

#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:1pxsolidnavy;  }

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

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

默认值

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

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

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

继承

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

ExampleSourceCode 

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

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

空白

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

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

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

最后

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