Blazor框架支持引入全局CSS，也支持组件级别的CSS定义，这篇笔记我们学习Blazor中如何使用CSS样式。
Blazor中，全局CSS使用比较简单，我们直接在工程的wwwroot文件夹内定义CSS文件，并在App.razor入口文件中引入即可。
假如我们的组件文件名是Hello.razor，那么我们可以在同级别目录下创建Hello.razor.css，它将作为一个组件级别的CSS加载，下面是一个例子。
@rendermode InteractiveServer
<div class="red-text">@text</div>
@code {
private string? text = "Hello, World!";
}
.red-text {
color: red;
font-size: 20px;
font-weight: bold;
text-align: center;
}
Blazor组件中在<div>上我们引用了red-text这个CSS类，CSS文件中我们定义了其具体的样式。
注意：对于组件级别的CSS，Blazor工程在构建时会将其统一编译到[项目名].styles.css文件中，我们查看App.razor代码可以看到对该CSS文件的引用。如果你修改了组件级别的CSS后发现样式没有生效，可以看看样式是否被正确的输出到了[项目名].styles.css，以及该样式文件是不是被缓存了。
Blazor组件中我们可以使用内联样式，下面是一个例子。
@rendermode InteractiveServer
<div style="color: red;">@text</div>
@code {
private string? text = "Hello, World!";
}
Blazor中要动态切换组件的样式非常简单，我们可以通过数据绑定实现。下面例子代码中，我们将HTML标签的class属性绑定到了textClass组件状态变量上，点击按钮后，这个变量的值会被修改。
@rendermode InteractiveServer
<div class="@textClass">@text</div>
<button @onclick="HandleButtonClick">Click me</button>
@code {
private string? text = "Hello, World!";
private string textClass = "red-text";
public void HandleButtonClick()
{
textClass = "blue-text";
}
}