Yeah, I use it to remove underlines on links sometimes
第1级：是啊，我偶尔用它来移除连结的底线

和第0级的人不同，这些人学过HTML，也制作过几个简单的网站。他们只有在无法使用HTML制作出某些效果时，才会使用CSS，例如移除连结的底线或者设定行高。这些人的网站通常规模不大也没什么访客，所以他们也不会对网络造成太大伤害。

No, I don’t like divs; tables are much easier to work with
第2级：不，我不喜欢div元素；表格好用多了

他们听过使用div元素来设计网页这件事，也花了些时间学习CSS。不过他们很快就放弃了，觉得CSS太难而且支持度不佳，还是宁可用表格排版。
注意！他们是危险人物！他们在这个领域已经待了一段时间，许多都是网站部门的主管。和他们接触是很重要的，提倡网络标准的人应该多多开导他们，这对网络的意义非同小可。

Yes I’ve heard it’s good, but I can’t use it because of…
第3级：是啊，听说它挺好的，不过我没用它因为……

这些人虽然知道CSS的优点，不过总是基于某些原因而无法使用它，例如他们可能有第2级的上司，或者他们必须考虑到Netscape 4的使用者。
旧 版的浏览器虽然不支持CSS，不过使用者还是可以看见完整的内容。而基于亲和力（accessibility）和易用性（usability）的好 处，CSS可以为网站带来更多访客。把这些优点告诉第3级的开发人员，即使他们不是决策者，或许多少能对第2级的上司发挥点影响力吧。

CSS? Oh! Yes, I use divs for all my layouts
第4级：CSS？喔！没错，我用div元素来排版

在页面中使用过多的div元素反而是这群人的问题，他们会用#toprightredline或是#r5_c7（表示第5列第7栏）这样的方式设定div元 素的id。即使可以通过XHTML 1.1的验证，这种排版方式却无法发挥CSS的优势。荧幕朗读软体（screen readers，视障者使用的浏览器）很难解译这些网页，旧版浏览器也会有同样的问题，网页的内容无法完整显示。而不良的class与id命名方式，也对 于版面的修改造成极大不便。
虽然第4级的人制作的网站仍然很糟，不过由于他们很容易接受新的观念，因此对网络造成的伤害较小。许多所见即所得（WYSIWYG）的编辑器制作出充满div元素的原始码，可能也是误导这群人的原因。幸好这些编辑器已经逐渐改良了，希望这会有助于第4级的人继续往上提升。

I use CSS for design, it’s better than tables because of…
第5级：我用CSS来设计，这比表格好多了，因为……

第5级的人知道CSS的优点并乐于使用，虽然有时会遇到些问题，但并不严重。他们也能运用长期的CSS工作经验，与人辩论为什么要将网页的结构与设计分开。我猜这篇文章大部分的读者是这一级的CSS开发人员，我想我自己也是。不过这还不是最好的……

What version of CSS? Yes, I do. Did you read my book about…
第6级：哪个版本的CSS？是的，我知道啊。你有读过我的书关于……

第 6级的人致力于改良CSS，并且写了许多很棒的文章介绍它的新用法。其中有些人将W3C关于CSS的说明文件全部读完了，并且知道哪些功能在哪个版本的浏 览器才有支持。他们是CSS初学者的典范，并且运用他们的影响力使网络更加进步。其中有许多人组成了Web Standards Project，如果你在他们的网站上面发现任何错误，那一定是有理由的，向他们请教之后你必能获得满意的解答。

在一个简单的两栏式页面布局中，使用两个容器，第一个容器用来显示主要内容，第二个容器显示侧条。比如，页面宽度为 960 px，使用黄金分割率，主内容容器的宽度应该为 960 / 1.62 = 593 px，而侧条的宽度为 960-593=367 px。

作者建议，在 Web 排版与布局中可以使用以下基本 CSS 设置
 

• line-height = font-size * 1.62
• paragraph margin = paragraph line-height * 1.62 / 2
• header’s margin-top = headers line-height * 1.62

不过对中文而言，至少 font-size 和 line-height 之间使用黄金分割率是不适合的，假如中文字体使用 12px 的话，最佳行高是 22px，如果字体使用 14px 的话，行高应该使用 24px – 译者。

