在视图中放置样式标签答案

【问题标题】：Placement of style tag in view在视图中放置样式标签
【发布时间】：2019-10-21 08:52:34
【问题描述】：

查看一些 Razor 视图，我看到很多时候 <style> 标记直接添加到视图 (CSHTML) 文件中。

这似乎工作正常，但实际上它在<body> 标签内添加了<style> 标签，而它通常应该在<head> 标签内。

您如何将一些内联 CSS 嵌入到单个剃须刀页面，使其出现在 <head> 标记中？有首选方式吗？

【问题讨论】：

您要添加 CSS 还是脚本？两者都被提及。
@ScottHannen：对不起。我解决了这个问题。我想添加 CSS 样式。
看看this。这个问题意味着您正在使用布局视图。这让您的布局视图在其头元素中定义一个部分，然后您的视图声明 @section 元素并将内容添加到布局中。
已经有一段时间没有做剃须刀视图了，但我相信他们有@RenderSection，你可以把它放在你的head标签旁边，在视图上你会做@section name
@penleychan：你现在用什么代替剃须刀？

标签： c# css asp.net-mvc model-view-controller

【解决方案1】：

像这样：

Shared/_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    ...
    @RenderSection("HeadStyles", required: false)
</head>
<body>
    ...
</body>
</html>

Home/Index.cshtml 或您需要在其中执行此操作的任何其他视图

@section HeadStyles {
    <style>
        .custom-style { color: red; }
    </style>
}

【讨论】：

【解决方案2】：

不建议在<body> 中包含<style> 标签的原因是因为导致FOUC。

但是，如果您的 <style> 标记应用于 DOM 中之后的内容，则风险为 null。

当前使用的浏览器在解析<style> 放置在<body> 中的标签时没有任何问题。
从技术上讲，当浏览器在 DOM 中遇到 <style> 标签时：

暂停渲染
重构 CSSOM 以包含新声明
重建已经渲染的 DOM（这是 FOUC 发生的地方，如果）
继续渲染

【讨论】：

【解决方案3】：

最好的变种是 -

<html>
    <head>
        <link rel="stylesheet" href="styles.css">       
    </head>
    <body>
        <!-- here is page content -->             
        <script src="scripts.js" type="text/javascript"></script>
    </body>
</html>

在这种情况下，浏览器将按此顺序加载

样式
内容（已设置样式）
脚本（如果 scipt 不是那么少，它不会减慢页面渲染速度）

【讨论】：