Как бы я повторил этот стиль GridView с помощью CSS?

Question

Немного простой вопрос, но я немного устала от CSS, но меня попросили использовать CSS вместо тегов 'gridview style' (как я покажу ниже).

В основном я использую следующий стиль в моем GridView:

 <RowStyle BackColor="#ededed" ForeColor="#333" HorizontalAlign="Center" />
 <FooterStyle BackColor="#465F7F" Font-Bold="True" ForeColor="White" />
 <PagerStyle BackColor="#465F7F" ForeColor="White" HorizontalAlign="Center" />
 <SelectedRowStyle BackColor="#465F7F" Font-Bold="false" ForeColor="#ffffff" />
 <HeaderStyle BackColor="#465F7F" Font-Bold="false" ForeColor="White" HorizontalAlign="Center" />
 <EditRowStyle BackColor="#B7B7B7" />
 <AlternatingRowStyle BackColor="#e2e6e8" ForeColor="#333333" />

Могу ли я преобразовать это в CSS? Так что я могу просто установить свой GridView CssClass, и он будет применять все эти стили. Прямо сейчас этот код реплицируется на каждую сетку, поэтому его изменение - рутина!

Answer 1

Просто используйте CssClass свойство сетки и поместите все в этот класс CSS, и все готово!

Например, вместо этого:

<RowStyle BackColor="#ededed" ForeColor="#333" HorizontalAlign="Center" />

вы бы использовали тот жеразметка для всех ваших общих стилей сетки:

<RowStyle CssClass="gridViewRow" />

И тогда класс CSS будет выглядеть так:

.gridViewRow
{
   background-color:#ededed;
   color:#333;
   text-align:center;
}

Answer 2

Заменив соответствующие стили ниже, вы получите тот же эффект.

Также вам следует подумать об использовании стилей JQuery Theme Roller, чтобы сетка выглядела действительно красиво. http://jqueryui.com/themeroller/

.RowStyle
    {
          background-color: #ededed;
          color:#333;
          text-align:center;
    }
    .FooterStyle
    { 
        background-color:#465F7F; font-weight: bold; color:White;
    }
    .PagerStyle {background-color:#465F7F; color:White; text-align:center; }
    .SelectedRowStyle { background-color:#465F7F; font-weight: normal; color:#ffffff }
    .HeaderStyle {background-color:#465F7F; font-weight: normal; color:White; text-align:center; }
    .EditRowStyle {background-color:#B7B7B7; }
    .AlternatingRowStyle {background-color:#e2e6e8; color:#333333 }

Answer 3

Примените свой базовый стиль к GridView и используйте возможности CSS

  <asp:GridView id="gvTestGrid" runat="server" cssclass="gridview-common" >
     <HeaderStyle cssClass="gridview-header" />
     ...
    </asp:GridView>

CSS

.gridview-common {  
  /* table styles */ 
 }

.gridview-common th.gridview-header, .gridview-common th.gridview-header:hover   {  
 /* Header styles */ 
 }

.gridview-common tbody tr {
     /* Row styles */ 
}

.gridview-common tbody tr:hover {
     /* Row Hover styles */ 
}