另一个例子，在表单中，输入框的宽度应该是标签文字的宽度乘以 1.62。而对于显示在 Web 上矩形来说，它的宽度应该是高度乘以 1.62。

这样一来，Web 设计师同时需要很好的计算能力，至少要在旁边放一台计算器，为了节省时间，作者建议在设计中随时记住一个 62/38 原则，在任何需要分割的地方，都使用 62% 和 38% 作比例。

对于需要分割成三份的场合，可以先按 62%，38%原则分成两份，再将那份大的按 62% 和 38% 的比例分割。

h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address { font-style: italic }
pre, tt, code,
kbd, samp { font-family: monospace }
pre { white-space: pre }
button, textarea,
input, object,
select { display:inline-block; }
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
table { border-spacing: 2px; }
thead, tbody,
tfoot { vertical-align: middle }
td, th { vertical-align: inherit }
s, strike, del { text-decoration: line-through }
hr { border: 1px inset }
ol, ul, dir,
menu, dd { margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
u, ins { text-decoration: underline }
br:before { content: "A" }
:before, :after { white-space: pre-line }
center { text-align: center }
abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em }
:link, :visited { text-decoration: underline }
:focus { outline: thin dotted invert }
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }
@media print {
h1 { page-break-before: always }
h1, h2, h3,
h4, h5, h6 { page-break-after: avoid }
ul, ol, dl { page-break-before: avoid }
}

颜色16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：
#000000可以缩写为#000;#336699可以缩写为#369;

盒尺寸通常有下面四种书写方法:
property:value1; 表示所有边都是一个值value1；
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3
property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left
方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：
margin:1em 0 2em 0.5em;

边框(border)边框的属性如下：
border-width:1px;
border-style:solid;
border-color:#000;
可以缩写为一句：border:1px solid #000;
语法是border:width style color;

