overflow属性有四个值：visible (默认), hidden, scroll, 和auto。同样有两个overflow的姐妹属性 overflow-y 和overflow-x，它们很少被采用。

Visible

如果你不设置overflow属性，则默认的overflow属性值就是visible。所以一般而言，并没有什么理由特别的设定overflow 的属性为visible除非你想覆盖它在其它地方被设定的值。

这里需要记住的重要的事情是，尽管盒子外面的内容是可见的，内容并不会影响页面的工作流。比如：

一般来说，你至少不用为里面的内容为文字的盒子设置固定的高度，这样就不会遇到这种情况了。

Hidden

默认值visible的相反的值就是hidden。它会将所有超出盒子的所有内容都给隐藏掉。

这对应付使用动态的内容，而且可能会由于内容溢出而引起一些布局上的问题的确很有用。尽管如此，请记住用此方法隐藏的内容将彻底的看不到(除非去查看源代码)。 比如有的用户设置他们的浏览器的默认字体比你预期的要大些，你会将一些文字推到盒子的外面然后完全的隐藏之…

Scroll

设置一个盒子的overflow值为scroll将会隐藏掉渲染到盒子之外的内容，但是它将会提供一个滚动条在盒子内部滚动，从而可以查看剩下的内容。

值得注意的是，使用scroll将会同时产生水平和垂直两个滚动条，就算内容只需要其中一个。

Auto

overflow的auto值很像scroll，它唯一解决的是在你不需要的时候也会出现滚动条的问题。

清除浮动

设置overflow的一个更流行的用处是，说也奇怪，清除浮动。设置overflow并不会在该元素上清除浮动，它将清除自己(self- clear)。意思就是，应用了overflow(auto或hidden)的元素，将会扩展到它需要的大小以包围它里面的浮动的子元素(而不是叠了起来(collapsing))，假设未定义高度。就像这样：

跨浏览器的烦恼

就像CSS中的很多东东，overflow有很多的跨浏览器的蹊跷的事情。比如这些：
滚动条在盒子里面还是外面?

firefox将其放到盒子外面，而IE则将其放到里面。我认为只有IE是对的(它应该在里面的)。

看清楚这个明显的不同。

IE 8 扩展盒子的bug

IE8有很多有趣的新bug，包括一些非常严重的隐藏在网页中的。这里有更多的关于IE8的overflow的bug的介绍。

破坏浮动布局

IE 6, 7 和 8都会扭曲默认的overflow visible值并将水平的扩展一个盒子一匹配内容(比如图片)。 这对使用浮动列布局的结构非常痛苦，而且单个扩展的列就能够将其它列挤下去并使布局乱掉！

滚动条能用CSS控制吗？

IE过去在较老的版本中允许这样，但是之后就收敛了。比如许多表单元素，滚动条就不允许使用CSS控制。我在它是否是件好事情上没有任何具体的意 见，但是我可以说，在网站的所有内容上使用滚动条是很丑陋的和俗气的。如果你需要一个美化的滚动条，你或许需要寻找javascript来模拟。

IE 技巧

无论是否需要，IE都会一直显示一个垂直的滚动条，这对预防水平跳动是有些作用的，但并非总是可取的。要想在IE中移除它，可以在body元素中设置overflow为auto。

演示:

本文的演示页面，可以查看这个页面。

英文原文：The CSS Overflow Property
中文译文：CSS Overflow 属性

CSS：

img.shadow {
            background: url(shadow-1000×1000.gif) no-repeat right bottom;
            padding: 5px 10px 10px 5px;
}

2、双边框效果
这应该是目前最常见的技巧，我们通过以下方式创建说边框。
演示：
http://www.sohtanaka.com/web-design/examples/drop-shadow/doubleborder.htm

HTML：

CSS：

img.double-border {
    border: 5px solid #ddd;
    padding: 5px; /*Inner border size*/
    background: #fff; /*Inner border color*/
}

3、图片外框效果
webdesignerwall.com上有最好的讲解，这个效果是基于在上面层叠一个有透明度的图片的技术。至于IE6的PNG透明度问题，可以参考这篇教程。
演示：
http://www.sohtanaka.com/web-design/examples/drop-shadow/framed.htm

HTML：

CSS：

.frame-block {
    position: relative;
    display: block;
    height:335px;
    width: 575px;
}
.frame-block span {
    background: url(frame.png) no-repeat center top;
    height:335px;
    width: 575px;
    display: block;
    position: absolute;
}

4、水印效果
你可以通过降低主图片的透明度来让背景图片透过来显示的方法添加水印。
演示：
http://www.sohtanaka.com/web-design/examples/drop-shadow/watermark.htm

HTML：

CSS：

.transp-block {
    background: #000 url(watermark.jpg) no-repeat;
    width: 575px;
    height: 335px;
}
img.transparent {
    filter:alpha(opacity=75);
    opacity:.75;
}

5、为图片添加说明文字
使用绝对定位和透明度的设置来添加灵活的说明。
演示：
http://www.sohtanaka.com/web-design/examples/drop-shadow/caption.htm

HTML：

    
    Salone del mobile Milano, April 2008 - Peeta

CSS：

.img-desc {
    position: relative;
    display: block;
    height:335px;
    width: 575px;
}
.img-desc cite {
    background: #111;
    filter:alpha(opacity=55);
    opacity:.55;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 555px;
    padding: 10px;
    border-top: 1px solid #999;
}

先晒下我最近项目中的雪碧↓

考虑本博的图片限制，图片进行了处理，还请大家谅解!

再晒下网络上的↓

1.基础
牛顿是站在巨人伽利略的肩膀上的，我们也可以这么做。首先我们要选定一个前进的基础。
请永远不要使用

* { margin: 0; padding: 0; }

这问题太多了，在此不多加表述。

