代码之家 › 专栏 › 技术社区 › Dana Robinson

打开排序时ASP.NET网格视图CSS问题

gridview css asp.net

Dana Robinson · 技术社区 · 16 年前

我在一个ASP.NET应用程序中创建了一个网格视图,并使用自动格式化工具应用了一个吸引人的样式。现在我将样式标记移到CSS工作表中,我遇到了一个奇怪的问题,标题行中的文本颜色不正确(应该是白色,但显示为亮蓝色)。 这个问题只在我打开排序时出现。

其他一切正常。例如,我可以将标题背景更改为红色,它将变为红色,其余的网格样式将被适当应用。

有人知道交易的线索吗?我在下面列出了代码片段。我对CSS也相当陌生。如果有人能从某种程度上改进我的CSS标记,请告诉我。

谢谢!

这是ASP.NET代码。我可以将forecolor=“white”添加到HeaderStyle中,所有功能都正常。

<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;
}

6 回复 | 直到 10 年前

Matt Wilko kingecg 12 年前

我猜明亮的蓝色和超链接的颜色非常相似。使GridView可排序意味着您将在页眉中有一个标记,而不仅仅是纯文本。

应该这样分类:

.grid-header a { color: White; background-color: #507CD1; font-weight: bold; }

sth ACP 15 年前

这是我唯一能让它工作的方法:

.HeaderStyle a
{
    background-color: #DE7B0A;
    color: White!important
}

我注意到 .aspx 被渲染的将 style="color:#333333" 链接本身上的标记。设置颜色选项 !important 要覆盖默认渲染,我只能使用它。

希望能帮助别人。

sth ACP 15 年前

以下内容对我很有用。添加:

.grid-header th a
{
    color: White;
}

“ th a “无论分配如何,都可以工作。

gabe 10 年前

我不确定你是如何在你的标题上加上白色背景,不加排序,因为你的网格标题背景在你的css中设置了蓝色(507cd1):

.grid-header, .grid-footer { color: White; background-color: #507CD1; font-weight: bold; }

如果您希望标题背景为白色(您还需要将字体颜色更改为较深的颜色),请执行以下操作:

.grid-header, .grid-footer { color: #000; background-color: #fff; font-weight: bold; }

您还需要从GridView的headerStyle属性中删除forecolor,以便能够像这样看到标题中的文本:

<HeaderStyle CssClass="grid-header" />

user39603 16 年前

样式表中的标题颜色正确:507CD1为亮蓝色。那么,白色在哪里出现呢?在Visual Studio的设计器中?你的意思是为了头球吗背景是白色的,还是文本 ?

此外,从标记中删除forecolor=“white”也不会有什么影响。它已经在样式表中了。

更新 :我还没有把这个问题读得足够透彻,抱歉。以上都是胡说八道。(或者在我撰写答案时修改了问题)。不知道)

dbc Austin 12 年前

注意,在《印地》中詹姆士提出的风格中增加了th,如

.grid header th a color:white;

通过设置您用于的链接,将阻止页导航部分中的链接受到影响 排序列。