在我们写css样式的时候，页面经历几个版本的修改之后，可能有些样式已经用不到了，或许将某些样式更名了而原来的忘了删除，总之页面中可能存在着一些无用的样式。这些无用的浪费了一些服务器空间和带宽消耗，也会增大我们的维护成本。那么有没有一些办法来清理那些无用的样式呢？今天就让我们来了解一下几个比较有用的工具。

　　Dust-Me selectors

　　Dust-Me是一个很有用也很好用的Firefox插件，它可以分析到你的页面中调用的所有CSS文件并分析那些在页面中没有被用到。

　　安装：http://addons.mozilla.org/zh-CN/firefox/addon/5392。同时，你可以下载该项目的源代码，了解更多请访问Dust-Me selector官方页面。

　　Page Speed

　　Page Speed是Google提供的一个前端性能分析工具，有些类似于雅虎YSlow，但是提供了一些比较个性且很有用的工具，比如Remove unused CSS。

　　Page Speed和YSlow一样依赖Firebug，了解详情和安装请访问这里（http://code.google.com/speed/page-speed/）。

　　CSS Redundancy Checker

　　CSS Redundancy Checker(http://services.immike.net/css-checker/)是一个免费的在线应用，可以检查所有的使用某个 CSS文件的页面中无用的样式。可以同时检查某一个样式在多个页面中的使用情况。该工具的不足是虽然一次能检查多个HTML页面，但每次只能检查一个 CSS文件，而且还要手动输入。

　　IntelliJ IDEA

　　IntelliJ IDEA(http://www.jetbrains.com/idea/features/html_css_editor.html)这是一个颇强大 的IDE，类似于DreamWeaver，不过在国内用的不多。该软件包括一个即时代码分析工具(On-the-fly Code Analysis)，可以分析CSS文件中未用到的class和id。

　　Expression Web

　　Expression Web作为微软的新一代网站开发工具，还是有很多人使用的，其CSS Report功能可以检查未用到需要被清除的CSS（我的确没有使用EW开发过网站，希望使用该软件的童鞋可以帮忙确认一下这一点）。

　　结语

　　当然可能还有其它的某些工具这里没有提到，如果大家有所了解，可以与大家分享。

　　另外，通常我们将整个网站的样式写入一个或多个样式文件中，然后在页面中全部调用或者分模块调用，那么某个CSS文件中的样式可能在某个页面中的确没有用 到但是在其它的页面中被用到了，所以使用这些工具检测CSS文件中多余的样式的时候，需要保持一定的谨慎，清除样式可能会影响到其它的页面，所以page speed提供的检查结果只适用于单个页面，不适合整个网站，而使用Dust-Me或CSS Redundancy Checker的时候可以对整个网站或者网站的多个页面同时检查，这样可能能避免万无一失。

　　虽然在xhtml+css 时代 table的使用越来越少，但需要布局数据型元素，用table还是很不错的选择。

　　用table制作表格的时候美观也很重要，其中的边框。在HTML中,表格的默认样式大概是这样:

　　默认的样式虽然有点立体的感觉，但它在整体布局中并不是很美观，通常情况下,我们会把table属性的cellspacing设成1,然后为整个表格设一 个背景色;或是设置table的border为0，然后为所有td设置border-left和border-right,可以得到如下效果：

　　这种方法比较常用，但是有些复杂，而且如果表格内容为空的情况下IE会不显示边框。

　　另一种方法就是用CSS中的border-collapse属性,它有两个参数

　　这里我们会用到： border-collapse:collapse; 在table中加入border-collapse:collapse;属性，并设置border为0,设置td{border:1px solid #ccc;}边框。就可以得到与第一种方法相同的效果。这种方法相对简单，而且在表格内容为空的情况下，边框不会出现不显示的情况。

table {border-collapse:collapse;}
td {border:1px solid #666;}

<table border="0">
　<tr>
　　<td>1</td><td>2</td><td>3</td><td>4</td>
　</tr>
　<tr>
　　<td>5</td><td>6</td><td>7</td><td>8</td>
　</tr>
　<tr>
　　<td>9</td><td>10</td><td>11</td><td>12</td>
　</tr>
</table>

_______________________________________________________________________

　　下面顺便带上CSS border-collapse 属性：

　　CSS border-collapse 属性
　　定义
　　border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。
　　继承性：Yes
　　脚本语法：
　　CSS 属性也可通过一段 JavaScript 被动态地改变。

object.style.borderCollapse="collapse"

　　例子

table
{
border-collapse: separate;
}

　　可能的值

　　最近对CSS中的行为比较感兴趣，虽然是不符合标准的也只有ie才能识别，但是他确实给css的功能扩展了不少。下面是摘自互联网上的文字和例子。

　　IE5及其以后版本支持在CSS中使用e­xpression，用来把CSS属性和Javascript表达式关联起来，这里的CSS属性可以是元素 固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式，CSS属性的值等于Javascript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。

　　给元素固有属性赋值
　　下面是定义container容器的宽度，如果<725就为自己的宽度，否则就等于725，相当于max-width:725px;。

<!--
#container { width: e­xpression((documentElement.clientWidth < 725) ? "725px" : "auto" ); }
-->

　　给元素自定义属性赋值

　　例如，消除页面上的链接虚线框。 通常的做法是：

<a href="link1.htm" onfocus="this.blur()">link1</a>
<a href="link2.htm" onfocus="this.blur()">link2</a>
<a href="link3.htm" onfocus="this.blur()">link3</a>

　　粗看或许还体现不出采用e­xpression的优势，但如果你的页面上有几十甚至上百个链接，这时的你难道还会机械式地Ctrl+C，Ctrl+V么，何况两者一比较，哪个产生的冗余代码更多呢？

　　采用e­xpression的做法如下：

<style type="text/css">
a {star : e­xpression(onfocus=this.blur);}
</style>
<a href="link1.htm">link1</a>
<a href="link2.htm">link2</a>
<a href="link3.htm">link3</a>

　　说明：里面的star就是自己任意定义的属性，你可以随自己喜好另外定义，接着包含在e­xpression() 里的语句就是JS脚本，在自定义属性与e­xpression之间可别忘了还有一个引号，因为实质还是CSS，所以放在style标签内，而非script 内。OK，这样就很容易地用一句话实现了页面中的链接虚线框的消除。不过你先别得意，如果触发的特效是CSS的属性变化，那么出来的结果会跟你的本意有差别。

　　例如你想随鼠标的移进移出而改变页面中的文本框颜色更改，你可能想当然的会认为应该写为

<style type="text/css">
input {star : e­xpression(onmouseover=this.style.backgroundColor="#F5F5F5";
onmouseout=this.style.backgroundColor="#FFFFFF")}
</style>
<input type="text">
<input type="text">
<input type="text">

　　可结果却是出现脚本出错，正确的写法应该把CSS样式的定义写进函数内，如下所示：

<style type="text/css">
input {star : e­xpression(onmouseover=function()
{this.style.backgroundColor="#FF0000"},
onmouseout=function(){this.style.backgroundColor="#FFFFFF"}) }
</style>
<input type="text">
<input type="text">
<input type="text">

　　PS:不是非常需要，一般不建议使用e­xpression，因为e­xpression对浏览器资源要求比较高。计算开销大，与前端优化相违背，IE专有，且IE8不再支持。

　　原文地址：http://www.blueidea.com/tech/site/2006/3297_2.asp

<dl>
  <dt>网游花费</dt>
  <dd>
    <a href="#">神鬼传奇</a>
    <a href="#">征途</a>
    <a href="#">Q币</a>
    <a href="#">劲舞</a>
    <a href="#">诛仙</a>
    <a href="#">永恒之路</a>
    <a href="#">天龙</a>
    <a href="#">DNF</a>
    <a href="#">中国移动</a>
    <a href="#">中国电信</a>
    <a href="#">中国联通</a>
  </dd>
</dl>

　　这里你可以用你喜欢的列表标签进行布局。

　　然后是CSS样式：

dl {
　　margin:0 auto;
　　padding:10px 11px 10px 10px;
　　width:176px;
　　height:76px;
　　overflow:hidden;
}
dl dt {
　　background:#F9A0C1 url(http://assets.taobaocdn.com/ark/img/promotion_bg.gif) 0 -1004px;
　　clear:both;
　　color:#FFFFFF;
　　display:block;
　　font-weight:bold;
　　height:15px;
　　line-height:15px;
　　overflow:hidden;
　　text-indent:16px;
　　list-style-type:disc;
}
dl dd {
　　overflow:hidden;
　　margin:0;
　　padding:0;
}
dl dd a {
　　border-left:1px solid #BBBBBB;
　　float:left;
　　margin:5px 0 0 -1px;
　　padding:0 5px 0 4px;
　　white-space:nowrap;
}

　　其中关键的是CSS样式：

 dl dd {
　　overflow:hidden;
}

　　和

dl dd a {
　　margin:5px 0 0 -1px;
}

　　利用负边距-1px加上父元素溢出隐藏overflow:hidden;来是实现隐藏第一个类目左边border-left的边。你可以运行以下代码看效果：

　　”Window” 在 Web 页上用影片自己的矩形窗口来播放应用程序，并且始终位于最顶层。
　　”Opaque” 显示页面上位于它后面的内容。
　　”Transparent“使 HTML 页的背景可以透过应用程序的所有透明部分显示出来，并且可能会降低动画性能。

　　”Opaque“和”Transparent“都可与 HTML 层交互，从而允许 SWF 文件上方的层遮蔽应用程序。这两种选项之间的差异在于”Transparent”允许透明，因此，如果 SWF 文件的某一部分是透明的，则 SWF 文件下方的 HTML 层可以透过该部分显示出来，而”opaque”则不会显示。

　　如果忽略此属性，默认值为 Window。仅适用于object。

　　Window速度快、有效率，但无法使用z-index，也没有办法混用于DHTML图层当中，这就是为什么常有人在抱怨自己的下拉菜单跑到Flash后面。

　　Opaque除了可以让你正确控制z-index的样式，也可以透过Javascript來控制它的大小或是移动swf的位置！不过要注意，Opaque的背景可是没有办法透明的，也就是说，任何內容都会被放在swf下面。

　　至于Transparent，想当然，就是把flash的背景变成透明。让swf档案可以融入网页当中而不会出现讨厌的白底，不 过，transparent在IE里面是真的透明，也就是说，下面的网页內容是可以被选取起來的，但是在FF里面，就很讨厌了，因为虽然看起來透明，但是 滑鼠卻无法点选。另外，要稍微注意的是，使用这个值，会让你的flash影片变得比较慢！

　　方法如下：

　　一、设置flash置底，加个代码：<param name=”wmode” value=”opaque” />但是只加这个代码，IE可行，在FF下，失效。要想在FF下起作用，还要用在object　里加个　wmode=”opaque” ，实例代码如下：

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="600" height="248">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="flash/uploader.swf">
<param name="quality" value="high">
<param name="wmode" value="Opaque">
<embed src="flash/uploader.swf" wmode="Opaque" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="600" height="248"></embed>
</object>

　　红色：解决IE下的遮住层问题。
　　绿色加粗：解决Firefox下的遮住层问题。

　　二、设置flash为透明：但是如果你在DW中插入动画，再加<param name=”wmode” value=”transparent”>是不生效的。要把整个的flash插件代码换成如下：

<object type="application/x-shockwave-flash" data="http://www.w3net.cn/images/banner.swf" width="560" height="210">
<param name="movie" value="http://www.w3net.cn/images/banner.swf" />
<param name="wmode" value="transparent" />
</object>

　　三、

在<body>中插入 onblur=self.focus() 也就是<body onblur=self.focus()>

　　这个方法没有作尝试，有试过的朋友给个结果，谢。

　　参考：http://www.17css.com/解决下拉菜单被flash遮住问题.html

<div style="color:#FFF;background:#333;">This is a line of text.</div>

　　2、内嵌式。

<style type="text/css">
  .box {
      color:#FFF;
      background:#333;
  }
</style>

　　3、导入式。

<style type="text/css">
   @import url("css/layout.css");
</style>

　　4、链接式。

<link href="css/layout.css" type="text/css" rel="stylesheet" />

　　在学习交流中发现，其实还是有一部分人没有将制作的页面拿去验证，通常就是实现相关效果，还原了设计稿就OK了，当然这样网页运行是不会出现什么问题，但是其中可能会隐藏着一些简单而基础的错误，可能会给后续的工作带来麻烦。自从有了验证的习惯后，觉得W3C验证指出错误非常直观，很方便修改，而且还是帮助你书写规范很不错的地方，除了纠正书写的错误，你还可以通过这里解决很多不解的问题，比喻一些嵌套问题，在你要布局某种结构，但不知道你写的嵌套是否正确，学习别人的书写也不一定正确，就可以去验证结果，相当方便，也不会消耗多少时间。

　　在制作的时候，你可能觉得你写的结构通过样式都达到了预期的效果，但是作为这个行业，我觉得你必须严格要求自己。 你既然知道W3C标准验证，你就得像这个标准靠齐，不要到最后还是自己的一套标准。

顺便附上验证地址：
W3C html验证地址：http://validator.w3.org
W3C css验证地址：http://jigsaw.w3.org/css-validator

_____________________________________________________________________________

　　下面是在网上看到的验证的10个常见错误，你的错误不一定在其中，但是你只要验证了，相信你能够解决。

　　1. div 标签未关闭
　　这是版面设计失效的最常见原因之一。当我们了解到这是多少精致的版块设计失效的罪魁祸首时，总会大吃一惊。开启的div标签是最普遍的版块设计失误之一，也是最难诊断的失误之一。验证程序有时会指向错误的开启div标签，诊断时就像大海捞针一样麻烦。

　　2. 麻烦的embed标签
　　九十年代早期，Microsoft和Netscape的浏览器开始能够辨认非标准的独有字体。遗憾的是这意味着W3C验证程序还不能识别某些关键HTML 标签，如“embed”，即使这些标签已经被广泛使用。如果确实希望得到严格的DOCTYPE（文档类型）验证，就只能放弃嵌套。
　　如果同时想要生效的版面设计和嵌入式媒体，可以试试Flash Satay方法。

　　3. 不当的DOCTYPE声明
　　不声明DOCTYPE，或者在文件开始错误声明DOCTYPE，也是一个常见错误。根据一般经验，Strict DOCTYPE是大家追求的最高级验证。Strict validation表明你的网页能够在所有浏览器上都得到最佳展示。Strict 声明代码如下：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

　　4. 结尾斜线
　　如果你的网站不能验证，很有可能是在代码的某个地方漏写了结尾斜线。我们很容易忽略结尾斜线之类的东西，特别是在image标签等元素中。例如：

<img src=”" alt=”">

　　在严格的DOCTYPE中这是无效的。要在img标签结尾处加上“/”以解决此问题。

　　5. Align标签
　　如果DOCTYPE被设为Transitional，你就会使用“align”标签，但如果要求更高一点希望得到Strict验证，你会看到很多错误。 Align是另一个不可用于版面设计的标签。可以尝试用“float”或者“text-align”来代替align转换元素。

　　6. JavaScript
　　如果已经声明Strict DOCTYPE，就需要在JavaScript中覆盖CDATA标签。验证程序的这一方面难倒了很多程序员，因为网站倾向于为广告和追踪脚本使用嵌入的 JavaScript。如果必须用到JavaScript，可以在其前后加上如下标签：

<script type=”text/javascript”>
/* <![CDATA[ */
// JavaScript here
};
/* ]]> */
</script>

　　7. 图像需要“alt”属性
　　你可能还没有注意到，图像也是高级验证的潜在绊脚石。除了结尾斜线，高级验证也要求用alt标签来描述图像，如alt= ”Scary vampire picture”.
　　搜索引擎也靠alt标签来识别网页上的图像，所以无论怎样加上alt标签总是好的。

　　8. 未知实体数据
　　实体数据是又一个影响验证的易犯错误。我们可以考虑用适当的编码字符来代替“&”等符号。entire list中列出在XHTML版块设计中可用的适当的编码字符实体数据。

　　9. 不良嵌套
　　嵌套就是元素里又包括元素，如下所示：

<div><strong>Sweet!</strong></div>

　　我们容易混淆嵌套元素的顺序。例如在div标签前启动strong标签，但又先关闭div标签。这可能不会改变版块布局，但却会使你的版块设计失效。

　　10. 缺少“title”标签
　　尽管这看上去是一个很明显的错误，很多程序员（包括我自己）还是经常会在“head”版块中遗漏title标签。当你看到“missing a required sub-element of HEAD”（缺少HEAD的必要子元素）时，才会发现自己忘记添加title标签了。

　　原文地址；http://net.tutsplus.com/articles/web-roundups/10-reasons-why-your-code-wont-validate-and-how-to-fix-it/

　　如果没有CSS的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了CSS以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table标签也是块元素的一种，table based layout和CSS based layout从一般使用者（不包括视力障碍者、盲人等）的角度来看这两种布局，除了页面载入速度的差别外，没有其他的差别。但是如果普通使用者不经意点了查看页面源代码按钮后，两者所表现出来的差异就非常大了。基于良好重构理念设计的CSS布局页面源码，至少也能让没有web开发经验的普通使用者把内容快速的读懂。从这个角度来说，CSS layout code应该有更好的美学体验吧。

　　内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素”a”。

　　块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素cite加上 display:block这样的属性，让他也有每次都从新行开始的属性。

　　可变元素的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。大致的元素分类见全文。

　　关于内联元素(inline element)的中文叫法，有多种内联元素、内嵌元素、行内元素、直进式元素。基本上没有统一的翻译，爱怎么叫怎么叫吧。另外提到内联元素，我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。

　　块元素(block element)

* address – 地址
* blockquote – 块引用
* center – 居中对齐块
* dir – 目录列表
* div – 常用块级容易，也是css layout的主要标签
* dl – 定义列表
* fieldset – form控制组
* form – 交互表单
* h1 – 大标题
* h2 – 副标题
* h3 – 3级标题
* h4 – 4级标题
* h5 – 5级标题
* h6 – 6级标题
* hr – 水平分隔线
* isindex – input prompt
* menu – 菜单列表
* noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容
* noscrīpt – ）可选脚本内容（对于不支持scrīpt的浏览器显示此内容）
* ol – 有序表单
* p – 段落
* pre – 格式化文本
* table – 表格
* ul – 无序列表

 　　内联元素(inline element)

 * a – 锚点
* abbr – 缩写
* acronym – 首字
* b – 粗体(不推荐)
* bdo – bidi override
* big – 大字体
* br – 换行
* cite – 引用
* code – 计算机代码(在引用源码的时候需要)
* dfn – 定义字段
* em – 强调
* font – 字体设定(不推荐)
* i – 斜体
* img – 图片
* input – 输入框
* kbd – 定义键盘文本
* label – 表格标签
* q – 短引用
* s – 中划线(不推荐)
* samp – 定义范例计算机代码
* select – 项目选择
* small – 小字体文本
* span – 常用内联容器，定义文本内区块
* strike – 中划线
* strong – 粗体强调
* sub – 下标
* sup – 上标
* textarea – 多行文本输入框
* tt – 电传文本
* u – 下划线
* var – 定义变量

　　可变元素：
　　可变元素为根据上下文语境决定该元素为块元素或者内联元素。

* applet – java applet
* button – 按钮
* del – 删除文本
* iframe – inline frame
* ins – 插入的文本
* map – 图片区块(map)
* object – object对象
* scrīpt – 客户端脚本

　　这个火狐插件把FireFox浏览器也拥有IE核心，使不适应火狐的网民更快的享受火狐浏览的快感。让WEB制作调试更加方便。

　　下载地址：火狐浏览器IE Tab插件

　　下载后打开Firefox将IE Tab拖到浏览器中点击安装，安装完毕后，点击“工具—-IE Tab选项”可以进行相应的设置。

　　如果在用Firefox浏览网页，碰到Firefox不支持需要用IE的话，可以点击鼠标右键点击“使用IE Tab浏览此页面”，如图：

　　具体功能还是自己安装使用就可以体验到了。

　　下面是 在网上搜到介绍Firefox其他的一些扩展插件：

1. All-in-One Sidebar : 它可以将firefox的很多功能集合到侧栏里，即好用又美观。
2. Bettrt Gmail 2 : 给Gmail增加了几个便捷实用的功能。
3. Easy DragToGo : 拖拽超链接在新窗口(或新标签)中打开，拖拽选中词自动在搜索引擎中搜索，用过之后就知道好。
4. FastDial : 在空白页显示快速书签，将自己最喜欢的收藏放上去，很方便。
5. Firebug : 调试网页很不错的工具。
6. FireGesturs : 鼠标手势，也是Maxthon给惯的坏毛病，让你浏览网页就像玩游戏一样爽。
7. Forecastfox : 天气预报，及时关心你的MM。
8. Foxmarks : 在线书签。
9. IE Tab : 快速切换FF和IE内核。
10. Operator : 发现页面里的微格式。
11. PicLens : 发现页面里的图片或视频（指定网站的），并且以很酷的方式浏览。

　　以上firefox扩展插件，可以先看看官方介绍再安装体验。最后，让我们在FF3的地址栏里输入：about:robots 试试。呵呵。