目前比较流行的有Eric Meyer的重置样式和YUI的重置样式。另有Condensed Meyer Reset简化Eric Meyer的样式。有趣的是，Eric的重置样式也是源于YUI的。而那份简化版又把Eric的样式简化回YUI的样式了。但同时，糟糕的是，网上流传的比较广的(尤其是国内)都不是最新的版本。上面两个页面里直接看到的都不是最新的，Eric专门为有一个 reset.css页面。而YUI当前版本(2.7.0)的reset.css实际地址里，比上面的页面中还多一些东西。此外，我们还可以基于一些常见的框架，比较著名的比如Blueprint或者Elements CSS Framework（这个的reset也是源自于Eric Meyer的）。OK，准备工作就差不多了。以上这些都可以作为参考资料来组织我们自己的reset。我这里主要采用YUI，兼带Eric的reset。

2.默认色彩
对于页面是不是有默认背景色和前景色，YUI和Eric有着不同的看法。
YUI重置背景色为白色而文字颜色为黑色。

html {
color: #000;
background: #FFF;
}

而Eric在当前最新版中让所有颜色为透明，他认为透明才是最原始的颜色。虽然他曾一度认为也应当设置白色背景色、黑色文字颜色。至于最后为什么改了，Eric并没有给出具体理由。

这个问题我基本认为是用户自定义的更重要还是你的设计更重要的问题。我个人的观点是，如果你的设计本身就是白色背景，那么不要设置背景。一小部分中高水平的用户，他们会自定义网页默认背景色。设置成他们喜欢的背景色，比如浅蓝色。基本常见的浏览器都提供了这个简单的功能。而我们的背景色重置则会破坏用户的选择——尽管这样能保证你的设计原汁原味的呈现给所有用户。当然我知道，更高端的用户会用Stylish之类的 Firefox扩展来自定义页面。但不得不说，只会用“选项”来调背景色的用户更多，不是么？而同时，如果设计本身就有其他背景色，比如黑色、蓝色、绿色之类的，OK，这些设计当然可以设置背景色。但请不要放进reset.css里。这里是重置样式的地方，不是你设计的地方。请把你的设计放在更广袤的土地上。
所以，简单说来，NO，不要在reset中设置背景色。

那么，文字颜色呢？原则上来说，也是不应该设置文字颜色的。但是IE中的表单元素中legend这个对象比较特别，跟主题结合的比较紧密。legend会默认有自己的颜色（跟当前的主题有关）而不会继承父元素的颜色（即便设了color:inherit;）。
从某些角度来说，可以想当然地认为设置字体颜色人数远小于设置背景色的人数；以及认为就算设置了背景色，人们看到legend元素是黑色的也不会觉得奇怪。因此，YUI在其reset中设置了legend {color: #000;}是无可厚非的。
但反过来说，把这个放到typography.css或者form.css里岂不是更好？不同的页面设计，其对legend的色彩要求很可能是不同的，放在reset.css里重复定义是没有必要的。因此这条CSS规则可以作为在reset.css之后首先应当设置的规则。

3.padding和margin
曾经一度流行的* { margin: 0; padding: 0; }也就是出于这个目的。让各个元素的padding和margin都归零，尤其是那些h1和p以及ul/ol/li之类的元素，还有，body本身也是有 margin的。清除元素的padding和margin是很有用的。
YUI这样做：

body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, input, button,
textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}

而Eric这样做：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

可以看到，Eric把几乎所有的元素都写上了规则。而YUI只把有padding和margin的元素清空样式，而其他元素则不动。我个人比较偏好YUI 的做法，因为他这样可以避免给一些无关元素带上不必要的样式。导致元素过多时的性能下降。但Eric的也有可取之处，他这样写，整个reset.css可以小上不少字节，对服务器的压力会小一些。但进一步想，这种做法跟用 * 来选择所有元素还有什么区别呢？这已经几乎囊括了所有元素了！你怎么用呢？看你自己喜好了。

4.边框
YUI里：

fieldset, img {
border: 0;
}
abbr, acronym {
border: 0;
font-variant: normal;
}

Eric已经在上一条中把所有的边框都清掉了，还是推荐用YUI的，理由同上。

5.外边框(outline)
这个就是元素获取焦点时的虚线框，在ie之外的浏览器上可以像下面Eric做的那样，通过设置outline来消除。

/* remember to define focus styles! */
:focus {
outline: 0;
}

而YUI则没有设置这一条。而在Eric的样式中，可以看到Eric的提醒：务必重新定义获取焦点后的样式！
这点其实很重要，出于可访问性的角度出发，那些不便于使用鼠标的人基本上都是用tab导航来浏览网页的。获取焦点的元素有特定样式的话可以极大帮助这类群体的用户，通常建议设置成跟:hover一样。经常设计上会因为这个虚线框而大打折扣。因此这条保留在reset中，并且作为reset.css之后及早定义的规则。

另外，对于在Firefox之类的支持outline的浏览其中，除了获取焦点的元素外，浏览器本身并没有给元素设置outline属性，所以，像Eric那样把所有元素的outline设成0，我就觉得没有太大必要了。

6.字体样式(font style/weight/size/variant)
YUI里，分成了多条：

address, caption, cite, code, dfn,
em, strong, th, var, optgroup {
font-style: inherit;
font-weight: inherit;
}

h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
abbr, acronym {
border: 0;
font-variant: normal;
}

input, button, textarea,
select, optgroup, option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}

/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select {
*font-size: 100%;
}

Eric则在他最终版的reset中去掉了关于这些的样式重置，只保留了 font-size: 100%; 同样他没有给出具体理由。
但通常情况下，我认为还是重置一下这些样式好，比如strong元素，很多时候只是语义而已，并非希望他真的加粗。可能会有背景色或者其他方式来强调。而之所以这里都用了inherit这个继承属性而不是定义 font-weight: normal; 可以在 Eric 先前的reset文章中看到。这是为了防止——父元素字体加粗了，而没有一个子元素继承加粗属性（因为设置了normal）——这种情况的发生。所以把 YUI中设置h1-h6的样式以及abbr和acronym的两句样式都改成inherit会比较好。

此外，对于h1-h6的字体大小定义，建议放到专门的typography.css里，不建议放在reset.css里。所以这里我同样倾向于用YUI的策略，全部重置。

