在Web开发中，数据网格（DataGrid）控件是展示数据的一种常用方式。然而，直接应用样式到DataGrid并不总是能达到预期效果，因为DataGrid在浏览器中的渲染方式。本文将介绍一些简单的技巧，帮助开始使用样式。
首先，为什么要使用样式呢？可以在Visual Studio .NET中使用自动格式化功能，但如果老板雇佣的“UI专家顾问”坚持要在行之间增加额外的间距，将不得不逐个编辑项目中的每个网格。使用样式可以让从一个地方控制所有网格的外观。
在DataGrid中，有几个地方可以很容易地分配样式，使用CssStyle属性。它们是：
在示例中，这样设置了DataGrid：
<asp:datagrid id="DataGrid1" runat="server" CssClass="Grid">
<HeaderStyle CssClass="GridHeader"></HeaderStyle>
<ItemStyle CssClass="GridItem"></ItemStyle>
<AlternatingItemStyle CssClass="GridAltItem"></AlternatingItemStyle>
</asp:datagrid>
将CssStyle的Grid应用于asp:datagrid元素，并将各种其他样式应用于其他网格样式元素。在外部样式表中，使用了以下行，创建了一个1像素厚的实心棕褐色边框。
.Grid { border: solid 1px Tan; }
将样式类应用于整个网格还有其他好处 - 可以使用该类来引用网格的子元素，如下所示：
.Grid td {
border: solid 3px #FFFFFF;
margin: 3px 3px 3px 3px;
font-family: Arial;
padding: 5px 5px 5px 5px;
text-align: center;
}
上面的样式适用于网格中的所有单元格，因为它们都是td元素。它使所有文本都使用Arial字体并居中，创建了粗白网格线，并在单元格之间插入了一些填充和间距。
接下来，来格式化标题行。这相当简单，使用应用于
.GridHeader {
font-weight: bold;
background-color: Tan;
}
这在创建排序网格时效果不错。排序网格的标题行有超链接标签。这些超链接不采用到目前为止分配的样式。但可以通过以下方式解决：
.GridHeader a {
text-decoration: none;
color: LightGoldenrodYellow;
padding: 0px 15px 0px 15px;
}
上面的代码处理了超链接的颜色和样式。填充不是必需的，但用它来说明一些更高级的CSS，如下所示：
.GridHeader a:hover {
text-decoration: underline;
background: Tan url(images/spin.gif) no-repeat 0 100%;
}
hover关键字用于表示鼠标移动到链接上时会发生什么。在例子中，将超链接下划线，并使其旁边出现一个小图像。（这就是为什么之前创建了15px的填充；这样图像就有地方放置了）。图像是一个旋转按钮，希望能向用户指示点击标题会做什么。
接下来，想要为网格行设置一些属性。在例子中，决定使行字体稍微小一些，以便在行中放入更多数据。
.GridItem, .GridAltItem {
font-size: smaller;
}
注意是如何将样式应用于正常行和交替行的。接下来，应用样式以区分交替行：
.GridItem {
background-color: LightGoldenrodYellow;
}
.GridAltItem {
background-color: PaleGoldenrod;
}
这就完成了所有基础知识。
这里使用的样式已在IE6和Mozilla FireFox 0.91中进行了测试。它们将在不支持一些更高级功能（如悬停旋转按钮）的浏览器上优雅降级。可下载的代码包括多个样式表。在FireFox上，可以使用左下角的小图标切换样式。在IE中，需要编辑源代码来查看其他样式。