背景(Backgrounds)背景的属性如下：
background-color:#f00;
background-image:url(http://www.nuniao.com/background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
可以缩写为一句：background:#f00 url(http://www.nuniao.com/background.gif) no-repeat fixed 0 0;
语法是background:color image repeat attachment position;

你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：
color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%

字体(fonts)字体的属性如下：
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
可以缩写为一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。
列表(lists)取消默认的圆点和序号可以这样写list-style:none;,

list的属性如下:
list-style-type:square;
list-style-position:inside;
list-style-image:url(http://www.nuniao.com/image.gif);
可以缩写为一句：list-style:square inside url(http://www.nuniao.com/image.gif);

　　1、开发效率的提高。

　　如果你是一个企业建站的前端开发，相信在大部分时间里进行着同类站点的代码工作。定义好的框架可以大大提高你的工作效率，避免一些常见的错误。如果你的工作是按件计费的，你的报酬一定会比别人多。

　　2、规范代码命名。

　　在多个站点中你可能会用到一些同样的CLASS或ID。如果你有一套完善的css框架，很快你就能对你的每一个站点的代码进行通读。不用浪费时间在代码的阅读上。

　　3、更好的团队合作

　　有些公司会将一些稍大的站点的前端代码分成若干子项目。有过此类经验的朋友应该对这种开发方式深感郁闷，要注意公用css，还有注意相互之间的代码配合。久而久之，废弃代码越来越多，互相之间也难以阅读。如果建立好合适的CSS框架，大家可以减少很多不必要的错误，提升产品质量和工作效率。

　　4、解决浏览器的兼容性问题

　　现在大部分项目都要求兼容IE6，7和FF。每个站点可能都会花上一部分时间去处理兼容问题。在框架层面上就将这个问题处理好。就可以为后面的兼容问题节省下大部分时间。

　　5、一套完整的、结构清晰的结构代码。

　　CSS框架为你的项目提供一个干净、严谨的基础架构。通过它你可以快速的为你的站点搭建基础的html代码框架。万事开头难，前面的基础工作做好了。后面的开发速度会提高很多。

CSS框架之弊：

　　1、你需要完全的理解整套框架

　　每一个加入项目的人，都需要花一定的时间去完全的理解整套框架及编码规范；

　　2、你会延续一些框架中的错误bug

　　没人可以保证自己制定的框架是完美而没有bug的。你可能会需要时间去清理框架中的bug；

　　3、限制开发思路

　　框架给出大家基本的架构及开发的思路，这可能会限制你对产品开发的新思路；

　　4、臃肿的源代码

　　框架中可能有很大一部分代码不会经常用到，而且还会降低执行效率；

5、框架的语义化

　　我们已经注意到了HTML代码的语义化。但基于框架的每个站点都是独立唯一的，我们很难去保证CSS框架的语义化。

1、十六进制的颜色值对位数与大小写

　　编写十六进制颜色值时你可能会用小写字母或省略成3位数，关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响，但十六进制的颜色值默认标准是大写及6位数标注。在未知情况下不希望冒险而降低了渲染的效率。
* 不赞成 – color:#f3a;
* 建议用 – color:#FF33AA;

2、display与visibility的差异

　　他们用于设置或检索是否显示对象。display隐藏对象不保留物理空间，visibility为隐藏对象保留占据的物理空间。当浏览器渲染被占据的物理空间时，会有所消耗资源。
* 不赞成 – visibility:hidden;
* 建议用 – display:none;

3、border:none;与border:0;的区别

　　和display与visibility的关系类似，分别不保留与保留空间。更多的是border:0;尽管可以隐藏掉边框，但它会为你保留border-color/border-style的使用权。
* 不赞成 – border:0;
* 建议用 – border:none;

4、不宜过小的背景图片平铺

　　一张宽高1px的背景图片，虽然文件体积非常之小，但渲染宽高500px的板块需要重复平铺2500次。提高背景图片渲染效率跟图片尺寸及体积有关，最大的图片文件体积保持约70KB。
* 不赞成 – 宽高8px以下的平铺背景图片
* 建议用 – 衡量适中体积及尺寸的背景图片

5、IE的滤镜

　　IE的滤镜除了比较消耗资源外也有兼容性问题。当中有令PNG透明的滤镜，可采用GIF或JPG似透非透的办法来避免使用此滤镜。建议只在IE6应用GIF透明，因为IE7以上已经支持了PNG透明。
* 不赞成，滥用IE滤镜因为消耗资源外也有兼容性问题。
* 建议用，最好选择其它方法能避免使用滤镜。

6、*{ margin:0; padding:0;}避免浏览器样式差异

　　*号通配符把所有标签都初始化一遍，浏览器的渲染消耗一定的资源。有部分在标签在不同浏览器上几乎无差异，或是某些已经不推荐使用的标签(因为你不会去用它)，它们不需通配符要重新初始化一遍这样做能节省一点资源。
* 不赞成，使用*号通配符
* 不赞成，div span button b table等标签纳入通配符控制内外填充样式
* 建议用，有选择性地使用通配符控制内外填充样式。

7、不要添加额外的标签来描述class或id

　　如果你有一个选择器是以id作为关键选择符，请不要添加多余标签名上去。因为ID是唯一的，你不要为了一个不存在的理由而降低了匹配的效率。
* 不赞成 – button#backButton { }
* 不赞成 – .menu-left #newMenuIcon { }
* 建议用 – #backButton { }
* 建议用 – #newMenuIcon { }

8、尽量选择最特殊的类来存放选择器

　　降低系统效率的一个最大原因是我们在标签类中用了过多的选择符。通过添加 class 到元素，我们可以将类别进行再细分为 class 类，这样就不用为了一个标签浪费时间去匹配过多的选择符了。
* 不赞成 – treeitem[mailfolder="true"] > treerow > treecell { }
* 建议用 – .treecell-mailfolder { }

9、避免子孙选择符

　　子孙选择符是CSS中最耗资源的选择符。他真的是非常的耗资源，尤其是在选择器使用标签类或通用类的时候。很多情况中，我们真正想要的是子选择符。除非有明确说明，在 UI CSS 中是严禁使用子孙选择符的。
* 不赞成 – treehead treerow treecell { }
* 好一点，但还是不行(参照下一条) – treehead > treerow > treecell { }

10、标签类中不要包含子选择符

　　不要在标签类中使用子选择符。否则，每次元素的出现，都会额外地增加匹配时间。（特别是当选择器似乎多半会被匹配的情况下）
* 不赞成 – treehead > treerow > treecell { }
* 建议用 – .treecell-header { }

11、留意所有子选择符的使用

　　小心地使用子选择符。如果你能想出一个的不使用他的方法，那么就不要使用。特别是在 RDF 树和菜单会频繁地使用子选择符，像这样。
* 不赞成 – treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon { }

　　请记住 RDF 的属性是可以在模板中被复制的！利用这一点，我们可以复制那些想基于该属性改变的子 XUL 元素上的 RDF 属性。
* 建议用 – .tree-folderpane-icon[IsImapServer="true"] { }

其他的细节差别

　　当你在写css的时候，特别是用float: left（或right）排列一窜图片时，会发现在firefox里面正常而IE里面有问题。无论你用margin:0,还是border: 0来约束，都无济于事。

　　其实这里还有另外一个问题，就是IE对于空格的处理，firefox是忽略的而IE对于块与块之间的空格是处理的。也就是说一个div结束后要紧接着一个div写，中间不要有回车或者空格。不然也许会有问题，比如3px的偏差，而且这个原因很难发现。

　　非常不走运的是我又碰到了这样的问题，多个img标签连着，然后定义的float: left，希望这些图片可以连起来。但是结果在firefox里面正常而IE里面显示的每个img都相隔了3px。我把标签之间的空格都删除都没有作用。

　　后来的解决方法是在img外面套li，并且对li定义margin: 0，这样就解决了IE和firefox的显示偏差。IE对于一些模型的解释会产生很多错误问题，只有多多尝试才能发现原因。

嵌套DIV:父DIV的高度不能根据子DIV自动变化的解决方案

　　当Content内容多时，即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展。 解决方案

　　在层的最下方产生一个高度为1的空格，可解除这个问题

随机的切换图片：
#random {
BACKGROUND: url(/rotate.php);
}
这个方法很巧妙。

关于div的高度自适应
　　今天小尿让我帮他的页子解决一个问题，就是div的高度自适应，也就是在一个父级div中嵌套一左一右两个子div，右边的子div内容可无限扩展，而可以使得父级div的高度能被无限拉长，用一般的布局方法，在IE中可以正确浏览，在Mozilla中父级div的高度就固定在10px左右，无法自适应高度，height:auto也不行，怎么办呢。网上参考到一篇资料，要实现自适应高度，div层必须具有float属性，于是我开始动手试验，float:left的话，div就跑到页面最左边去了，这好办，我在它的外面再套一层div，把位置定好，那么里面的就算float:left也不会被移动位置了。

　　深入标准 ~ The IE Doubled Float-Margin Bug(IE双倍浮动边界Bug)
　　什么发生故障？
　　一段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box)，并在浮动元素上使用了左边界(margin-left) 来令它和容器的左边产生一段距离。看起来相当的简单，对吗？但直至它被在IE/Win中浏览为止，在浏览器中居左浮动元素的边界长度被神秘地翻了一倍！

情况应该如何？

　　下面的图释展示了一个简单的div(茶色的盒子)包含着一个居左浮动的div(绿色的盒子)。浮动元素有一个100px的左边界，使容器盒与它的左边缘之间产生了一个100px的间隙。到现在为止，一直都还不错。

陈旧的IE“双倍占据”

　　原样的相同代码被在IE/Win中浏览时以些微不同的方式显示，下面的图释展示了IE/Win在布局上所做的。
这为什么会发生？别问这种傻问题！这就是IE，记得吗？符合标准只是理想的状况，不指望实现，这个简单的事实正验证了。

重点

　　这个Bug仅当浮动边界和浮动元素的方向相同时出现在浮动元素和容器盒的内边缘之间，在这之后的任意有着相似边界的浮动元素不会呈现双倍边界。只有特定的浮动行的第一个浮动元素会遭遇这个Bug。像居左的情况一样，双倍边界同样神秘地显示在居右的相同方式。

修复办法！

　　直到现在(04年1月)这个Bug一直被认为是无法修复的，通常用来替代错误的边界的控制方法如：一个不可视浮动元素的左边距，连同一个内嵌的盒子一起，可视的盒子装在不可视浮动元素里；或者使用技巧仅对IE/Win设定边界的1/2值。这办法生效了，但是是混乱的而且搞糟了干净的源代码。不过现在全部结束了。

　　Steve Clason发现了一个修复办法，描述在他的Guest Demo里，修复了双倍边界和围绕文字缩进Bug。这是一个经典的IE的Bug修复办法，使用一个属性来修复影响不相关属性的Bug。

现在如何来做？

　　研究它，简单地将{display: inline;}设置给浮动元素就是全部所需做的！是的，听起来太简单了，不是吗？不过这是真的，仅仅一个display的”inline”声明已经能够胜任了。

　　熟悉规则的人知道浮动元素自动设置为”block”元素，而不管他们之前是什么。就如Steve从W3C里指出：

9.5.1 Positioning the float: the ‘float’ property

“This property specifies whether a box should float to the left, right, or not at all. It may be set for elements that generate
boxes that are not absolutely positioned. The values of this property have the following meanings:

left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top
(subject to the ‘clear’ property). The ‘display’ is ignored, unless it has the value ‘none’.

right
Same as ‘left’, but content flows on the left side of the box, starting at the top.

none
The box is not floated. “

这说明浮动元素上的{display: inline;}会被忽略，事实上所有的浏览器没有呈现任何改变，包括IE。但是，它不知何故让IE停止将浮动元素的边界翻倍。因而，这个修复办法可以被直接应用，而没有任何繁琐的隐藏方法。如果将来的一款浏览器决定对这个修复办法抱恙，只要把这个修复装入IE独用的Tan Hack里，细节如同IE Three Pixel Text-Jog Demo。

下面是两个使用了前面相同代码的生动演示，第一个照常显示了IE的Bug，下一个对浮动元素使用了”inline”修复。

七、可测性

1、在编写代码之前，应预先设计好程序调试与测试的方法和手段，并设计好各种调测开关及相应测试代码如打印函数等。
2、在进行集成测试/系统联调之前，要构造好测试环境、测试项目及测试用例，同时仔细分析并优化测试用例，以提高测试效率。

八、程序效率

1、编程时要经常注意代码的效率。
2、在保证软件系统的正确性、稳定性、可读性及可测性的前提下，提高代码效率。
3、不能一味地追求代码效率，而对软件的正确性、稳定性、可读性及可测性造成影响。
4、编程时，要随时留心代码效率;优化代码时，要考虑周全。
5、要仔细地构造或直接用汇编编写调用频繁或性能要求极高的函数。
6、通过对系统数据结构划分与组织的改进，以及对程序算法的优化来提高空间效率。
7、在多重循环中，应将最忙的循环放在最内层。
8、尽量减少循环嵌套层次。
9、避免循环体内含判断语句，应将循环语句置于判断语句的代码块之中。
10、尽量用乘法或其它方法代替除法，特别是浮点运算中的除法。

九、质量保证 

1、在软件设计过程中构筑软件质量。代码质量保证优先原则
(1)正确性，指程序要实现设计要求的功能。
(2)稳定性、安全性，指程序稳定、可靠、安全。
(3)可测试性，指程序要具有良好的可测试性。
(4)规范/可读性，指程序书写风格、命名规则等要符合规范。
(5)全局效率，指软件系统的整体效率。
(6)局部效率，指某个模块/子模块/函数的本身效率。
(7)个人表达方式/个人方便性，指个人编程习惯。
2、只引用属于自己的存贮空间。
3、防止引用已经释放的内存空间。
4、过程/函数中分配的内存，在过程/函数退出之前要释放。
5、过程/函数中申请的(为打开文件而使用的)文件句柄，在过程/函数退出前要关闭。
6、防止内存操作越界。
7、时刻注意表达式是否会上溢、下溢。
8、认真处理程序所能遇到的各种出错情况。
9、系统运行之初，要初始化有关变量及运行环境，防止未经初始化的变量被引用。
10、系统运行之初，要对加载到系统中的数据进行一致性检查。
11、严禁随意更改其它模块或系统的有关设置和配置。
12、不能随意改变与其它模块的接口。
13、充分了解系统的接口之后，再使用系统提供的功能。
14、要时刻注意易混淆的操作符。当编完程序后，应从头至尾检查一遍这些操作符。
15、不使用与硬件或操作系统关系很大的语句，而使用建议的标准语句。
16、建议：使用第三方提供的软件开发工具包或控件时，要注意以下几点：
(1)充分了解应用接口、使用环境及使用时注意事项。
(2)不能过分相信其正确性。
(3)除非必要，不要使用不熟悉的第三方工具包与控件。

十、代码编译

1、编写代码时要注意随时保存，并定期备份，防止由于断电、硬盘损坏等原因造成代码丢失。
2、同一项目组内，最好使用相同的编辑器，并使用相同的设置选项。
3、合理地设计软件系统目录，方便开发人员使用。
4、打开编译器的所有告警开关对程序进行编译。
5、在同一项目组或产品组中，要统一编译开关选项。
6、使用工具软件(如Visual SourceSafe)对代码版本进行维护。

十一、代码测试、维护

1、单元测试要求至少达到语句覆盖。
2、单元测试开始要跟踪每一条语句，并观察数据流及变量的变化。 
3、清理、整理或优化后的代码要经过审查及测试。
4、代码版本升级要经过严格测试。

提醒大家国难日应注意：
 
　　第一：三天全国哀悼日期间，着装要正式、肃穆，不要穿戴太时尚或者颜色鲜艳的衣服、鞋帽，女同志不要用鲜艳的口红眼影化彩装，不要佩  戴时尚的首饰；
　　第二：工休的时候不许开音乐、不许打牌，不许打闹嬉戏；
　　第三：要注意维护公共场所的气氛，在街上行走的时候，不要三五成群的嘻闹；
　　第四：下班之后不要出入舞厅、卡拉OK厅、台球社，也不要在家里放歌曲，唱卡拉OK、举办朋友聚会；
　　第五：可以佩戴一些表示哀悼、追念的标志或饰品；
　　第六：2008年5月19日下午14:28起，停止工作三分钟。
　　第七：这是第一次为百姓举行国丧，有些百姓会不习惯、不重视，也不知道该怎么做，希望大家尽量在亲朋好友中传递这些信息，并随时纠正看到的不正确行为。

附录：

为方便站点哀悼，特提供css滤镜代码，以表哀悼。以下为全站CSS代码。

html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }

