可不可以改动datagrid的自动套用格式中的样式或是自己新加入样式？

Question

写好样式表文件,设置datagrid的CSS属性

Answer 1

通常情况下可以自己写CSS文件，然后在项目中引用这个文件
CSS文件的一般格式，例：style.css
BODY
{
/*color: Black;*/
font-family: 宋体,Verdana,Arial, Helvetica,serif,sans-serif;
font-size: 9pt;
font-weight: 100;
margin: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
background-image: url(../images/bg.gif);
background-repeat: repeat;
}TABLE
{
font-family: 宋体,Verdana,Arial, Helvetica,serif,sans-serif;
font-size: 9pt;
font-weight: 100;
}.REDSTAR
{
color:Red;
}
/*table style*/
.TABLECLASS
{
font-family: 宋体,Verdana,Arial, Helvetica,serif,sans-serif;
font-size: 9pt;
font-weight: 100;
background-color: #E6E4FF;
border-color: #A285C9;
border-width: 1px;
border-style: solid;
}
.TABLENOBORDER
{
font-size: 9pt;
font-weight: normal;
background-color: #E6E4FF;
border-color: #A285C9;
border-width: 0px;
border-style: solid;
}
.TABLEHEAD
{
font-weight: bold;
font-size: 9pt;
color: White;
background-color: #E6E4FF;
background-image: url(../images/title_bg.gif);
background-repeat: no-repeat;
}
/*menu style*/
.MENU
{
background-color: White;
width: 100%;
font-size: 9pt;
font-weight: bold;
}
/* datagrid style*/
.DataGrid
{
font-size: 9pt;
font-weight: normal;
background-color: #FFF7EF;
border-color: #A285C9;
border-width: 1px;
width: 100%;
}
.HeaderStyle
{
font-weight: bold;
font-size: 9pt;
font-weight: normal;
background-color: #F7E7B5;
border-color: #A285C9;
width: 100%;
text-align: center;
}
.EditItemStyle
{
font-size: 9pt;
font-weight: normal;
background-color: #E6E4FF;
border-color: #A285C9;
border-width: 1px;
}
.AlternatingItemStyle
{
background-color: #FFF7EF;
}
.ItemStyle
{
background-color: White;
}
.SelectedItemStyle
{

}
.FooterStyle
{

}
/*input style*/
INPUT
{
font-size: 9pt;
font-weight: normal;
height: 20px;
}
/*button style*/
.BUTTON
{
background-image: url(../images/button.gif);
width: 73px;
height: 21px;
cursor: hand;
border-style: none;
}.BUTTONLANGUAGE
{
background-image: url(../images/button.gif);
width: 73px;
height: 21px;
cursor: hand;
border-style: none;
visibility:hidden;
}.BUTTONDOWN
{
background-image: url(../images/button_Arrow2.gif);
width: 73px;
height: 21px;
cursor: hand;
border-style: none;
}.BUTTONUP
{
background-image: url(../images/button_Arrow1.gif);
width: 73px;
height: 21px;
cursor: hand;
border-style: none;
}/* drop down list style*/
.SELECT
{
height: 20px;
width: 150px;
border-color: #A285C9;
border-style: none;
border-width: 0px;
}.LABELPAGING
{
height: 19px;
width: 20px;
background-color: Transparent;
border-width: 0px;
border-style: none;
}.LABELTEXT
{
color: black;
text-justify:inter-word;
font-size: 9pt;
font-weight: 100;
width: 150px;
height: 19px;
}.LABELSMALL
{
color: #8B8F9A;
background-color: #E1E5EE;
border-color: #A285C9;
border-style: solid;
border-width: 1px;
width: 150px;
height: 19px;
}.LABELLONGER
{
color: #8B8F9A;
background-color: #E1E5EE;
border-color: #A285C9;
border-style: solid;
border-width: 1px;
width: 240px;
height: 19px;
}.LABELLONGEST
{
color: #8B8F9A;
background-color: #E1E5EE;
border-color: #A285C9;
border-style: solid;
border-width: 1px;
width: 450px;
height: 19px;
}.LABELMESSAGE
{
color: #8B8F9A;
background-color: #E1E5EE;
border-color: #A285C9;
border-style: solid;
border-width: 1px;
width: 580px;
height: 19px;
} /*Text Box style */
.INPUTSMALL
{
height: 20PX;
width: 150PX;
border-color: #A285C9;
border-style: solid;
border-width: 1px;
}.INPUTLONGER
{
height: 20px;
width: 240px;
border-color: #A285C9;
border-style: solid;
border-width: 1px;
}.INPUTLONGEST
{
height: 20PX;
width: 450px;
border-color: #A285C9;
border-style: solid;
border-width: 1px;
}.PANELTABLE
{
font-size: 9pt;
font-weight: normal;
background-color: #E6E4FF;
}/*伪类*/
A
{
clear: left;
color: #0090C8;
font-size: 9pt;
font-weight: 100;
text-decoration: underline;
}A:active
{
color: #0090C8;
font-size: 9pt;
text-decoration: underline;
}A:link
{
color: #0090C8;
font-size: 9pt;
text-decoration: underline;
}A:visited
{
color:#840084;
font-size: 9pt;
text-decoration: underline;
}A:hover
{
color: #00A0E0;
font-size: 9pt;
text-decoration: underline;
}在网页中引用此风格
在HTML的HEAD中加上这样一句
<LINK href="Style.CSS" rel="stylesheet">href可以为相对路径，请注意比较你的文件目录与放CSS文件的目录具体控件中引用CSS,例
<td><asp:label id="labDocNo" runat="server" Width="350px" CssClass="LABELSMALL"></asp:label></td>

Answer 2

不过这一般都是美工做的，以下是一个DataGrid的例子
<td><asp:datagrid id="datagridFileList" CssClass="DataGrid" Width="100%" Runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" PagerStyle-Mode="NumericPages" PagerStyle-HorizontalAlign="Right" BorderColor="#A285C9">
<EditItemStyle CssClass="EditItemStyle"></EditItemStyle>
<AlternatingItemStyle CssClass="AlternatingItemStyle"></AlternatingItemStyle>
<ItemStyle CssClass="ItemStyle"></ItemStyle>
<HeaderStyle CssClass="HeaderStyle"></HeaderStyle>
<Columns>
<asp:BoundColumn DataField="TUFSERIALNO" ReadOnly="True" HeaderText="文件序列号" ItemStyle-Width="10%" ItemStyle-HorizontalAlign="Center"></asp:BoundColumn>
<asp:BoundColumn DataField="TUFFILENAME" ReadOnly="True" HeaderText="文件名称" ItemStyle-Width="45%" ItemStyle-HorizontalAlign="left"></asp:BoundColumn>
<asp:BoundColumn DataField="TUFUPLOADDATE" ReadOnly="True" HeaderText="上传日期" ItemStyle-Width="15%" ItemStyle-HorizontalAlign="Center" DataFormatString="{0:yyyy-MM-dd}"></asp:BoundColumn>
<asp:TemplateColumn HeaderText="详细" ItemStyle-Width="6%" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:LinkButton Runat="server" CommandName="view" ID="lkbtnView" text="察看"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateColumn>
<asp:ButtonColumn Text="&lt;img src=../../Images/Delete.gif border=0 title=删除 onclick='return delete_click()'&gt;" HeaderText="删除" CommandName="delete" ItemStyle-Width="5%" ItemStyle-HorizontalAlign="Center"></asp:ButtonColumn>
</Columns>
</asp:datagrid>
</td>