原文：http://blogs.msdn.com/webdevtools/archive/2007/01/...
在我演示Orcas新的CSS功能时,得到一个问题问如何使用这些工具来帮助我们分析页面上的样式。或明确点说，为什么页面不按我们所期待的样式来显示呢。在Orcas中包含了一个非常有用的工具，叫做CSS Property Grid（样式属性表格）。它看起来和普通的表格没什么两样，但是它确实包含了更多的内容。
让我们来看一个复杂页面例子：www.msn.com
找到"Are sewing circles cool again?"链接，为什么它是这样格式化的呢，为什么上面的链接是加粗的？看CSS property grid，在上半部分你可以看到作用于这个元素的选择符。这里会列出直接作用于它，和从父元素继承下来的样式属性。在这里，你可以看到比传统页面设计器更详细的信息。在这里我们至少可以知道有哪些规则，但是我们如何才能知道它们的值呢？我们可以选择每一个选择符，然后会在表格的下半部分显示出这个规则的所有属性值，我们可以按需要来编辑这些值。我们同样可以把鼠标移到这些规则选择符上，会出现这些选择符完整定义的tooltip。
[tooltip会显示样式的原始定义，如果该样式被写在同一行，那么你将会得到一串很长的提示。]
接下来要弄明白，它为什么是像我们看到的那样显示的呢？你可以单击"Summary"按钮改变成综合视图。
在下面我们就可以看到这些规则是如何被应用的。在这里，有多个选择符定义了相同的属性，有一些被覆盖了，你可以看到有5个color属性，但是只有最后一个是生效的，其它的都被忽略了。
如果你把鼠标移到某一个属性上，它将会显示它正哪个选择符所重写。如果你要知道某个属性来自哪个规则，你可以单击它，在上面的视图中会将该选择符高亮显示出来。在这个例子中，值为70%的font-size属性是从body中继承而来的，它定义在override.css文件。（文件名显示在"Summary"下面）。
你可以在视图编辑这些属性，或者可以单击视图的上半部分来获得这些选择符的所有属性列表。