分享
 
 
 

书写高效的样式表(CSS)的方法

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

CSS 被吹捧的好处之一就是它能减小页面大小,由此缩短下载时间,不仅仅是首页的载入,还包括样式表被缓存以后,后续页面的载入也被加快了的那部分时间。这没错,但首页载入时间的缩短几乎看不出来,这是因为 CSS 代码往往过于冗长了。

好吧,现在一切都不同了。学点高效地进行 CSS 编码的技巧吧,让你把样式表马上裁减到最小为止。自然,你可能看不到什么惊人的改变,但对于大站来说,微小的字节减少也很重要。

有很多地方可以减少代码的长度,包括 简记属性 (shorthand properties), 多重声明 (multiple declarations),默认值 (default values), 继承 (inheritance),和空白 (white space)。

简记属性

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

通常简记属性包括:

font (控制 "font-size", "font-weight", "line-height", 等等)

background (控制元素的背景,放置位置,重复次数,等等)

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

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

border (定义 box 边界 (border) 的属性 —— 有很多和边界有关的简记属性)

padding (定义 box 各侧的补白 (padding) 宽度)

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

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

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

盒侧边的简记属性

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

“钟面”

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

margin: 5px;

border-width: 5px;

padding: 5px;

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

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

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

margin: 10px 5px 3px 0;

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

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

改进的钟面

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

margin: 10px 5px;

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

margin: 10px 5px 20px;

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

边界 (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 属性,覆盖上面设置的宽度:

border: 10px solid red;

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

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

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

多重声明

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

一个 (所见即所得的) 布局编辑器恐怕给每个 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),或者称为下降选择符,就是一个空格。所以说不到非用不可的时候,删除空白这样的方法还是少用。

完结

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有