如何使用ASP.Net MVC 3链接到两个样式表？

Question

如何使用ASP.Net MVC 3链接到两个样式表？

Dev*_*Dan 4 css asp.net-mvc-3 twitter-bootstrap

我想在我的ASP.Net MVC 3应用程序中使用Twitter的Bootstrap.我下载了bootstrap.css并将其添加到Content文件夹中的项目中.我打开_Layout.cshtml并添加了一个指向该文件的链接:

<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />

Run Code Online (Sandbox Code Playgroud)

当我运行应用程序时,不应用样式表.如何从_Layout.cshtml文件中引用Site.css和bootstrap.css？

Answer 1

Ahm*_*mad 7

我认为这里的问题是继承,级联和特异性CSS.请记住,Twitter的Bootstrap会重置所有样式.

'如果Site.css在bootstrap.css之前,则只应用bootstrap(我最初没有意识到).颠倒顺序,两者都有效.奇怪'

实际上,这是完全合理的.Site.css加载了所有它的样式声明,然后Bootstrap.css加载后立即重置(如果不是所有样式),因此Bootstrap.css将应用声明.它似乎只是因为Bootstrap.css可能没有定义的样式或Site.css使用html id或类定义的非常特定的样式.

颠倒顺序(Bootstrap.css第一个),您现在首先重置所有样式,然后应用其他样式.由于Site.css第二次加载,其中定义的样式将应用于您的站点.

为了您自己的兴趣,尝试在html文档中定义已在"Site.css"和"Bootstrap.css"中定义的内联样式,并通过添加/删除样式定义来查看样式的应用方式.

我试图寻找对CSS层叠良好的配套解释,我找到了最好的图形和简单的解释是,这其中指出

如果外部和嵌入式样式表中的选择器冲突但具有相同的特异性,则最终的打破平局基于规则的外观顺序:稍后声明的规则获胜.这不仅适用于单个工作表中规则的顺序,而且适用于工作表在(X)HTML页面的头部链接,导入或嵌入的顺序.

归档时间：	14 年，4 月前
查看次数：	1785 次
最近记录：	14 年，4 月前