微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

解决方法

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

‘If Site.css is before bootstrap.css only bootstrap is applied (which I didn’t realize at first). Reverse the order and both work. Strange’

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

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

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

我试着为CSS级联找到一个很好的支持解释,我找到的最好的图形和简单的解释是this

If selectors within external and embedded style sheets conflict but have the same specificity,the final tie-breaker is based on the order of apperance of the rules: the rule declared later wins. This applies not only to the order of rules within a single sheet,but also to the order that the sheets are linked,imported or embedded in the head of the (X)HTML page.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。