[英]How do I create a class hierarcy in CSS for MVC4 Razor?
I am learning how to create classes in CSS with MVC4 and Razor. 我正在学习如何使用MVC4和Razor在CSS中创建类。 I want to create a class for a table that is displayed on my home page with special markup classes for td elements with strikethrough, and some td elements bolded. 我想为显示在首页上的表格创建一个类,并为带有删除线的td元素和一些td元素加粗显示特殊的标记类。 I do not know how to create a class that belongs to another class. 我不知道如何创建一个属于另一个类的类。 I feel that by making sub classes in my table class, I can keep more organized and clean CSS code. 我觉得通过在表类中创建子类,我可以保持更井井有条的CSS代码。
I have a few questions. 我有几个问题。
How do I create a new table class that inherits from the base table? 如何创建从基表继承的新表类?
Should I put new classes in a separate CSS file? 我应该将新类放在单独的CSS文件中吗?
If answer to previous question is yes, then what do I need to do for Razor and MVC4 to see the new file? 如果对上一个问题的回答是“是”,那么我需要做些什么才能使Razor和MVC4看到新文件?
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元素,并使其从基本表的基本td继承?
see code below 见下面的代码
/* 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;
}
To address your questions: 要解决您的问题:
How do I create a new table class that inherits from the base table?
If you do not have a css file that resets all style rules every element inherits from the browser default file. 如果没有重置所有样式规则的css文件,则每个元素都将从浏览器默认文件继承。 If you define style-rules for the table element table {....} and create another style rule .foo {} the css-rules for table.foo are composed by the default style, the defined style for the element and the specific style. 如果您为表格元素表{....}定义样式规则并创建另一个样式规则.foo {},则table.foo的css规则由默认样式,元素的定义样式以及特定样式组成样式。 You can test this out with the chrome developer tools and inspect element. 您可以使用chrome开发人员工具和inspect元素对此进行测试。
Should I put new classes in a separate CSS file?
No, unless you have a very good reason. 不可以,除非您有充分的理由。 Just to clarify - rule of thumb put all style rules in one file. 只是为了澄清-经验法则将所有样式规则放在一个文件中。 But not each rule in a new seperate 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?
See above td {background-color: red}
td.bgBlue {background-color: blue}
and the html <td class="bgBLue">
But there are other ways. 参见上面的td {background-color: red}
td.bgBlue {background-color: blue}
和html <td class="bgBLue">
但是还有其他方法。 I would recommend you read a tutorial about the basic rules of css and inheritance of style rules. 我建议您阅读有关CSS基本规则和样式规则继承的教程。
I want to create a class for a table that ... with special markup for td elements with strikethrough, and some td elements bolded.
For strikethrough ( css 2.1 or css 3 ) you can use text-decoration which seems to be not supported very well . 对于删除线( css 2.1或css 3 ),您可以使用文本装饰 ,这似乎不太受支持 。 Although it may be that the browser compability table is outdated because it worked in both browser i tested (IE11 and chrome31). 尽管可能浏览器兼容性表已过时,因为它在我测试过的两种浏览器(IE11和chrome31)中均有效。
.isBold { font-weight: bold;}
.isStrikethrough {text-decoration:line-through; }
and the html 和HTML
<table>
<tr><td class="isBold">bold</td></tr>
<tr><td class="isStrikethrough">one</td></tr>
</table>
There may be hacks for older browsers by using for example <del>your text</del>
and overlaying a transparent image. 通过使用例如<del>your text</del>
并覆盖透明图像,旧版浏览器可能会受到黑客的攻击。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.