用了这么多年css（经验也算丰富），总觉得该写点什么。理论性太强的暂时写不了，只好先从简单直白的 入手。css简写（css shorthand）就符合这个条件。简单的说，css简写就是在等效的前提下，把多句css代码简化成一句。在我看来，简写css的好处有三：一 是写起来方便（就像键盘快捷键）；二是简化代码；三是帮助你熟悉和深刻理解css。闲话少说，书归正传。能够简写的css属性主要有以下几个： font简写： font:italic small-caps bold 12px/1.5em arial,verdana; 等效于： font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:arial,verdana; 顺序：font-style | font-variant | font-weight | font-size | line-height | font-family （注：简写时，font-size和line-height只能通过斜杠/组成一个值，不能分开写。）不过使用这种简写需要注意几点：要使简写定义有效必须至少提供 font-size 和 font-family 这两个属性 ；同时font-weight, font-style 以及 font-varient 这几个属性如果不做设定的话将默认为normal。 background简写： background:#fff url(bg.gif) no-repeat fixed left top; 等效于： background-color:#fff; background-image:url(bg.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:left top; 顺序：background-color | background-image | background-repeat | background-attachment | background-position margin&padding简写： margin:1px 0 2em -20px; 等效于： margin-top:1px; margin-right:0; margin-bottom:2em; margin-left:-20px; 顺序：margin-top | margin-right | margin-bottom | margin-left padding的简写和margin完全一样。 border 简写： border:1px solid #000; 等效于： border-width:1px; border-style:solid; border-color:#000; border-top / border-right / border-bottom / border-left 简写： border-top:1px solid #000; 等效于： border-top-width:1px; border-top-style:solid; border-top-color:#000; list-style 简写： list-style:square outside url(bullet.gif); 等效于： list-style-type:square; list-style-position:outside; list-style-image:url(bullet.gif); 顺序：list-style-type | list-style-position | list-style-image 同时使用两个Class定义一般我们只会给内容块指定一个Class，实际上只要你愿意，可以同时把任意多个Class赋给某块内容。比如 ：[p class="text side"]...[/p] 多个Class之间用空格分隔即可。当多个Class之间的属性发生重叠的时候，将根据各个Class在CSS定义文件 中被定义的位置，后定义的Class属性自动覆盖之前定义的Class属性（而不是根据你在 class="text side"这 里排列的顺序来进行覆盖） CSS border的缺省值通常我们定义border属性都会提供color,width,style这些属性。比如 border: 3px solid #000 。不过实 际上必须要提供的属性只有style。如果你只写 border: solid 的话，其他的属性自动使用缺省值。如果缺省 值可以满足你的要求，你完全可以省略这两项属性。 !important会被IE忽略在css中，任何后面标有!important的语句将获得绝对的优先权，例如： margin-top: 3.5em !important; margin-top: 2em 除IE以外所有浏览器中的顶部边界都是3.5em，而IE为2em，有时候这一点很有用，尤其在使用相对边界值时 ，可以显示出IE与其他浏览器的细微差别。图片替换的技巧举例来说，你想在每一页的顶部使用“Buy widgets”的标题，为了美观你使用了少见的字体那么你就得用 图片来显示了： [h1][img src="widget-image.gif" alt="Buy widgets"][/h1] 这样当然没错，但是有证据显示搜索引擎 对真实文本的重视远超过alt文本，因此，我们得用另一种方法：[h1][span]Buy widgets[/span][/h1] ，那你 的漂亮字体怎么办呢？下面的css可以帮上忙： h1{background: url(widget-image.gif) no-repeat;} h1 span{position: absolute;left:-2000px;} 现在你既用上了漂亮的图片又很好的隐藏了真实文本——借助css，文本被定位于屏幕左侧-2000像素处。 CSS技巧 1、忘记定义尺寸的单位是普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确 的单位，比如：width:100px width:100em。 只有两个例外情况可以不定义单位：行高和0值。2、当在XHTML中 使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。3、 取消class和id前的元素限定。div#content { /* declarations */ }fieldset.details { /* declarations */ } ，可以写成#content { /* declarations */ } .details { /* declarations */ } 这样可以节省一些字 节。 4、通常padding的默认值为0，但是在不同的浏览器默认值可能不同，可以在样式表一开始就先定义所有 元素的margin和padding值都为0，象这样：* { margin:0; padding:0; }。5、一个标签可以同时定义多个 class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10 px的边框。.one {width:200px;background:#666;}.two{border:10px solid #F00;} ，在页面代码中，我们可以这样调用 [div class=one two][/div]，这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样 做是可以的，你可以尝试一下。6、字体变形命令。text-transform 命令很有用，它有3个值：text- transform: uppercase, text-transform: lowercase 和 text-transform: capitalize。第1个会把文字变成 全大写，第2个变成全小写，第3个变成首字母大写。这对拼音文字非常有用，即使输入时有大小写错误，在网 页上也看不到。在不同页面上使用同样的导航代码许多网页上都有导航菜单，当进入某页时，菜单上相应这一项就应该变灰，而其他页亮起来。一般要实现这 个效果，需要写程序或专门为每一页做设计，现在靠CSS就可以实现这个效果。首先，在导航代码中使用CSS类： Home About us Contact us 然后分别为每一页的Body指定一个id，和上面类同名。如。然后设计CSS如下： #home .home, #about .about, #about .about { commands for highlighted navigation go here } 这里，当id设为home时，.home就会起作用，也就是class设为home的那一行导航条就会显示出特殊效果来。 其他页也是如此。