但是很不幸，在ie6/ie7当中，不论是strong还是h1-h6,亦或是em等元素，设置了inherit均无法继承父元素属性，依然保持自己的特色。这就带来了浏览器差异，样式重置本身是为了避免浏览器差异的，但现在带来了浏览器差异，是万万不可取的。对于这个问题我考虑了很久，到底是为了统一所有浏览器都重置成normal（YUI的想法），还是放弃重置这些元素，让他们顺其自然，来保证在所有浏览器中样式一样（Eric的想法）。我最后决定采用YUI的做法。因为，无论重置成normal还是不重置，这些元素都无法继承父元素属性。既然如此，那么退而求其次，保证这些元素都恢复到普通外观，避免在设计的时候还要重置样式。
不得不说，这种妥协是仅仅针对IE6和IE7的，也许在5年后，老板和客户都不要求支持IE7的时候，我们可以放心大胆得使用inherit了。

此外，YUI并没有给code kbd samp tt 这几个元素重置字体大小。但实际上在IE中，他们都会被缩小显示。所以此处应当给予重置font-size: 100%;

7.行高(line-height)
对于行高，YUI并没有给出重置定义，而Eric则给出了重置：

body {
line-height: 1;
}

行高默认所有元素都会继承的，所以给body设置行高为1就足够了。通常行高设为1时候，英文照常阅读，但中文就无法阅读了，行间距过于紧密导致容易看错行。通常在中文环境下得设置1.4到1.5才能是用户正常阅读。我建议是1.5，这样算出来的值也是整数。比如字体大小12px的时候行高是18px，字体大小16px时行高24px。看起来也会比较舒服。此外，还有一个不设置成1的重要原因是：IE下，行高为1时，中文字顶部会被削掉几像素，字体加粗时尤为明显。所以，重置的原则是好的，但切不可重置为1。

8.列表样式
YUI用了：

li {
list-style: none;
}

Eric用了：

ol, ul {
list-style: none;
}

尽管我没有测试出YUI的有什么问题，但我始终觉得设置ol和ul会比较稳妥。而且，波及的元素更少，性能应该更高一点。虽然下载量会多3字节。

9.表格元素
在表格方面，都比较统一。均是：

/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

Eric还提醒到，需要在html中设置cellspacing=”0″ 来达到完美重置效果。
但此外YUI还设置了

caption, th {
text-align: left;
}

让caption和th元素不要居中。作为重置，是可取的。建议添加此规则。

10.上下标以及baseline
YUI写成

sup {
vertical-align: baseline;
}

sub {
vertical-align: baseline;
}

似乎没有优化，不知道为何没有写到一起去。而Eric则在最开始那条中就已经定义。而其中的问题是，YUI这样定义了，但没有重置字体大小，这点是有所遗憾的。既然是重置样式，就彻底一些，所以建议改成这样的：

sup, sub {
font-size: 100%;
vertical-align: baseline;
}

同样对于Eric把所有元素都放到了Baseline上，包括上标下标。Eric的解释是，强制让设计师精确定位这些元素的垂直偏移。
11.插入和删除(ins/del)
对于这个问题，YUI直接清除了ins的下划线和del的删除线这两个文本装饰：

del, ins {
text-decoration: none;
}

而Eric保留了删除线：

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

如何取舍？我选择Eric的，为什么我这里不追求完美的样式重置了呢？很简单，我这个reset的目标是为了让我们写页面的时候尽量避免浏览器默认样式，以及不同浏览器之间默认样式差异带来的问题。而del元素删除线的文本装饰，我相信没有人会反对的。有人会加上其他样式，比如字体变淡之类的，但对于 del如此强语义的元素来说，没有什么比用删除线更能表达含义的了。而不像上面那个focus样式，未必人人喜欢虚线框。但似乎又没有什么浏览器默认不给 del元素加删除线，故这条可以省略。
所以，这里我只重置ins样式，别忘了给ins元素在等下也添加一些样式。

12.引用元素的引号
某些浏览器中，q或者blockquote前后会出现引号。这个并不是谁都喜欢的。所以需要重置他。
YUI的比较简单，只重置了q：

q:before,
q:after {
content: ”;
}

而Eric则比较周到，把q和blockquote都重置了。

blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}

OK，就决定用Eric的了，对于样式重置，细致一点周到一点总没有错。

13.链接
对于链接，YUI和Eric都没有采取样式重置，但从我思考许久后还是决定把链接样式重置放进来。究其原因，还是因为样式重置一来要彻底，二来对于链接样式并非所有设计师都喜欢用下划线装饰。因此，我还是建议把链接的下划线重置掉。

a {
text-decoration: none;
}

但这样做有点粗糙。真正有下划线样式的其实只有 :link和:visited所以改成下面这样比较好：

:link, :visited {
text-decoration: none;
}

此外，对于链接颜色，可以作为reset后急需设置的规则来处理。直接放入reset.css中不是很合适。

14.我的重置样式
总结上面种种规则，这里给出一下我的CSS重置规则，BSD协议发布，请随意使用。测试样本（这个是从YUI那里复制过来的，感谢YUI为此做出的贡献。）
下载：reset.css reset-min.css

/*
Copyright (c) 2009, Shawphy(shawphy.com). All rights reserved.

http://shawphy.com/2009/03/my-own-reset-css.html

Based on YUI http://developer.yahoo.com/yui/reset/
and Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
Licensed under the BSD License:

http://creativecommons.org/licenses/BSD/

version: 1.1 | 20090303
*/

