博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

为GridView控件制作CSS样式的方法

Posted on 2009-01-02 15:12  赢在自己  阅读(389)  评论(0)  编辑  收藏  举报

在<head></head>标签中加入一个样式表，并定义它．

<style type="text/css">
                    .GridViewStyle
               {  
                    border-right: 2px solid #A7A6AA;
                    border-bottom: 2px solid #A7A6AA;
                    border-left: 2px solid white;
                    border-top: 2px solid white;
                    padding: 4px;
                }

                .GridViewStyle a
                {
                    color: #FFFFFF;
                }

                .GridViewHeaderStyle th
                {
                    border-left: 1px solid #EBE9ED;
                    border-right: 1px solid #EBE9ED;
                }

                .GridViewHeaderStyle
                {
                    background-color: #5D7B9D;
                    font-weight: bold;
                    color: White;
                }

                .GridViewFooterStyle
                {
                    background-color: #5D7B9D;
                    font-weight: bold;
                    color: White;
                }

                .GridViewRowStyle
                {
                    background-color: #F7F6F3;
                    color: #333333;
                }

                .GridViewAlternatingRowStyle
                {
                    background-color: #FFFFFF;
                    color: #284775;
                }

                .GridViewRowStyle td, .GridViewAlternatingRowStyle td
                {
                    border: 1px solid #EBE9ED;
                }

                .GridViewSelectedRowStyle
                {
                    background-color: #E2DED6;
                    font-weight: bold;
                    color: #333333;
                }

                .GridViewPagerStyle
                {
                    background-color: #284775;
                    color: #FFFFFF;
                }

                .GridViewPagerStyle table /**//* to center the paging links*/
                {
                    margin: 0 auto 0 auto;
                }
    </style>

这时一个完整的对gridView的样式表就已经定义完成了．现在来实现它的应用

<asp:GridView CssClass="GridViewStyle" runat="server" >
    <FooterStyle CssClass="GridViewFooterStyle" />
    <RowStyle CssClass="GridViewRowStyle" />   
    <SelectedRowStyle CssClass="GridViewSelectedRowStyle" />
    <PagerStyle CssClass="GridViewPagerStyle" />
    <AlternatingRowStyle CssClass="GridViewAlternatingRowStyle" />
    <HeaderStyle CssClass="GridViewHeaderStyle" />
</asp:GridView>