请问怎么为DataGrid写css？

做网页用DataGrid，以前使用DataGrid前台的 HeaderStyle-Font-Size等属性设置样式，后来觉得太麻烦，现在请大家指教，怎么编写外置的css样式表？也是用HeaderStyle-Font-Size等吗？编写好了，怎么引用？？

解决方案 »

  1.   

    DataGrid应用样式文件定义动态样式
    在ASP.NET开发过程中，DataGrid使用的频率是非常高的，对于DataGrid的样式来说大家普遍使用的是自定义不同的颜色来应用于DataGrid的Header, Footer, EditItem, SelectItem, Item, Page，然而如果在每个页面都要对上述样式逐个设置，工作效率可想而知了，估计一天也出不了几个页面，而且在VS.NET中一个最大的BUG就是当我们对已经定义好的DataGrid重新布置页面布局时，发觉其所有的事件会莫名其妙丢失。或许有时候我们只好使用VS.NET已经提供好的自动套用格式模板，但有时候我们必须，而且不由我们使用套用模板怎么办（比如客户的要求），下面我就讲解一下在DataGrid中应用样式文件来定义动态样式，这样就解决了当客户对一套颜色配套方案不满意时，可以花费几分钟的时间重新定义一套，是不是效率会提高很多。废话少说看看下面的css.css文件是怎么定义的 css.css文件内容： .dg_header 
    { 
    font-weight :bold ; 
    color:#FFFFCC; 
    background-color :#990000; 
    border-width: 2px; 
    border-color :#CC9966; 
    border-style :solid; } 
    .dg_alter 
    { 
    background-color :#FFE0C0; 
    border-left-color:Green; 
    border-width: 2px; 
    border-color :#CC9966; 
    border-style :solid; 
    } 
    .dg_item 
    { 
    color :#330099; 
    background-color:White ; 
    border-width:2px; 
    border-color :#CC9966; 
    border-style :solid; 
    } 
    .dg_page 
    { 
    border-width: 2px; 
    border-color :#CC9966; 
    border-style :solid; 
    } 接下来的工作就是要应用此样式文件到页面的DataGrid中了 首先在页面<HEAD></HEAD>之间插入下面的语句 <link href="css.css" type="text/css" rel="stylesheet"> 然后选择页面上的DataGrid，改变需要应用样式属性值的CssClass 例如： 
    点击HeaderStyle属性左边的十字打开选项，给CssClass应用样式dg_header 最后绑定DataGrid看看是不是样式已经应用上了，如果没有应用上有两种可能 1、去掉系统自动套用样式 2、察看css.css文件是否定义正确
      

  2.   

    <asp:datagrid id="dtgNoteList" Runat="server" CssClass="DataGrid" AutoGenerateColumns="False">
    <ItemStyle CssClass="GridItem"></ItemStyle>
    <HeaderStyle CssClass="GridHeader"></HeaderStyle>
    <FooterStyle CssClass="GridFooter"></FooterStyle>
    </asp:datagrid><style>
    /* Grid Style - Start */.gridArea
    {
    }.gridArea .DataGrid
    {
    }.gridArea .DataGrid td
    {
    }.gridArea .GridHeader
    {
    }.gridArea .GridHeader td
    {
    }.gridArea .GridItem
    {
    }.gridArea .GridItem td
    {
    }.gridArea .GridItem .button
    {
    }.gridArea .GridAltItem
    {
    }/* Grid Style - End */</style>===================
    may be you could try this.
      

  3.   

    我是把设置datagrid的样式作了 个函数，然后在datagrid的itemdatabound中调用这个函数进行样式设置。
    函数如下：(这个函数在main_func类中)
    public void setgrid(DataGrid dg,System.Web.UI.WebControls.DataGridItemEventArgs e)
    {
    dg.BorderColor=Color.FromName("#6B99F1");
    dg.BorderWidth=1;
    dg.CellPadding=3;
    dg.AlternatingItemStyle.BackColor=Color.FromName("#E8EFFD");
    dg.ItemStyle.BackColor=Color.FromName("F1F1F1");
    dg.HeaderStyle.ForeColor=Color.FromName("#ffffff");
    dg.HeaderStyle.BackColor=Color.FromName("#6B99F1");
    dg.HeaderStyle.Font.Bold=true;
    dg.SelectedItemStyle.BackColor=Color.Bisque;
    //////////////////////////////////

    if(e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) 
    { 
    //颜色交替   
    e.Item.Attributes.Add("onmouseover","this.style.backgroundColor='#C5D8FA'"); 
    if(e.Item.ItemType == ListItemType.Item) 
    { 
    e.Item.Attributes.Add("onmouseout", "this.style.backgroundColor='#f1f1f1'"); 
    }  if(e.Item.ItemType ==ListItemType.AlternatingItem) 
    { 
    e.Item.Attributes.Add("onmouseout", "this.style.backgroundColor='#E8EFFD'"); 
    } 
    } 


    }在datagrid的itemdatabound函数中： private void dg_show_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)//设置datagrid样式
    {
    main_func mf=new main_func(Response);
    mf.setgrid(dg_show,e);
    }
    感觉还是挺方便的吧，所有的样式都可以设置，包括鼠标移动背景颜色变化，弹出确认窗口等等。。