Question

我想在我的ASP.Net MVC 3应用程序中使用Bootstrap from Twitter。我下载了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" />

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

Answer 1

我认为这里的问题是继承，级联和特异性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级联找到一个很好的支持解释，我找到的最好的图形和简单的解释是this注意到

如果外部和嵌入式样式表中的选择器发生冲突，但是具有相同的特异性，最终的打破平局是基于订单规则的外观：后来宣布的规则获胜。这适用不仅是单个工作表中的规则顺序，而且也是命令将纸张链接，导入或嵌入在头部（X）HTML页面。

Answer 2

您可以将CSS从引导程序文件复制并粘贴到单个.css文件中，以减少HTTP请求。

出于组织目的，只需将所有引导代码放在最开始，然后将个人CSS放在其后面。

然而，你所做的应该是有效的。你可以在JSFiddle上发布你的标记看起来像什么的例子吗？

有关详细信息，请参阅：

http://www.w3.org/TR/html4/present/styles.html#h-14.3

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

2 个答案: