如果css只在剃须刀页面中的一个页面上,我应该仍然在wwwroot中写入,还是只在页面上写入?最小尺寸的最佳方法是什么?

我正在学习Razor Pages,并思考正确的做事方式.什么是正确的方式?

推荐答案

从.NET6开始,Razor Page/view有了一个新特性,称为css隔离.

Css隔离意味着 for each 剃须刀页面/视图(.cshtml)创建一个类似.cshtml.css的css文件.Css隔离有助于避免对难以维护的全局样式的依赖,还可以避免嵌套内容之间的样式冲突.

在该隔离过程中,.csthm.css文件中定义的样式被限定范围,并且它们被应用于各自的剃须刀页面/视图.例如,在index.cshtml.css文件中添加的任何样式将仅应用于index.cshtml页,它们不会影响应用程序中的任何其他页.

NET框架运行时将把所有隔离的CSS文件(*.csthml.css)Bundle 在一个{your_application_name}.styles.css的文件中.因此,该Bundle 的css行将由框架在{Pages/Views}/Shared/_Layout.cshml处自动添加.

Bundle 包css文件({YOUR_APPLICATION}.style es.css)可以在应用范围标识符如b-{10_character_string}的帮助下维护每个文件的样式,而不会发生任何冲突.因此,作用域标识符b-{10_character_string}对于每个文件将是唯一的.

更多信息,你可以参考link1,link2.

Css相关问答推荐

如何使一组元素的行为像字符串一样?

如何将下拉面板放置在MAT-SELECT文本框的正下方

如何为FLEX方向编写响应式的CSS

如何根据屏幕宽度覆盖SCSS变量?

Nuxt 3+sass:不能将包含路径与@IMPORT和@USE一起使用

当您到达页面底部时,如何使页脚 div 将附加的 div 向上推

如何为 React Native switch 组件创建标签?

清除 CSS 中已设置的填充属性以恢复 SVG 的默认值

React Typescript 中的自动 typewriter 效果

直观地指示 IFrame 内的表单正在提交,但没有 javascript

如何使用rvest中的 node 和类提取网页数据

当计算的宽度不准确时,如何在 cypress 中测试元素的宽度?

CSS 使文本扩展并保持居中与圆形扩展 div 的问题

如何让 Firefox 在文件更改时自动刷新?

CSS媒体查询仅针对iPad和iPad?

继承了哪些 CSS 属性?

通过javascript删除或禁用浏览器的焦点边框

当子元素水平溢出时,为什么忽略父元素的右填充?

在 CSS 中表示 100% 的 1/3 的最佳方式是什么?

更改 html 列表中项目符号的 colored颜色 ?