Css 如何在ASP.NET AJAX TabControl中设置控件样式_Css_Asp.net_Ajax_Tabcontrol

Css 如何在ASP.NET AJAX TabControl中设置控件样式

css asp.net ajax

Css 如何在ASP.NET AJAX TabControl中设置控件样式,css,asp.net,ajax,tabcontrol,Css,Asp.net,Ajax,Tabcontrol,我正在尝试将样式应用于AJAX选项卡控件中的GridView。样式将在设计器中应用，但在浏览器中查看时，控件将在没有任何样式的情况下呈现。如果从选项卡控件中删除GridView，则会应用样式代码如下： <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"&g

我正在尝试将样式应用于AJAX选项卡控件中的GridView。样式将在设计器中应用，但在浏览器中查看时，控件将在没有任何样式的情况下呈现。如果从选项卡控件中删除GridView，则会应用样式

代码如下：

    <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>    
   <style type="text/css">
       html
       {
           font-family:Arial;
       }
       #grid
       {
           border:none;
       }    
        #grid th
        {
            background:linear-gradient(#FAFAFA, #D8D8D8);            
            padding:5px;
            border-bottom:1px solid gray;
            border-top: 1px solid gray;    
            border-left:none;
            border-right:none;   
            font-style:normal; 
            font-weight: normal;

        }
        #grid td
        {
            padding:5px;  
            border-bottom:1px solid gray;
            border-top: 1px solid gray;    
            border-left:none;
            border-right:none;  
            width:100px;     
        }
        .select
        {
           text-decoration: none;
       }
       .select:hover
       {
           text-decoration: underline;
       }
   </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:TabContainer ID="TabContainer1" runat="server">
        <asp:TabPanel ID="pnl1" runat="server" HeaderText="My Tab">           
            <ContentTemplate>
                <asp:GridView ID="grid" runat="server"
            onselectedindexchanged="grid_SelectedIndexChanged">
            <Columns>
                <asp:TemplateField>
                    <EditItemTemplate >
                        <asp:CheckBox ID="CheckBox1" runat="server" />
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="CheckBox1" runat="server" />
                    </ItemTemplate>
                    <ItemStyle Width="30px" />                    
                </asp:TemplateField>
                <asp:TemplateField ShowHeader="False">
                    <ItemTemplate>
                        <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" 
                            CommandName="Select" Text="Select"></asp:LinkButton>
                    </ItemTemplate>
                    <ControlStyle CssClass="select" />
                    <ItemStyle Width="60px" CssClass="select" />
                </asp:TemplateField>
            </Columns>
            <HeaderStyle HorizontalAlign="Left" />
            <RowStyle HorizontalAlign="Left" />                    
        </asp:GridView>
            </ContentTemplate>
        </asp:TabPanel>
        </asp:TabContainer>
    </div>      
    </form>
</body>
</html>


html
{
字体系列：Arial；
}
#网格
{
边界：无；
}    
#网格th
{
背景：线性梯度（#FAFAFA，#D8D8D8）；
填充物：5px；
边框底部：1px纯色灰色；
边框顶部：1px纯色灰色；
左边界：无；
边界权：无；
字体风格：普通；
字体大小：正常；
}
#网格td
{
填充物：5px；
边框底部：1px纯色灰色；
边框顶部：1px纯色灰色；
左边界：无；
边界权：无；
宽度：100px；
}
.选择
{
文字装饰：无；
}
。选择：悬停
{
文字装饰：下划线；
}

为什么没有将样式应用到GridView？

当

选项卡控件内时，GridView
的id
将不再只是网格
。因此，#grid
的css样式将不再有效
网格的id
类似于TabContainer1\u pnl1\u grid

让你的风格发挥作用的一种方法是在你的GridView
上指定一个CssClass
的grid
（或者你想叫它什么都行）
<asp:GridView ID="grid" runat="server" CssClass="grid">

.grid
{
    border: none;
}
.grid th
{
    background: linear-gradient(#FAFAFA, #D8D8D8);
    padding: 5px;
    border-bottom: 1px solid gray;
    border-top: 1px solid gray;
    border-left: none;
    border-right: none;
    font-style: normal;
    font-weight: normal;
}
.grid td
{
    padding: 5px;
    border-bottom: 1px solid gray;
    border-top: 1px solid gray;
    border-left: none;
    border-right: none;
    width: 100px;
}