天极传媒:
天极网
比特网
IT专家网
52PK游戏网
极客修
全国分站

北京上海广州深港南京福建沈阳成都杭州西安长春重庆大庆合肥惠州青岛郑州泰州厦门淄博天津无锡哈尔滨

产品
  • 网页
  • 产品
  • 图片
  • 报价
  • 下载
全高清投影机 净化器 4K电视曲面电视小家电滚筒洗衣机
您现在的位置: 天极网 > 软件 > 网页>新闻>CSS编码的技巧

高效的进行CSS编码的技巧

Levelup2007-09-13 10:08我要吐槽

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

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

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

  简记属性

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

  通常简记属性包括:  

以下是引用片段:
      Example Source Code font (控制 "font-size", "font-weight", "line-height", 等等) background (控制元素的背景,放置位置,重复次数,等等)
  list-style (设置列表元素前边那个“原点”的属性)
  margin (定义 box 各侧的边缘空白 (margin) 宽度)
  border (定义 box 边界 (border) 的属性 —— 有很多和边界有关的简记属性) padding (定义 box 各侧的补白 (padding) 宽度)

  例如, 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 。若要一条条地显式地指明所有这些属性,代码就会变得很冗长。使用简记规则的意义正在于此:彻底地减少这样负担。

  “钟面”

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

以下是引用片段:
Example Source Code margin: 5px;border-width: 5px;padding: 5px;

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

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

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

以下是引用片段:
Example Source Code margin: 10px 5px 3px 0;

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

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

  改进的钟面

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

以下是引用片段:
Example Source Code margin: 10px 5px;

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

以下是引用片段:
Example Source Code 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 属性,覆盖上面设置的宽度:

以下是引用片段:
      Example Source Code 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 重复完全一样的规则未免笨了点,不是么?那这样就可以把这些规则减到最短了:

以下是引用片段:

  Example Source Code #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 。所以列个能继承的常用属性的表,其实是很短的,下面就是按字母顺序排出的:

以下是引用片段:

  Example Source Code 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),或者称为下降选择符,就是一个空格。所以说不到非用不可的时候,删除空白这样的方法还是少用。

作者:赵竞杰责任编辑:赵竞杰)
请关注天极网天极新媒体 最酷科技资讯
扫码赢大奖
评论
* 网友发言均非本站立场,本站不在评论栏推荐任何网店、经销商,谨防上当受骗!
热点推荐
微软Windows 10操作系统Win10系统在Win8的基础上对界面、特性以及跨平台方面做了诸多优化。[详细]
Windows 10 新视界 [进入频道][使用技巧][微博互动]
手机整机DIY企业级