使用方法：这段代码可以变网页为黑白，将代码加到CSS最顶端就可以实现素装。建议全国站长动起来。为在地震中遇难的同胞哀悼。

如果网站没有使用CSS，可以在网页/模板的HTML代码<head>和</head> 之间插入：

<style>
html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
</style>

有一些站长的网站可能使用这个css 不能生效，是因为网站没有使用最新的网页标准协议

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

请将网页最头部的<html>替换为以上代码。

有一些网站FLASH动画的颜色不能被CSS滤镜控制，可以在FLASH代码的<object …>和</object>之间插入：

<param value="false" name="menu"/>
<param value="opaque" name="wmode"/>

最简单的把页面变成灰色的代码是在head 之间加
<style type="text/css">

html {
    FILTER: gray;
}
</style>

一般的discuz论坛在 你的控制css 文件下修改
/images/header/header.css 这个文件。
另在哀悼日或遇难的新闻，所有专题和主题 图片上不能使用红色标题。

　　Web网站可用性的关键指标是速度，更确切地说，是页面能以多快的速度出现在访问者的浏览器窗口里。影响速度的因素有很多种，包括Web服务器的速度、访问者的Internet连接情况，以及浏览器必须下载的文件大小。尽管你无法控制服务器和连接的速度，但是你可以控制构成网站Web页面的文件大小。

