css 在项目中的应用

 编写自己的DataGrid 样式

首先编写好自己的DataGrid样式表StyleSheet_dg.css

 

body
... {     
    background-color: #dbdee2; font-size: x-small; font-family: @宋体;
}
.datagrid
... {
font-family: Verdana, Arial, Helvetica, sans-serif;
width :800px;
border :solid 1px darkgray;
table-layout :fixed ;
border-collapse :separate ;
top:auto;
left:auto;
}
.dg_header
... {
font-weight :bold ;
color:White;
background-color :#3366CC;
border :solid 1px darkgray;
Font-Size:X-Small;
font-family:@宋体;
text-align:center;
vertical-align:middle;

}
.dg_alter
... {
color:#08785A;
background-color :#B8D5F2;
font-size:x-small;
text-align:center;
font-family:宋体;
vertical-align:middle;
border :solid 1px darkgray;

}
.dg_item
... {
color : #003399;
background-color:#CBD7E3 ; 
border :solid 1px darkgray;
text-align:center;
font-family:宋体;
vertical-align:middle;
font-size:x-small;
}
.dg_page
... {
    font-family:宋体;
    font-size:x-small;
 text-align:center; 

}

 

然后在webform.aspx页选择－格式－文档样式－添加样式链接到－StyleSheet_dg.css

最后在datagrid的属性中设置相应的项例如：

cssclass 设置为 datagrid

HeaderStyle -cssclass设置为dg_header

ItemStyle-cssclass 设置为dg_item

效果前后对比：

设置前

设置后

 

这样你就可以将你的datagrid个性化了。