Asp.net 如何使用CSS复制此GridView样式?
这是一个基本问题,但我对CSS有点生疏,但我被要求使用CSS而不是“gridview样式”标记(如下所示) 基本上,我在GridView上使用以下样式:Asp.net 如何使用CSS复制此GridView样式?,asp.net,css,gridview,Asp.net,Css,Gridview,这是一个基本问题,但我对CSS有点生疏,但我被要求使用CSS而不是“gridview样式”标记(如下所示) 基本上,我在GridView上使用以下样式: <RowStyle BackColor="#ededed" ForeColor="#333" HorizontalAlign="Center" /> <FooterStyle BackColor="#465F7F" Font-Bold="True" ForeColor="White" /> <PagerSty
<RowStyle BackColor="#ededed" ForeColor="#333" HorizontalAlign="Center" />
<FooterStyle BackColor="#465F7F" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#465F7F" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#465F7F" Font-Bold="false" ForeColor="#ffffff" />
<HeaderStyle BackColor="#465F7F" Font-Bold="false" ForeColor="White" HorizontalAlign="Center" />
<EditRowStyle BackColor="#B7B7B7" />
<AlternatingRowStyle BackColor="#e2e6e8" ForeColor="#333333" />
我可以把它转换成CSS吗?所以我可以设置我的GridView CssClass,它将应用所有这些样式。现在,代码在每个网格上都被复制,所以更改它是一件烦琐的事情 只需使用网格的
CssClass
属性,将所有内容都放到该css类中,就可以了
例如,与此相反:
<RowStyle BackColor="#ededed" ForeColor="#333" HorizontalAlign="Center" />
将基本样式应用于GridView,并使用CSS的强大功能
<asp:GridView id="gvTestGrid" runat="server" cssclass="gridview-common" >
<HeaderStyle cssClass="gridview-header" />
...
</asp:GridView>
通过替换下面相应的样式,您将获得相同的效果
你也应该考虑使用jQuery主题滚动条的样式来轻松地使网格看起来很漂亮。p>
请发布生成的html。
.gridViewRow
{
background-color:#ededed;
color:#333;
text-align:center;
}
<asp:GridView id="gvTestGrid" runat="server" cssclass="gridview-common" >
<HeaderStyle cssClass="gridview-header" />
...
</asp:GridView>
.gridview-common {
/* table styles */
}
.gridview-common th.gridview-header, .gridview-common th.gridview-header:hover {
/* Header styles */
}
.gridview-common tbody tr {
/* Row styles */
}
.gridview-common tbody tr:hover {
/* Row Hover styles */
}
.RowStyle
{
background-color: #ededed;
color:#333;
text-align:center;
}
.FooterStyle
{
background-color:#465F7F; font-weight: bold; color:White;
}
.PagerStyle {background-color:#465F7F; color:White; text-align:center; }
.SelectedRowStyle { background-color:#465F7F; font-weight: normal; color:#ffffff }
.HeaderStyle {background-color:#465F7F; font-weight: normal; color:White; text-align:center; }
.EditRowStyle {background-color:#B7B7B7; }
.AlternatingRowStyle {background-color:#e2e6e8; color:#333333 }