body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, input, button,
textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
fieldset, img {
border: 0;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
address, caption, cite, code, dfn,
em, strong, th, var, optgroup {
font-style: normal;
font-weight: normal;
}

h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
abbr, acronym {
border: 0;
font-variant: normal;
}

input, button, textarea,
select, optgroup, option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}
code, kbd, samp, tt {
font-size: 100%;
}
/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select {
*font-size: 100%;
}
body {
line-height: 1.5;
}
ol, ul {
list-style: none;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th {
text-align: left;
}
sup, sub {
font-size: 100%;
vertical-align: baseline;
}
/* remember to highlight anchors and inserts somehow! */
:link, :visited , ins {
text-decoration: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}

15.完成一个初步的CSS框架
之前提到了，样式重置作为一个所有项目可以使用的共性存在，而不同的项目应当有其个性。当然还有其他一些共性，不属于样式重置的部分，但同样重要。再往下讲就可以做一个CSS框架了。CSS框架所要考虑的内容远比一个CSS Reset要考虑的多很多，这里只是点到为止，不做更多展开。

layout.css
首先除了reset.css之外要建立的layout.css，这里目前主要推荐放入.clearfix。清除浮动很重要。但这不属于样式重置，放在布局当中正合适。

.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

此外，layout.css中还可以放入自己常用的布局，比如 #wrap{margin:0 auto;width:960px;}之类的规则。看个人喜好而定。

typography.css
这里可以放置很多规则，非常重要的是以下三个：
:focus, a, ins
这三个是被重置掉的，但又很重要的内容，建议在reset之后立即在typography中设定全站样式，保持样式统一。
ins可以单独设置， :focus 最好设置成跟 :hover一样，而a的样式还是按照LoVe,HAte的法则来设置。

h1-h6系列也是之前被重置掉的。可以考虑在这里设置样式。按站点特性来定。我个人是不喜欢全局定义hx系列的字体大小的，统一为100%我觉得挺好。

接下来要设置的是font-family属性，可以参考射雕的文章。另外，小麦的文章中提到，表单元素的字体在IE中都不能继承父元素的字体，所以要单独设置。

至于其他需要全局设置的，可以参考前文中的叙述，找到相应的部分添加到typography.css中即可。这样就可以在保证reset.css通用性的情况下，使不同的项目又有个性。尽量保证reset.css在所有项目中都是一样的。有利于项目的开发。最后不要忘记在写表格的时候加 cellspacing=”0″ 来达到完美重置效果。

16.样式下载
注：reset-min.rar为压缩过的重置样式表。

reset.rar

reset-min.rar

1.属性为0

书写原则是如果CSS属性值为0，那么你不必为其添加单位(如:px/em)，你可能会这样写:

padding: 10px 5px 0px 0px;

优化为:

padding: 10px 5px 0 0;

2.背景(background)

背景(background)属性可能会包含设置背景色、背景图、背景图的位置和背景图重复方式的参数，你可能会写成:

background-image: url(”logo.png”);
background-position: top center;
background-repeat: no-repeat;

优化为：

background:url(logo.png) top center no-repeat;

3.颜色(color)

颜色(color)属性在CSS通常指定为一个十六进制的值,一个#加6位数，他的简写方式是如果颜色值由成对儿出现的三对而数字组成，你可以省略掉没对中的一个数字。

　　#FFFFFF 可以写成 #FFF, #336699 可以写成 #369;

这种简写技巧只适用于成对出现的颜色值，其它颜色值不适用这种技巧，比如:

　　#010101, #F20000, #FFF000

4.外边距/空白边(Margin)/内边距(Padding)

声明CSS magin值得时候通常会写成这样:

margin-top:0px;
margin-right:10px;
margin-bottom:0px;
margin-left:10px;
———————————-
padding-top:0px;
padding-right:10px;
padding-bottom:0px;
padding-left:10px;
优化为：

margin:0 10px 0px 10px;

padding:0 10px 0px 10px;

当你生命padding、margin、border(还有一些其他属性)时，记得要把按照顺时针的方向来声明属性值，也就是按照上-右-下-左的方向。关于这些属性还有另一个更加简单的写法，看看属性中上和下、左和右是否值是相等的，如果是那么就可以进一步优化了，你可以省略掉后两个值，剩下的两个值前者指上下，后者指左右:

margin:0 10px;

padding:0 10px;

5.边框(Border)

边框的简写方式相比其它生命来说会比较复杂，很多CSSer一开始都容易记混它的简写顺序，如果你想声明一个1像素宽的实线黑色边框，可能会写成:

border-width:1px;
border-style:solid;
border-color:#000;

优化为：

border:1px solid #000;

注意:这里的颜色值已经使用了上面讲过的颜色简写方法了哦。

我们还可以为四个边设置不同的宽度:

border-top-width:1px;
border-right-width:2px;
border-bottom-width:3px;
border-left-width:4px;

优化为：

border: 1px 2px 3px 4px;

6.文字(font)

文字属性也有很多可能会用到的属性值，像背景一样，你可能会声明这种复杂的文字样式:

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5;
font-family:宋体, Arial, sans-serif;

优化为：

font:italic small-caps bold 12px/1.5 宋体, Arial, sans-serif;

7.公有属性(public)

一般大家可能会这样写：

ul { margin:0; padding:0; }
li{ margin:0; padding:0; }
img { margin:0; padding:0; }

优化为：

ul,li,img { margin:0; padding:0; }

希望以上的编写技巧，能够让你的css代码简洁不少。

欢迎转载：注明出处,”UED,紫枫-80後” ，珍惜他人的劳动成果！^-^

下面是一张样图：

本文的目的并不是讲CSS Sprite如何让一个网站更快，而是说一些使用CSS Sprite的时候的一些最佳实践。

不要等到你完成切片之后才开始sprite.

如果你边切图边写CSS，然后等你完成了整个网站之后再来拼接这些图片到一个Sprite中，你就不得不完全重写你的CSS，你也必须要花费很多的时间来用PS拼接大量的图片——这是件令人倍感纠结的事情。但是如果边切图边整合，就会比较容易些。

把图片放到它要显示的地方的相对的地方

这个小技巧貌似比较难理解。我直到创建一个比较大的sprite的时候才理解到这一点。比如，如果我们希望一个图片出现在一个元素的左侧：

将那个图片放到sprite图片的右边(本文开始的那个sprite图片)。这样的话，当你通过CSS移动背景图片的位置的时候，基本上不可能有其它的小图片意外的出现在它的附近。使用Sprite的时候常常遇到的一个问题是图片会出现在它不该出现的位置。

定位时避免使用bottom或right等

当使用CSS sprite的时候，只用background-position: bottom -300px或background-position: right -200px;非常容易。这刚开始的时候是可行的，但是问题是，当你在宽度上或高度上扩展相关sprite图片的时候，原先设置的位置可能是错的，因为那个图片已经不再Sprite图片的底部或右部了。使用确切的位置来避免这个问题。

给每个图片足够的空间

就像你在本文顶部的实例图片看到的那样，那些小图片都被预留了足够的空间。为什么不把他们塞到一块来让sprite图片更小呢？ 因为使用这些图片的元素通常都会有大量的内容而且可能会需要扩展的间距，以至于其它图片不会意外出现。

例子：

例子中的每个条目都有个带数字的图片作为背景图片。如果你仔细看了上面的那张图片，你可以看到这三个数字图片是如何错开排列的，这样如果内容增多，其它图片就不会意外出现。

不用担心Sprite图片的像素大小

如果你的网站经过良好的设计，那么你将会有一大堆的图片来整合进到sprite里面，这样你就需要你个非常大的sprite来恰当的放置这些图片。这是很不错的。sprite里的空白不会占用太多的文件大小。

1. 隐藏图片

《img src=“1.jpg” style=“display： none” /》

结论：只有Opera不产生请求。

注意：用visibility： hidden隐藏图片时，在Opera下也会产生请求。

2. 重复图片

《img src=“1.jpg” /》

《img src=“1.jpg” /》

结论：所有浏览器都只产生一次请求。

3. 重复背景

《style type=“text/css”》

.test1 { background： url（1.jpg） }

.test2 { background： url（1.jpg） }

《/style》

《div class=“test1”》test1《/div》

《div class=“test2”》test2《/div》

结论：所有浏览器都只产生一次请求。

4. 不存在的元素的背景

《style type=“text/css”》

.test1 { background： url（1.jpg） }

.test2 { background： url（2.jpg） } /* 页面中没有class为test2的元素 */

《/style》

《div class=“test1”》test1《/div》

结论：背景仅在应用的元素在页面中存在时，才会产生请求。这对CSS框架来说，很有意义。

5. 隐藏元素的背景

《style type=“text/css”》

.test1 { background： url（1.jpg）; display： none; }

.test2 { background： url（2.jpg）; visibility： hidden; }

《/style》

《div class=“test1”》test1《/div》

结论：Opera和Firefox对于用display： none隐藏的元素背景，不会产生HTTP请求。仅当这些元素非display： none时，才会请求背景图片。

6. 多重背景

《style type=“text/css”》

.test1 { background： url（1.jpg）; }

.test1 { background： url（2.jpg）; }

《/style》

《div class=“test1”》test1《/div》

结论：除了基于webkit渲染引擎的Safari和Chrome，其它浏览器只会请求一张背景图。

注意：webkit引擎浏览器对背景图都请求，是因为支持CSS3中的多背景图。

7. hover的背景加载

《style type=“text/css”》

a.test1 { background： url（1.jpg）; }

a.test1:hover { background： url（2.jpg）; }

《/style》

《a href=“#” class=“test1”》test1《/a》

结论：触发hover时，才会请求hover状态下的背景。这会造成闪烁，因此经常放在同一张背景图里通过翻转来实现。

注意：在图片no-cache的情况下，IE每次hover状态改变时，都会产生一次新请求。很糟糕。

8. JS里innerHTML中的图片

《script type=“text/javascript”》

var el = document.createElement（‘div’）;

el.innerHTML = ‘《img src=“1.jpg” /》’;

//document.body.appendChild（el）;

《/script》

结论：只有Opera不会马上请求图片。

注意：当添加到DOM树上时，Opera才会发送请求。

9. 图片预加载

最常用的是JS方案：

《script type=“text/javascript”》

new Image（）.src = ‘1.jpg’;

new Image（）.src = ‘2.jpg’;

《/script》

在无JS支持的环境下，可以采用隐藏元素来预加载：

《img src=“1.jpg” style=“visibility： hidden; height： 0; width： 0” /》

总结

对于隐藏图片和隐藏元素的背景，Opera不会产生请求。

对于隐藏元素的背景，Firefox也不会产生请求。

对于尚未插入DOM树的img元素，Opera不会产生请求。

基于webkit引擎的Safari和Chrome，支持多背景图。

其它情景，所有主流浏览器保持一致。

对图片请求的处理上，个人觉得Opera走在前列。

—————————————————————————————————————————

以上总结了那么多，主要的一点，是让大家明白，浏览器请求一张图片的速度，比请求多张要快，大大提高页面下载速度。所以，我们可以把页面用到的所有图片放在一张大的透明图上面，通过css里面的background位移来定位图片。

先看下实例：

QQ腾讯官网：

网易163：

新浪博客：

以上官网都是利用了背景图片定位技术。

看看他们怎么实现的。
/*
#def div,#s1 div,#s2 div,#s3 div,#s4 div,#s5 div,#s6 div,#s7 div,#s8 div,#s9 div,#sar div
{background-image:url(http://mat1.gtimg.com/www/iskin09/skinbt.png);background-repeat:no-repeat;}
#def div{background-position:0 0;}
#s1 div{background-position:0 -11px;}
#s2 div{background-position:0 -22px;}
#s3 div{background-position:0 -33px;}
#s4 div{background-position:0 -44px;}
#s5 div{background-position:0 -55px;}
#s6 div{background-position:0 -66px;}
#s7 div{background-position:0 -77px;}
#s8 div{background-position:0 -88px;}
#s9 div{background-position:0 -99px;}
*/

参考“CSS背景属性Background详解”

写个demo给大家看看。。

演示效果：

demo

只看代码：

欢迎转载：注明出处,”UED,紫枫-80後” ，珍惜他人的劳动成果！^-^

CSS2 中有5个主要的背景(background)属性，它们是：

background-color: 指定填充背景的颜色。
background-image: 引用图片作为背景。
background-position: 指定元素背景图片的位置。
background-repeat: 决定是否重复背景图片。
background-attachment: 决定背景图是否随页面滚动。

这些属性可以全部合并为一个缩写属性: background。需要注意的一个要点是背景占据元素的所有内容区域，包括 padding 和 border，但是不包括元素的 margin。它在 Firefox, Safari ,Opera 以及 IE8 中工作正常，但是 IE6 和 IE7 中，background 没把 border 计算在内。

基本属性

背景色(background-color)

background-color 属性用纯色来填充背景。有许多方式指定这个颜色，以下方式都得到相同的结果。

background-color: blue;
background-color: rgb(0, 0, 255);
background-color: #0000ff;

background-color 也可被设置为透明（transparent），这会使得其下的元素可见。

背景图(background-image)

background-image 属性允许指定一个图片展示在背景中。可以和 background-color 连用，因此如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。代码很简单，只需要记住，路径是相对于样式表的，因此以下的代码中，图片和样式表是在同一个目录中的。

background-image: url(image.jpg);

但是如果图片在一个名为 images 的子目录中，就应该是：

background-image: url(images/image.jpg);

背景平铺(background-repeat)

设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。这也许是你需要的，但是有时会希望图片只出现一次，或者只在一个方向平铺。以下为可能的设置值和结果：

background-repeat: repeat; /* 默认值，在水平和垂直方向平铺 */
background-repeat: no-repeat; /* 不平铺。图片只展示一次。 */
background-repeat: repeat-x; /* 水平方向平铺(沿 x 轴) */
background-repeat: repeat-y; /* 垂直方向平铺(沿 y 轴) */
background-repeat: inherit; /* 继承父元素的 background-repeat 属性*/
背景定位(background-position)

background-position 属性用来控制背景图片在元素中的位置。技巧是，实际上指定的是图片左上角相对于元素左上角的位置。
下面的例子中，设置了一个背景图片并且用 background-position 属性来控制它的位置，同时也设置了 background-repeat 为 no-repeat。计量单位是像素。第一个数字表示 x 轴(水平)位置，第二个是 y 轴(垂直) 位置。

/* 例 1: 默认值 */
background-position: 0 0; /* 元素的左上角 */

/* 例 2: 把图片向右移动 */
background-position: 75px 0;

/* 例 3: 把图片向左移动 */
background-position: -75px 0;

/* 例 4: 把图片向下移动 */
background-position: 0 100px;

background-position 属性可以用其它数值，关键词和百分比来指定，这比较有用，尤其是在元素尺寸不是用像素设置时。

关键词是不用解释的。x 轴上：

* * left
* * center
* * right

y 轴上:

* * top
* * center
* * bottom

顺序方面和使用像素值时的顺序几乎一样，首先是 x 轴，其次是 y 轴，像这样：

background-position: top right;

使用百分数时也类似。需要主要的是，使用百分数时，浏览器是以元素的百分比数值来设置图片的位置的。看例子就好理解了。假设设定如下：

background-position: 100% 50%;

使用百分数定位时，其实是将背景图片的百分比指定的位置和元素的百分比位置对齐。也就是说，百分数定位是改变了背景图和元素的对齐基点。不再像使用像素和关键词定位时，使用背景图和元素的左上角为对齐基点。例如上例的 background-position: 100% 50%; 就是将背景图片的 100%(right) 50%(center) 这个点，和元素的 100%(right) 50%(center) 这个点对齐。

背景附着

background-attachment 属性决定用户滚动页面时图片的状态。三个可用属性为 scroll(滚动)，fixed(固定) 和 inherit(继承)。inherit 单纯地指定元素继承他的父元素的 background-attachment 属性。

为了正确地理解 background-attachment，首先需要明白页面(page)和视口(view port)是如何协作地。视口(view port)是浏览器显示网页的部分(就是去掉工具栏的浏览器)。视口(view port)的位置固定，不变动。

当向下滚动网页时，视口(view port)是不动的，而页面的内容向上滚动。看起来貌似视口(view port)向页面下方滚动了。如果设置 background-attachment: scroll，就设置了当元素滚动时，元素背景也必需随着滚动。简而言之，背景是紧贴元素的。这是 background-attachment 默认值。

用一个例子来更清楚地描述下：

background-image: url(test-image.jpg);

background-position: 0 0;
background-repeat: no-repeat;
background-attachment: scroll;

当向下滚动页面时，背景向上滚动直至消失。

但是当设置 background-attachment 为 fixed 时，当页面向下滚动时，背景要待在它原来的位置(相对于浏览器来说)。也就是不随元素滚动。

用另一个例子描述下：

background-image: url(test-image.jpg);
background-position: 0 100%;
background-repeat: no-repeat;
background-attachment: fixed;

页面已经向下滚动了，但是图像仍然保持可见。

需要重视的一点是背景图只能出现在它父元素能达到的区域。即使图片是相对于视口(view port)定位地，如果它的父元素不可见，图片就会消失。参见下面的例子。此例中，图片位于视口(view port)的左下方，但是只有元素内的图片部分是可见的。

background-image: url(test-image.jpg);
background-position: 0 100%;
background-repeat: no-repeat;
background-attachment: fixed;

因为图片开始在元素之外，一部分图片被切除了。
背景的简写属性

可以把背景的各个属性合为一行，而不用每次都单独把他们写出来。格式如下：

background:

例如，下面的声明

background-color: transparent;
background-image: url(image.jpg);
background-position: 50% 0 ;
background-attachment: scroll;
background-repeat: repeat-y;

可以合为单独一行：

background: transparent url(image.jpg) 50% 0 scroll repeat-y;

而且不需要指定每一个值。如果省略值地话，就使用属性地默认值。例如，上面那行和下面这个效果一样：

background: url(image.jpg) 50% 0 repeat-y;

背景的一般用法

除了可以用来使元素更加优雅这类显然的用法之外，背景也可以用于其它的目的。
仿栏

当使用 css 的 float 属性来定位布局元素时，要确保两栏或多栏有相同的长度是比较困难的。如果长度不同，其中一栏的背景会比另外的短，这会破坏整个设计。

仿栏是个非常简单的背景技巧，这个技巧最早发表在A List Apart 。思路很简单：不再给每列单独设置背景，而是给各列的父元素设置一个背景图。所有栏的设计都包含在这张图片之中。
文本替换

在网页上，对于字体的选择是相当有限的。可以使用 sIFR 之类的工具来定制字体，但是这需要用户启用 JavaScript 。一个适用于任意浏览器的简单方法是，用想用的字体来做一张文本图片，并用这张图片作为背景。这样，文本依然出现在文档标记中以供搜索引擎检索和屏幕浏览 器识别，但是在浏览器中就会显示首选的字体。

例如，HTML 标记可能是这样的：

Blogroll

假如有一个 200 乘 75 的图片，上面有更好看的字体，就可以用如下方式来替换文本：

h3.blogroll {
width: 200px;
height: 75px; /* So that the element will show the whole image. */
background:url(blogroll-text.jpg) 0 0 no-repeat; /* Sets the background image */
text-indent: -9999px; /* Hides the regular text by moving it 9999 pixels to the left */
}

简单的圆点

无需列表中的圆点看起来很难看。不用再处理所有不同的 list-style 属性，只需要简单地把他们隐藏并用背景图代替就可以了。因为图片可以随意选择，这些圆点就可以看起来更漂亮。

下面，我们把一个无需列表改造成有圆滑圆点的：

ul {
list-style: none; /* Removes default bullets. */
}

ul li {
padding-left: 40px; /* Indents list items, leaving room for background image on the left. */
background: url(bulletpoint.jpg) 0 0 no-repeat;
}

CSS3 中的背景

CSS3 中的背景有较多改进。最显著的是多背景图片的选项，同时也增加了4个新属性。
多背景

CSS3 中，可以对一个元素应用一个或多个图片作为背景。代码和 css2 中的一样，只需要用逗号来区别各个图片。第一个声明的图片定位在元素顶部，其它的图片按序在其下排列，例如：

background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);

