Question

查看一些Razor视图，我看到很多次将<style>标签直接添加到视图（CSHTML）文件中。

这似乎很好，但是实际上它在<style>标记内添加了<body>标记，而通常应该在<head>标记内。

您如何将一些内联CSS插入单个剃刀页面，使其出现在<head>标签内？有没有首选的方法？

Answer 1

不建议在<style>中包含<body>标签的原因是由于引起了FOUC。

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

当前使用的浏览器都无法解析放置在<style>中的<body>标签。从技术上讲，当浏览器在DOM中遇到<style>标签时，

暂停渲染
重构CSSOM以包括新的声明
重建已经渲染的DOM（如果有，这就是FOUC发生的地方）
进行渲染

Answer 2

赞：

dict

Shared/_Layout.cshtml

<!DOCTYPE html> <html> <head> ... @RenderSection("HeadStyles", required: false) </head> <body> ... </body> </html>或您需要在其中进行任何其他操作的视图

Home/Index.cshtml

Answer 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>

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

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

在视图中放置样式标签

3 个答案: