.net网页制作css

创建CSS文件

在.NET网页项目中，CSS文件通常存放在wwwroot/css文件夹中。新建一个.css文件，例如site.css，用于存放样式规则。

链接CSS到HTML

在Razor页面或静态HTML文件中，通过<link>标签引入CSS文件。确保路径正确，通常使用~/表示网站根目录：

<link rel="stylesheet" href="~/css/site.css" />

基本样式规则

编写CSS选择器时，可以针对HTML元素、类或ID进行样式定义。例如：

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.header {
    background-color: #333;
    color: white;
    padding: 10px;
}

#main-content {
    width: 80%;
    margin: 0 auto;
}

使用Bootstrap集成

.NET项目默认支持Bootstrap。通过NuGet包管理器安装Bootstrap，或在_Layout.cshtml中直接引用CDN：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" />

响应式设计

使用媒体查询实现响应式布局：

@media (max-width: 768px) {
    #main-content {
        width: 95%;
    }
}

动态样式绑定

在Razor页面中，可以通过条件逻辑动态应用CSS类：

<div class="@(isActive ? "active" : "inactive")">Content</div>

隔离组件样式

对于Blazor组件，可以使用隔离CSS文件（与组件同名的.css文件），样式仅作用于该组件。

预处理器支持

如需使用Sass/Less，需配置构建工具（如WebPack或Gulp）将预处理器代码编译为CSS，并输出到wwwroot目录。