MVC3.0如何引用CSS样式

Posted 2023-04-30

一般的html引用Css样式是这样的
<style type="text/css">
.testwidth:200px;
</style>

<a class="test" ></a>

但是在MVC中该怎么引用呢？

参考技术A 在页面中加入：<link href="@Url.Content("~/***/***.css")" rel="stylesheet" type="text/css" />
其中***代表你文件的路径。你可以参考你项目下的_Layout.cshtml文件，有什么问题可以再问我
某个控件引用，就直接类似这样用：<div class="p"> 其中p就是***文件中已经写好的样式
另外，<button style=" background-color:Gray">dssa</button>这个是一样的，追问

你说的这些我的都懂，但是在MVC种的@html.textbox();这样的怎么引用

追答

你找下Site.css文件中的
.text-box ，修改你要的样式，如背景更改为：Yellow
我试了，可以

追问

哎，看来你还不清楚我在问什么？
我已经说了，我是要引用css样式，比如这个控件该怎么引用
@Html.TextBox();

本回答被提问者采纳 参考技术B <style type="text/css" src="style/style.css"></style>
你可以试试，我也没弄过

我的答案对你有帮助，忘采纳，谢谢追问

我指的是某个控件引用css样式，不是说引用css文件

参考技术C 比如说@Html.TextBox(model => model.test); 那么生成的html代码这一句中会有一个id = test 在css中抓取id就可以改变了。 参考技术D 有个东西叫重构
TextBox()
的3,4重构的第三个参数就是htmlattribute
TextBox("id",1,new class="text",readonly="readonly")

如何将媒体属性添加到 ASP.NET MVC4 样式包

【中文标题】如何将媒体属性添加到 ASP.NET MVC4 样式包

【英文标题】：How to add media attribute to ASP.NET MVC4 style bundle

【发布时间】：2013-11-30 04:00:18

【问题描述】：

在 ASP.NET MVC4 应用程序中，样式包是使用

创建的

    bundles.Add(new StyleBundle("~/css/pos.css")
        .Include("~/css/mypos.css"));

并在视图中呈现为

@Styles.Render("~/css/pos.css")

在调试模式下生成的输出是

  <link href="/myapp/css/mypos.css" rel="stylesheet"/>

如何将媒体属性添加到输出，以便屏幕使用样式

  <link href="/myapp/css/mypos.css" media="screen" rel="stylesheet"/>

或用于打印

<link href="/myapp/css/mypos.css" media="print" rel="stylesheet"/>

或者有更好的方法，可以在 css 文件或其他解决方案中指定媒体吗？ 使用jquery和jquery-ui。

【问题讨论】：

一般不会发布外部链接，但是可以在这里找到相当完整的解决您的问题的方法danielcorreia.net/blog/quick-start-to-mvc4-bundling

这能解决问题吗？ ***.com/questions/12042248/…

是的，它看起来像解决方案。它需要添加额外的代码。这是不允许在调试模式下缩小的最佳解决方案吗？其他选项是将 @media 指令添加到 css 文件，但我的 css 文件已经包含 @media

【参考方案1】：

在您的 Razor 页面中，您将添加以下内容：

<link href="@Styles.Url("~/css/pos.css")" rel="stylesheet" type="text/css" media="print" />

【讨论】：

这在调试模式下也会缩小。如何仅在生产模式下缩小？来自***.com/questions/12042248/… 的代码和来自 Mike Beeler 答案的链接是否包含相同的仅代码解决方案？它使用#if DEBUG 来检测调试模式。

之前没注意过，还以为是发布模式呢。

我试过了，它也在调试模式下缩小了。我的评论中的 SO 答案中的 MS 程序经理评论证实了这一点。我评论中的链接中的长代码是否只是防止调试最小化的解决方案？打印 css 文件很长并且包含 @screen 指令（可能这是错误），因此使用 @media print 嵌入所有这些文件似乎是不可能的。

看起来很可惜，必须承认我过去使用的打印样式很短。我很想看看你是如何解决它的。我将其添加为收藏夹。

我将 Mikes 的答案标记为答案，因为它可能解决了问题。目前我也可以在调试中使用缩小样式，所以我正在使用你的答案。如果需要在浏览器调试器中检查样式，我会尝试 Mikes 解决方案。