如何解决ASP.NET GridView在打开时出现的CSS样式问题？
- 内容介绍
- 文章标签
- 相关推荐
本文共计553个文字，预计阅读时间需要3分钟。
在ASP.NET应用中创建了一个GridView，并应用了一个有吸引力的样式。现在将样式标记移动到CSS工作表上，遇到一个奇怪的问题：行中的文本颜色不正确（它应该显示为）。
我在ASP.NET应用程序中创建了一个GridView,并使用自动格式工具应用了一个有吸引力的样式.现在我将样式标记移动到CSS工作表上,我有一个奇怪的问题,标题行中的文本不是正确的颜色(它应该是白色但它显示为亮蓝色).此问题仅在我打开排序时显示.其他一切都很好.例如,我可以将标题背景更改为红色,它将变为红色,其余的网格样式将适当应用.
有没有人知道这笔交易是什么？我在下面列出了代码段.我也是CSS的新手.如果有人有任何提示,以某种方式使我的CSS标记更好,请告诉我.
谢谢！
这是ASP.NET代码.我可以在HeaderStyle中添加ForeColor =“White”,一切正常.
<asp:GridView ID="GridView1" runat="server" CssClass="grid" AutoGenerateColumns="False" DataKeyNames="ID" DataSourceID="SqlDataSource1" EmptyDataText="There are no data records to display." AllowSorting="True" CellPadding="4" GridLines="Both"> <FooterStyle CssClass="grid-footer" /> <RowStyle CssClass="grid-row" /> <Columns> <asp:BoundField DataField="Kingdom" HeaderText="Kingdom" SortExpression="Kingdom" /> <asp:BoundField DataField="Phylum" HeaderText="Phylum" SortExpression="Phylum" /> <asp:BoundField DataField="GenusSpeciesStrain" HeaderText="Genus species (strain)" SortExpression="GenusSpeciesStrain" /> <asp:BoundField DataField="Family" HeaderText="Family" SortExpression="Family" /> <asp:BoundField DataField="Subfamily" HeaderText="Subfamily" SortExpression="Subfamily" /> <asp:BoundField DataField="ElectronInput" HeaderText="Electron Input" SortExpression="ElectronInput" /> <asp:BoundField DataField="OperonLayout" HeaderText="Operon Layout" SortExpression="OperonLayout" /> </Columns> <PagerStyle CssClass="grid-pager" /> <SelectedRowStyle CssClass="grid-selected-row" /> <HeaderStyle CssClass="grid-header" /> <EditRowStyle CssClass="grid-row-edit" /> <AlternatingRowStyle CssClass="grid-row-alternating" />
这是我正在使用的样式表中的内容：
body {
}
.grid
{
color: #333333;
}
.grid-row
{
background-color: #EFF3FB;
}
.grid-row-alternating
{
background-color: White;
}
.grid-selected-row
{
color: #333333;
background-color: #D1DDF1;
font-weight: bold;
}
.grid-header, .grid-footer
{
color: White;
background-color: #507CD1;
font-weight: bold;
}
.grid-pager
{
color: White;
background-color: #2461BF;
text-align: center;
}
.grid-row-edit
{
background-color: #2461BF;
}
我猜测亮蓝色非常类似于超链接的颜色.
使gridview可排序意味着您的标题内部将有一个标记,而不仅仅是纯文本.
这应该排序：
.grid-header a { color: White; background-color: #507CD1; font-weight: bold; }
本文共计553个文字，预计阅读时间需要3分钟。
在ASP.NET应用中创建了一个GridView，并应用了一个有吸引力的样式。现在将样式标记移动到CSS工作表上，遇到一个奇怪的问题：行中的文本颜色不正确（它应该显示为）。
我在ASP.NET应用程序中创建了一个GridView,并使用自动格式工具应用了一个有吸引力的样式.现在我将样式标记移动到CSS工作表上,我有一个奇怪的问题,标题行中的文本不是正确的颜色(它应该是白色但它显示为亮蓝色).此问题仅在我打开排序时显示.其他一切都很好.例如,我可以将标题背景更改为红色,它将变为红色,其余的网格样式将适当应用.
有没有人知道这笔交易是什么？我在下面列出了代码段.我也是CSS的新手.如果有人有任何提示,以某种方式使我的CSS标记更好,请告诉我.
谢谢！
这是ASP.NET代码.我可以在HeaderStyle中添加ForeColor =“White”,一切正常.
<asp:GridView ID="GridView1" runat="server" CssClass="grid" AutoGenerateColumns="False" DataKeyNames="ID" DataSourceID="SqlDataSource1" EmptyDataText="There are no data records to display." AllowSorting="True" CellPadding="4" GridLines="Both"> <FooterStyle CssClass="grid-footer" /> <RowStyle CssClass="grid-row" /> <Columns> <asp:BoundField DataField="Kingdom" HeaderText="Kingdom" SortExpression="Kingdom" /> <asp:BoundField DataField="Phylum" HeaderText="Phylum" SortExpression="Phylum" /> <asp:BoundField DataField="GenusSpeciesStrain" HeaderText="Genus species (strain)" SortExpression="GenusSpeciesStrain" /> <asp:BoundField DataField="Family" HeaderText="Family" SortExpression="Family" /> <asp:BoundField DataField="Subfamily" HeaderText="Subfamily" SortExpression="Subfamily" /> <asp:BoundField DataField="ElectronInput" HeaderText="Electron Input" SortExpression="ElectronInput" /> <asp:BoundField DataField="OperonLayout" HeaderText="Operon Layout" SortExpression="OperonLayout" /> </Columns> <PagerStyle CssClass="grid-pager" /> <SelectedRowStyle CssClass="grid-selected-row" /> <HeaderStyle CssClass="grid-header" /> <EditRowStyle CssClass="grid-row-edit" /> <AlternatingRowStyle CssClass="grid-row-alternating" />
这是我正在使用的样式表中的内容：
body {
}
.grid
{
color: #333333;
}
.grid-row
{
background-color: #EFF3FB;
}
.grid-row-alternating
{
background-color: White;
}
.grid-selected-row
{
color: #333333;
background-color: #D1DDF1;
font-weight: bold;
}
.grid-header, .grid-footer
{
color: White;
background-color: #507CD1;
font-weight: bold;
}
.grid-pager
{
color: White;
background-color: #2461BF;
text-align: center;
}
.grid-row-edit
{
background-color: #2461BF;
}
我猜测亮蓝色非常类似于超链接的颜色.
使gridview可排序意味着您的标题内部将有一个标记,而不仅仅是纯文本.
这应该排序：
.grid-header a { color: White; background-color: #507CD1; font-weight: bold; }