新属性：背景修剪(background-clip)

这又把我们带回了文章开始讨论的那个关于边框内图片显示的话题。它被描述为“背景描绘区”。

background-clip 属性用来增强背景显示位置的控制能力。可能的值为：

* background-clip: border-box;
背景显示在边框内。
* background-clip: padding-box;
背景显示在内补白(padding)内，而不是边框内。
* background-clip: content-box;
只在内容内显示背景，而不是内补白(padding)和边框内。
* background-clip: no-clip;
默认值，和 border-box 一样。

新属性：背景原点(background-origin)

这个属性和 background-position 结合起来使用。可以从边框，内补白或者内容盒子开始计算 background-position (类似于 background-clip)。

* background-origin: border-box;
以边框为原点开始计算 background-position.
* background-origin: padding-box;
以内补白为原点开始计算 background-position
* background-origin: content-box;
以内容盒子为原点开始计算 background-position
对于 background-clip 和 background-origin 不同的一个解释参看 CSS3.info

新属性： 背景尺寸(background-size)

background-size 用来调整背景图的大小。有好几个可能值：

* background-size: contain;
缩小图片来适应元素的尺寸(保持像素的长宽比)
* background-size: cover;
扩展图片来填满元素(保持像素的长宽比)
* background-size: 100px 100px;
调整图片到指定大小
* background-size: 50% 100%;
调整图片到指定大小。百分比是相对于包含元素的尺寸的。