　　 在我对自己样式表的一次非正式的特别测试中，我把文件的大小降低了大约25－50％。

　　使用CSS的缩写性质

　　CSS 的缩写性质（shorthand property）是一些专用的性质名，用来代替多个相关性质的集合。例如，间隙性质（padding property）是顶部间隙（padding-top）、右侧间隙（padding-right）、底部间隙（padding-bottom）和左侧间隙（padding-left）的缩写。

使用速写性质让你能够把多个性质／属性对（property/attribute pair）压缩进CSS样式表的一行代码里。例如，想一想下面的代码：

.sample1 {

　 margin-top: 15px;

　 margin-right: 20px;

　 margin-bottom: 12px;

　 margin-left: 24px;

　 padding-top: 5px;

　 padding-right: 10px;

　 padding-bottom: 4px;

　 padding-left: 8px;

　 border-top-width: thin;

　 border-top-style: solid;

　 border-top-color: #000000;

}

　　 将它用一些缩写性质来替代就能够把代码减少为下面这样，两者的实际效果是完全一样的：

.sample1 {

　 margin: 15px 20px 12px 24px;

　 padding: 5px 10px 4px 8px;

　 border-top: thin solid #000000;

}

　　要注意，缩写性质还有多个属性，每一个（属性）都对应一个被组合进入缩写性质的常规性质。属性由空白隔开。

