4

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

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

4

2 回答 2

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 级联找到一个很好的支持解释，我发现的最好的图形和简单的解释是this注释

如果外部样式表和嵌入式样式表中的选择器发生冲突但具有相同的特异性，则最终的决胜局基于规则的出现顺序：稍后声明的规则获胜。这不仅适用于单个工作表中的规则顺序，还适用于工作表链接、导入或嵌入 (X)HTML 页面头部的顺序。

于 2011-11-10T05:58:40.480 回答
-1

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

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

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

有关更多信息，请参阅：

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

于 2011-11-09T16:42:04.640 回答