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

【问题标题】：How do I link to two stylesheets with ASP.Net MVC 3?如何使用 ASP.Net MVC 3 链接到两个样式表？
【发布时间】：2011-12-25 11:32:28
【问题描述】：

我想在我的 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？

【问题讨论】：

你所拥有的应该可以工作。如果您在 Firebug 中打开该站点并检查“网络”选项卡，是否所有文件都在加载？
是的，Firebug Net 选项卡显示两个加载。我颠倒了两条链接线的顺序，然后一切正常。如果 Site.css 在 bootstrap.css 之前，则只应用引导程序（我一开始没有意识到）。颠倒顺序，两者都起作用。奇怪。

标签： css asp.net-mvc-3 twitter-bootstrap

【解决方案1】：

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

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

但是，您所做的应该有效。您能否在 JSFiddle 上发布一个示例，说明您的标记是什么样的？

【讨论】：

谢谢。我没有尝试过 JSFiddle，但 Firebug Net 选项卡显示了两个加载。我颠倒了两条链接线的顺序，然后一切正常。如果 Site.css 在 bootstrap.css 之前，则只应用引导程序（我一开始没有意识到）。颠倒顺序，两者都起作用。奇怪。
>> 您可以将引导文件中的 CSS 复制并粘贴到您的单个 .css 文件中，以减少 HTTP 请求。 codethinked.com/…

【解决方案2】：

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

'如果 Site.css 在 bootstrap.css 之前，则只应用 bootstrap（我一开始没有意识到）。颠倒顺序，两者都起作用。奇怪'

实际上，这完全有道理。 Site.css 加载了它的所有样式声明，然后立即加载 Bootstrap.css 重置大多数（如果不是所有样式），因此将应用 Bootstrap.css 中的声明。似乎两者都起作用可能是因为Bootstrap.css 可能没有定义的样式，或者Site.css 具有使用html ids 或类定义的非常具体的样式。

颠倒顺序（首先使用Bootstrap.css），您现在首先重置所有样式，然后再应用其他样式。由于Site.css 是第二个加载的，因此其中定义的样式将应用于您的站点。

为了您自己的兴趣，请尝试在您的 html 文档中定义一个已在“Site.css”和“Bootstrap.css”中定义的内联样式，并查看如何通过添加/删除样式定义来应用样式.

我尝试为 CSS 级联找到一个很好的支持解释，我找到的最好的图形和简单的解释是 this 其中注释

如果外部样式表和嵌入样式表中的选择器发生冲突，但具有相同的特异性，最终决胜局以顺序为准规则的出现：后来宣布的规则获胜。这适用不仅对单个工作表中的规则顺序，而且对将工作表链接、导入或嵌入到 (X)HTML 页面。

【讨论】：