　　当属性是类似的值的时候，例如用于边框空白性质（margin property）的线性测量的时候，接在缩写性质之后的属性的顺序很重要。属性的次序是从顶部（顶部的边框空白）开始，然后围绕格子（box）按顺时针次序继续。

　　如果缩写性质的所有属性都是相同的，那么你可以简单地列出单个属性，然后在前面将它复制四遍。因此，下面的两个性质是相等的：

　 margin: 5px 5px 5px 5px;

　 margin: 5px;

　　类似的，你可以使用接在边框空白或者间隔性质之后的两个属性来代表顶部／底部和右侧／左侧属性对。

　 margin: 5px 10px 5px 10px;

　 margin: 5px 10px;

　　属性的顺序在它们是不相似的值的时候是不重要的。因此，边框颜色、边框风格和边框宽度等属性可以以任何顺序接在大纲性质（outline property）之后。忽略某个属性等同于从样式规则里忽略掉对应的常规性质。

　　CSS缩写性质列表

　　下面是CSS缩写性质的列表以及它们所表示的常规性质。

Background（背景）：背景附件、背景颜色、背景图像、背景位置、背景重复

Border（边框）：边框颜色、边框风格、边框宽度

border-bottom（底部边框）：底部边框颜色、底部边框样式、底部边框宽度