可以看一下 CSS3规则 网站上的几个例子。

新属性：(background-break)

CSS3 中，元素可以被分成几个独立的盒子(例如 使内联元素 span 跨越多行)。background-break 属性用来控制背景怎样在这些不同的盒子中显示。

可能值为：

* Background-break: continuous;
默认值。忽略盒之间的距离(也就是像元素没有分成多个盒子，依然是一个整体一样)
* Background-break: bounding-box;
把盒之间的距离计算在内
* Background-break: each-box;
为每个盒子单独重绘背景

背景色(background-color)的改进

background-color 在 css3 中有了稍许改进。除了设置背景颜色之外，如果元素底层的背景图不可用，还可以设置一个“回退色”。

通过在回退色之前增加一个斜杠(/)来实现，例如：

background-color: green / blue;

此例中，背景色应该是绿色(green)。然而，如果底层背景图不能使用的话，背景色就是蓝色而不是绿色。如果在斜杠前不指定颜色，默认为透明(transparent)。
背景平铺(background-repeat)的改进

CSS2中当图片平铺时，会被元素在末端截断。CSS3 引入了两个属性来修正这个问题:

* space: 应用同等数量的空白到图片之间，直到填满整个元素
* round: 缩小图片直到正好平铺满元素

关于 background-repeat: space; 的一个例子，可以在 CSS3 规则网站看到。
背景附着(background-attachment)的改进

