【问题标题】:Share Styling Between CSS Classes在 CSS 类之间共享样式
【发布时间】:2010-09-20 01:04:21
【问题描述】:

this question 中,我得到了一个非常酷的答案,即分别在左右交替图像及其描述。现在我想对两者都应用样式,例如padding-top、padding-bottom 等。在这种情况下,如何将样式应用于 RowStyle 和 AlternatingRowStyle。

<AlternatingRowStyle CssClass="ProductAltItemStyle" />   
<RowStyle CssClass="ProductItemStyle" />
<Columns>
    <asp:TemplateField>
        <ItemTemplate>
            <div class="Image"><asp:Image runat="server" ID="productImage" ImageUrl='<%# Eval("imageUrl") %>' /></div>
            <div class="Description"><asp:Label runat="server" ID="lblProductDesc" Width="100%" Text='<%# Eval("productDesc") %>'></asp:Label></div>
        </ItemTemplate>
    </asp:TemplateField>

【问题讨论】:

    标签: asp.net css


    【解决方案1】:

    你是这样做的:

    .ProductAltItemStyle, .ProductItemStyle {
        // CSS Rules that apply to both go here
    }

    【讨论】:

    • 小补充,正如在另一个 CSS 问题上所评论的那样,我个人认为在每个选择器之间(以及在 "{" 之前)有一个换行符是一种更明显的可读、可搜索的格式。 CSS 块格式在这方面不同于 C/C#/Java/JavaScript。
    【解决方案2】:

    您也可以这样做:

    <AlternatingRowStyle CssClass="ProductAltItemStyle ProductCommonStyle" />   
    <RowStyle CssClass="ProductItemStyle ProductCommonStyle" />
    

    ProductCommonStyle 包含交替行和标准行通用的格式。

    更好的是,您可以为整个网格视图分配一个样式,并使用它来定义共享类:

    table.GridViewStyle tr td
    {
       padding:3px 5px;
       border:1px solid gray;
    }
    
    tr.ProductAltItemStyle td
    {
        background:white;
    }
    
    tr.ProductItemSTyle td
    {
        background:silver;
    }
    

    【讨论】:

    • 我认为这可能是对这个特定问题的实际答案,并不是说变更日志是错误的,但我非常相信 CSS 遵循 OO 模型。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-07-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-12-06
    • 1970-01-01
    • 2013-02-26
    相关资源
    最近更新 更多