Question

我正在学习如何使用MVC4和Razor在CSS中创建类。我想为我的主页上显示的表创建一个类，其中带有删除线的td元素的特殊标记类，以及一些用粗体标记的td元素。我不知道如何创建属于另一个类的类。我觉得通过在我的表类中创建子类，我可以保持更有条理和更干净的CSS代码。

我有几个问题。

如何创建从基表继承的新表类？
我应该将新课程放在单独的CSS文件中吗？
如果回答上一个问题是肯定的，那么我需要做些什么呢 Razor和MVC4看到新文件？
如何在该新表下创建一个td元素并将其导出从基表的基础td继承？

见下面的代码

/* tables
----------------------------------------------------------*/
table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 0.75em;
    border: 0 none;
}

th {
    font-size: 1.2em;
    text-align: left;
    border: none 0px;
    padding-right: 0.4em;
}
    th:first-child{
        margin-left:0px;
    }
    th:last-child{
        margin-right:0px;
    }
    th a {
        display: block;
        position: relative;
    }

    th a:link, th a:visited, th a:active, th a:hover {
        color: #333;
        font-weight: 600;
        text-decoration: none;
        padding: 0;
    }

    th a:hover {
        color: #000;
    }

    th.asc a, th.desc a {
        margin-right: .75em;
    }

    th.asc a:after, th.desc a:after {
        display: block;
        position: absolute;
        right: 0em;
        top: 0;
        font-size: 0.75em;
    }

    th.asc a:after {
        content: '▲';
    }

    th.desc a:after {
        content: '▼';
    }

td {
    padding: 0.25em 2em 0.25em 0em;
    border: 0 none;
}

tr.pager td {
    padding: 0 0.25em 0 0;
}

Strikethrough and bold

Answer 1

解决您的问题：

How do I create a new table class that inherits from the base table?

如果您没有重置所有样式规则的css文件，则每个元素都会从浏览器默认文件继承。如果为表元素表{....}定义样式规则并创建另一个样式规则.foo {}，则table.foo的css-rules由默认样式，元素的定义样式和特定样式组成。样式。您可以使用chrome开发人员工具和检查元素对此进行测试。

Should I put new classes in a separate CSS file?

不，除非你有充分的理由。只是为了澄清 - 经验法则将所有样式规则放在一个文件中。但不是每个规则都在新的单独文件中。

How do I create a td element under that new table and cause it to inherit from the base td of the base table?

见上文td {background-color: red} td.bgBlue {background-color: blue}和html <td class="bgBLue">但还有其他方法。我建议你阅读一篇关于css基本规则和样式规则继承的教程。

更新

I want to create a class for a table that ... with special markup for td elements with strikethrough, and some td elements bolded.对于删除线（css 2.1或css 3），您可以使用似乎text-decoration的not supported very well。虽然可能是浏览器兼容性表已经过时，因为它在我测试的浏览器中都有效（IE11和chrome31）。

.isBold { font-weight: bold;}           
.isStrikethrough {text-decoration:line-through; }

和html

<table>
    <tr><td class="isBold">bold</td></tr>
    <tr><td class="isStrikethrough">one</td></tr>
</table>

使用例如<del>your text</del>并覆盖透明图片可能会导致旧浏览器出现黑客攻击。

如何在CSS中为MVC 4 Razor创建类层次结构？

1 个答案:

更新