background-attachment 属性增加了一个新值：local。这是用来配合可以滚动的元素的(设置为 overflow: scroll; 的元素)。当 background-attachment 设置为滚动(scroll)时，背景图不会随元素内容的滚动而滚动。

设置为 background-attachment :local; 时，背景图会随内容的滚动而滚动。

2、同一个的class选择符可以在一个文档中重复出现，而id选择符却只能出现一次；对一个标签同时使用class和id进行CSS定义，如果定义有重复，id选择符做的定义有效，是因为ID的权值要比CLASS大。

ID是一个标签，用于区分不同的结构和内容，就象名字，如果一个屋子有2个人同名，就会出现混淆；
CLASS是一个样式，可以套在任何结构和内容上，就象一件衣服；

3、一个兼容性调整(IE和Mozilla)的笨办法：
初学可能会碰到这样一个情况：同样一个标签的属性在IE设置成A显示是正常的，而在Mozilla里必须要设成B才能正常显示，或者两个倒过来。
临时解决方法：选择符{属性名:B !important;属性名:A}

就现在的兼容来说，css hack是没办法的办法。我现在也在为这个头疼。

4、如果一组要嵌套的标签之间需要些间距的话，那就留给位于里面的标签的margin属性吧，而不要去定义位于外面的标签的padding