border-left（左侧边框）：左侧边框颜色、左侧边框样式、左侧边框宽度

border-right（右侧边框）：右侧边框颜色、右侧边框样式、右侧边框宽度

border-top（顶部边框）：顶部边框颜色、顶部边框样式、顶部边框宽度

cue（声音提示）：前提示、后提示

font（字体）：字体、字号、字体样式、字体粗细、字体变体、线高度、字体大小调整、字体拉伸

list-style（列表样式）：列表样式图像、列表样式位置、列表样式类型

margin（空白）：顶部空白、右侧空白、底部空白、左侧空白

outline（大纲）：大纲颜色、大纲样式、大纲宽度

padding（间隙）：顶部间隙、右侧间隙、底部间隙、左侧间隙

pause（暂停）：后暂停、前暂停 ］

　　减少空白

　　减少CSS样式表大小的另一种方法是从文档里删掉大多数无用的空白。换句话说，将每条规则打破放进一行代码里，即把原来插入到代码里用来把每个性质／属性分割到不同行的换行符和缩进符删掉。 例如，下面的代码示例在内容上相同，但是第二个要精炼得多：

h1 {

　 font-size: x-large;

　 font-weight: bold;

　 color: #FF0000;

}

h1 {font-size: x-large; font-weight: bold; color: #FF0000}

　　删掉注释

　　将注释从你的CSS代码里删掉是减少文件大小的另一种方式。尽管注释对于代码的阅读很有用，但是它无助于浏览器生成你的Web页面。很多Web建设者都习惯给每一行代码都加上注释，或者至少给每一条规则声明都加上。这样的慷慨注释在CSS样式表里是极少需要的，因为大多数CSS性质和属性都很容易阅读和理解。如果你对类、ID，以及其他的选择器都使用有意义的名称，你就可以省掉大多数的注释，同时仍然能够保持代码的可读性和可维护性。

h1 {　　　　　　　/* Heading 1 style*/

　 font-size: x-large; /* x-large size */

　 font-weight: bold;　/* Bold */

　 color: #FF0000;/* Red */

} 

　　使用速写性质、删除无用的空白、省略注释都能够在很大程度上减少你CSS样式表文件的大小。这反过来会对加速你Web网站速度的总体目标作出小的、但是可能会是显而易见的贡献。