这个问题体现在宽度设置上，就比如你div的width属性设置了200，然后你又想让里面的文字距离边框10px，于是设置了padding，但是在FF里你就会发现，宽度变成了220.

5、li标签前面的图标推荐使用background-image，而不是list-style-image。

6、IE分不清继承关系和父子关系的差别，全部都是继承关系。

7、在给你的标签疯狂加选择符的时候，别忘了在CSS里给选择符加上注释。 等你以后修改你的CSS的时候就知道为什么要这么做了。

不要随便用一个怪异的名字来定义你的class。就从我接受的项目来说，莫名其妙的写法让我头疼得厉害。翻找下我前面写过的东西，可以看到一个CSS命名规则。详细请见u/kele/archives/2007/609.html

8、如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。

9、定义链接的四种状态要注意先后顺序: Link Visited Hover Active

与此类似的还有margin和padding，用TRouBLe来记忆。就是Top Right Bottom Left。

10、与内容无关的图片请使用background

这个就是为了在无CSS调用的时候不影响整体页面风格。少用图片来表现风格。试想别人禁止图片后，你的网站还有什么可以看的东西。

11、定义颜色可以缩写#8899FF=#89F

简写标准～可惜我还没有这个好习惯～比如#FFFFFF我还是习惯这么写，而不是#FFF

12、table在某些方面比其它标签表现的要好的多。请在需要列对齐的地方用它。

div+css设计不是说你就完全放弃table，怎么表现的好才是重点

13、<script>没有language这个属性，应该写成这样:
<script type=”text/Javascript”>

但是在我接触到的很多网站页面里，是这么写的<script type=”text/Javascript” language=“javascript”>。莫名其妙～打开微软的网站你就可以看到<script type=”text/Javascript”>的表达方式

14、标题是标题，标题的文字是标题的文字。有时候标题不一定需要显示文字，所以:<h1>标题内容</h1> 改成 <h1><span>标题内容</span></h1>

我还是没有养成使用H1，H2标签的习惯～需要努力～

15、完美的单象素外框线表格（在IE5、IE6、IE7及FF1.0.4以上中均可通过测试）
table{border-collapse:collapse;}
td{border:#000 solid 1px;}

1象素黑色表格～

16、margin取负值可以在标签使用绝对定位的时候起到相对定位的作用，在页面居中显示时，使用绝对定位的层不适合使用left:XXpx这个属性。把这个层放到一个要相对定位的标签旁，然后使用margin的负值是个好方法。

负值时在布局中经常用到的方法～值得去学习下如何使用。

17、绝对定位时使用margin值定位可以达到相对于本身所在位置的定，这与top，left等属性相对与窗口边缘的定位不同。绝对定位的优势在于可以让其它元素忽略它的存在。

设计的时候你可以使用相对浮动层的绝对定位～有意想不到的效果。

18、如果文字过长,则将过长的部分变成省略号显示：IE5,FF无效，但可以隐藏，IE6有效
<DIV STYLE=”width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis”>
<NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR>

恩，这个东西我在用～

19、在IE中可能由于注释带来的文字重复问题时可以把注释改为：
<!–[if !IE]>Put your commentary in here…<![endif]–>

20、如何用CSS调用外部字体
语法：
@font-face{font-family:name;src:url(url);sRules}取值：
name：字体名称。任何可能的 font-family 属性的值
url(url)：使用绝对或相对 url 地址指定OpenType字体文件
sRules：样式表定义

为了防止用户没有字体而影响了网站效果～不过我觉得最好还是少用。

21、如何让一个表单中的文本框中的文字垂直居中？
如果用行高与高度的组在FF中是没有效果的，办法就是定义上下补白就可以实现想想的效果了。

22、定义A标签要注意的小问题：
当我们定义a{color:red;}时，它代表了A的四种状态的样式，如果此时要定义一个鼠标放上的状态只要定义a:hover就可以了，其它三种状态就是A中所定义的样式。
只定义了一个a:link时，一定要记得把其它三种状态定义出来！

hover属性是一个很强大的东西～有时间的人可以仔细研究下～

23、并不是所有样式都要简写：
当样式表前定义了如p{padding:1px 2px 3px 4px}时，在后续工程中又增加了一个样式上补白5px，下补白6px。我们并不一定要写成p.style1{padding:5px 6px 3px 4px}。可以写成p.style1{padding-top:5px;padding-right:6px;},你可能会感觉这样写还不如原来那样好，但你想没想过，你的那种写法重复定义了样式，另外你可以不必去找原来的下补白与左补白的值是多少！如果以后前一个样式P变了话，你定义的p.style1的样式也要变。

24、网站越大，CSS样式越多，开始做前，请做好充分的准备和策划，包括命名规则。页面区块划分，内部样式分类等。

非常非常非常非常重要～记得在压缩CSS的时候兼顾好你的可读性～非常非常非常非常重要～深受其害中。

25、几个常用到的CSS样式：
1）中文字两端对齐：text-align:justify;text-justify:inter-ideograph;

2）固定宽度汉字截断：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不过只能处理文字在一行上的截断，不能处理多行。)（IE5以上）FF不能，它只隐藏。

3）固定宽度汉字（词）折行：table-layout:fixed; word-break:break-all;（IE5以上）FF不能。

4）<acronym title=”输入要提示的文字” style=”cursor:help;”>文字</acronym>用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到，而国内的少又少。

5）图片设为半透明：.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}在IE6及IE5测试通过，FF未通过，这是因为这个样式是IE私有的东西；

6）Flash透明：选中swf,打开原代码窗口，在</object>前输入<param name=”wmode” value=”transparent”> 以上是针对IE的代码。
针对FIREFOX 给<embed> 标签也增加类似参数wmode=”transparent”

7）在做网页时常用到把鼠标放在图片上会出现图片变亮的效果，可以用图片替换的技巧，也可以用如下的滤镜：
.pictures img {
filter: alpha(opacity=45); }
.pictures a:hover img {
filter: alpha(opacity=90); }