开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

将CSS添加到Blazor WebAssembly视图

Blazor WebAssembly是一个用于构建基于Web的应用程序的开源框架，它允许使用C#和.NET来开发前端应用程序。在Blazor WebAssembly中，可以通过将CSS添加到视图来实现样式化和布局。

要将CSS添加到Blazor WebAssembly视图，可以按照以下步骤进行操作：

创建CSS文件：首先，创建一个CSS文件，其中包含所需的样式规则和布局。可以使用任何文本编辑器来创建CSS文件，并将其保存为.css文件扩展名。
添加CSS文件到项目：将CSS文件添加到Blazor WebAssembly项目中的适当位置。通常，可以将CSS文件放置在项目的wwwroot文件夹中，以便在运行时可以通过URL进行访问。
引用CSS文件：在需要应用CSS样式的Blazor WebAssembly视图中，可以通过使用<link>标签来引用CSS文件。可以将<link>标签放置在视图的<head>部分，以确保在加载视图时加载CSS文件。例如：

<head>
    <link rel="stylesheet" href="/css/styles.css" />
</head>

在上面的示例中，/css/styles.css是CSS文件的URL路径。根据实际的项目结构和CSS文件的位置，可能需要调整URL路径。

应用CSS样式：一旦CSS文件被引用，其中定义的样式规则将自动应用于视图中的相应元素。可以使用CSS选择器来选择要应用样式的元素，并在CSS文件中定义相应的样式规则。

总结： Blazor WebAssembly允许将CSS添加到视图以实现样式化和布局。通过创建CSS文件，将其添加到项目中，并在视图中引用该文件，可以应用所需的样式规则。这样，开发人员可以使用熟悉的CSS语法和技术来定制和美化Blazor WebAssembly应用程序的外观和感觉。

腾讯云相关产品和产品介绍链接地址：

腾讯云CSS：https://cloud.tencent.com/product/css

相关搜索:Blazor -将元素添加到SVG对象 Blazor -将活动类添加到当前元素 Blazor WebAssembly以不同的方式对待css。JavaScript将"\“添加到CSS类 Laravel将警报添加到视图如何将Blazor WebAssembly连接到DataBase 如何将JQuery UI导入Blazor WebAssembly？如何将Office Fluent UI React集成到Blazor WebAssembly中？如何将谷歌分析脚本添加到Uno WebAssembly 如何通过代码将Blazor组件添加到body？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

全面的ASP.NET Core Blazor简介和快速入门

因为咱们的MongoDB入门到实战教程Web端准备使用Blazor来作为前端展示UI，本篇文章主要是介绍Blazor是一个怎样的Web UI框架，其优势和特点在哪？并带你快速入门上手ASP.NET Core Blazor(当然这个前提是你要有一定的C#编程基础的情况，假如你完全没有接触过C#的话建议你先从基本语法学起)。

02

Blazor 中的路由和路由模板

过去的 ASP.NET Web 窗体和现代 Web 明显区别在于 Web 服务器入口是否存在路由组件。在 Web 窗体中，绝大多数 Web 终结点都是物理文件资源，直接通过其页面路径调用。

02

Blazor资源大全，很棒的Blazor(2)

.NET Foundation提供的Blazor应用程序构建工作坊，Blazzing Pizza。

02

对打 Angular，Blazor 赢在哪里？

Blazor 是一个 Microsoff ASP.NET Core 框架，用它无需任何附加组件或插件即可在浏览器中运行.NET 应用程序。相比之下，Angular 是一种基于组件的流行 JavaScript 框架，用于构建可扩展的 Web 应用程序。

03

Blazor资源大全，很棒的Blazor(3)

更新 .razor 文件并立即查看更新，无需重新加载页面。由于无需重新加载任何内容，因此保留了应用程序状态。livesharp.net。

04

Blazor带我重玩前端(一)

曾经我和前端朋友聊天的时候，我说我希望有一天可以用C#写前端，不过当时更多的是美好的想象，这一切正变得真实……

01

[翻译] ASP.NET Core 3.0 的新增功能

全文翻译自微软官方文档英文版 What's new in ASP.NET Core 3.0

03

.NET 8 Release Candidate 1 (RC1)现已发布，包括许多针对ASP.NET Core的重要改进！

这是我们计划在今年晚些时候发布的最终.NET 8版本之前的两个候选版本中的第一个。大部分计划中的功能和变更都包含在这个候选版本中，可以供您尝试使用。您可以在文档中找到完整的ASP.NET Core在.NET 8中的新功能列表[1]。一些领域（尤其是Blazor）仍然有一些重大的变更待完成，我们预计将在下一个.NET 8候选版本中完成这些变更。

04

Blazor - .NET Core平台的SPA开发框架快速上手

可以看出，Blazor是微软试图推出一个拜托现有的ASP.NET WebForm,MVC这类混合开发模型下的，应对当前单页WEB应用和前后端分离趋势的一次尝试。

02

MAUI使用Masa blazor组件库

上一篇(点击阅读)我们实现了UI在Web端(Blazor Server/Wasm)和客户端(Windows/macOS/Android/iOS)共享，这篇我加上 Masa Blazor[2]组件库的引用，并把前几个月写的时间戳转换[3]工具加上。

02

.NET Core 3.0 Preview 6中对ASP.NET Core和Blazor的更新

我们都知道在6月12日的时候微软发布了.NET Core 3.0的第6个预览版。针对.NET Core 3.0的发布我们国内的微软MVP-汪宇杰还发布的官翻版的博文进行了详细的介绍。具体的可以关注“汪宇杰博客”公众号，或者我的“DotNetCore实战”公众号然后在历史文章里面进行查阅。而我们这篇文章将会介绍本次更新中对ASP.NET Core和Blazor所做的更新。当然本文的大部分内容翻译自ASP.NET的首席项目经理Daniel Roth的介绍。

02

.NET Core 3.0 Preview 6中对ASP.NET Core和Blazor的更新

我们都知道在6月12日的时候微软发布了.NET Core 3.0的第6个预览版。针对.NET Core 3.0的发布我们国内的微软MVP-汪宇杰还发布的官翻版的博文进行了详细的介绍。具体的可以点这里进行阅读译 | .NET Core 3.0 Preview 6 已发布。而我们这篇文章将会介绍本次更新中对ASP.NET Core和Blazor所做的更新。当然本文的大部分内容翻译自ASP.NET的首席项目经理Daniel Roth的介绍。

02

如何使用 Blazor 框架在前端浏览器中导入和导出 Excel

Blazor 是一个相对较新的框架，用于构建具有 .NET 强大功能的交互式客户端 Web UI。一个常见的用例是将现有的 Excel 文件导入 Blazor 应用程序，将电子表格数据呈现给用户，并且能够允许进行任何更改，最后将该数据导出回 Excel 文件或将其保存到数据库。

02

Blazor VS Vue

在其最简单的模式中，您可以简单地将核心 Vue 脚本包含在您的应用程序中，然后开始构建您的组件。

03

.NET Core 3.0 中的新变化

.NET Core 3.0 是 .NET Core 平台的下一主要版本。本文回顾了 .Net Core 发展历史，并展示了它是如何从基本支持 Web 和数据工作负载的版本 1，发展成为能够运行 Web、桌面、机器学习、容器、IoT 等的版本 3.0。

01

Blazor学习之旅(1)初步了解Blazor

2022年9月以来在学习Blazor做全栈开发，因此根据老习惯，我会将我的学习过程记录下来，一来体系化整理，二来作为笔记供将来翻看。作为第一篇，我们先来了解一下这个Blazor到底是个什么鬼。

02

MAUI 与 Blazor 共享一套 UI 实现（五端通用）

距离上次发《MAUI初体验：爽》一文已经过去2个月了，本计划是下半年或者明年再研究MAUI的，现在计划提前啦，因为我觉得MAUI Blazor挺有意思的：在Android、iOS、macOS、Windows之间共享UI，一处UI增加或者修改，就能得到一致的UI体验。

01

通过 Serverless 加速 Blazor WebAssembly | 社区精选文章

本文为 Serverless 社区成员撰稿。作者杨舜杰，系统架构研发工程师，开源爱好者，.NET开源项目shriek-fx作者。供稿请戳~ 作为一种新型的开发架构，Serverless具备低人工、基础设施成本、低故障风险、高扩展性以及交付周期短等优势，但是在真正落地方面还面临成本费用过高、开发支持欠缺以及开源标准不统一等难题。腾讯云基于自身在计费模式、开发体验以及上下游生态等方面的超前探索，正在引领Serverless的行业“新标准”。 Blazor 与 Serverless 初遇我正在开发 Ant

05

一个新实验：使用gRPC-Web从浏览器调用.NET gRPC服务

无法在浏览器中实现gRPC HTTP / 2规范，因为没有浏览器API能够对HTTP请求进行足够的细粒度控制。gRPC-Web通过与HTTP / 1.1和HTTP / 2进行兼容来解决此问题。

03

Blazor资源大全，很棒的Blazor（1）

Blazor允许您使用C#而不是JavaScript构建交互式Web用户界面。Blazor应用程序由使用C#、HTML和CSS实现的可重用的Web用户界面组件组成。客户端和服务器代码都是用C#编写的，允许您共享代码和库。更多信息请参阅官方Blazor网站[22]。

05

.NET Core/.NET5/.NET6 开源项目汇总8：Blazor项目

Ant Design Blazor是一套基于 Ant Design 和 Blazor 的企业级组件库。

03

别了，JavaScript；你好，Blazor

Web开发与JavaScript开发向来是同义词。直到WebAssembly的横空出世，WebAssembly (Wasm)是一种在浏览器中可以执行的二进制指令。 WebAssembly 的官方工具链能够编译 C/C++ 代码，但许多社区也提供了不同语言的编译器，如 Rust，Python，Java 和 Blazor(C#)。特别是 Rust 社区非常活跃，可以开始看到完整的前端框架，如 Yew 和 Dodrio，这为基于浏览器的应用带来了更多新的可能性，只要测试一些使用 WebAssembly 构建的优秀应用，就可知道基于浏览器的近乎原生的应用现在已经成为现实，例如 Sketchup 或 Magnum。

03

官宣！微软跨平台 UI 框架 .NET MAUI 6 正式发布！

欢迎使用 .NET 多平台应用程序 UI。此版本标志着我们在统一 .NET 平台的多年旅程中的新里程碑。现在，您和超过 500 万其他 .NET 开发人员拥有面向 Android、iOS、macOS 、Windows和Linux（由Github开源社区支持）的一流跨平台 UI 技术栈，以补充 .NET 工具链 (SDK) 和基础类库 (BCL)。您可以使用 .NET 构建任何东西。

02

C#程序员的福音来啦，Blazor框架概览

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

02

使用Jexus 容器化您的 Blazor 应用程序

在本文中，我们将介绍如何将 Blazor 应用程序放入Jexus 容器以进行开发和部署。我们将使用 .NET Core CLI，因此无论平台如何，使用的命令都将是相同的。

01

【重榜？】.NET 6 Preview 1 开箱上手！带你尝试新版本更新！

最近 .NET 6 Preview 1 发布了，.NET 统一是此版本的核心。大家可以读一下原文博客：

02

Blazor WebAssembly 修仙之途 - 初尝

Blazor 是一个可是使用 .NET/C# 来编写交互式客户端的 Web UI 框架，在官网有一句话概括 “Build client web apps with C#”。在 Blazor 里面有三个比较重要的概念：

01

快速了解 ASP.NET Core Blazor

最近在几个微信 .NET 交流群里大家讨论比较频繁的话题就是这几天自己的面试经历。

01

什么将会替代 JavaScript 呢？

JavaScript 正在蓬勃发展。但由于 WebAssembly 的出现，它的衰落可能只是一个时间问题。

02

MAUI Blazor项目实战从0到1轻松构建多平台应用UI

最近在项目中尝鲜了MAUI，总体感受下来还是挺不错的，优缺点并存，但是瑕不掩瑜，目前随着.Net版本的迭代升级对它的支持也越来越友好，相信未来可期！感兴趣的朋友欢迎关注。文章中如有不妥的地方，也请多多指教。

03

【译】.NET 7 预览版 1 中的 ASP.NET Core 更新

.NET 7 预览版 1 现已推出！这是 .NET 下一个主要版本的第一个预览版，其中将包括使用 ASP.NET Core 进行 Web 开发的下一波创新。

01

vs2019:devExpress设置blazor工程

https://docs.devexpress.com/Blazor/401986/getting-started/install-components-and-create-an-application/without-devexpress-installer/microsoft-templates#2-obtain-your-devexpress-nuget-feed

03

.NET 8 Preview 5发布，了解一下Webcil 是啥

2023年6月13日 .NET 8 Preview 5，.NET 团队在官方博客发布了系列文章：

03

.NET MAUI 正式发布，再见了 Xamarin.Forms

David Ortinau 在dotnet 团队博客上发表了一篇文章《Introducing .NET MAUI – One Codebase, Many Platforms》，在这篇文章里宣布了MAUI的正式发布。

02

Day 03：Blazor Server和Blazor WebAssembly的差异

下载Visual Studio后首先建立一个Blazor解决方案，里面建立Blazor Server项目，方案位置可以自己选择(注：新版Visual Studio将Blazor Server跟Blazor WebAssembly的新建项目模板拆分了，较为直观)，先不管里面的程序，按下F5执行后在网页按下F12或是Ctrl+Shift+I开启开发人员工具(Dev tool)，切换到Network页签后重新加载网页，可以看到几个文件，其中blazor.server.js就是在服务器跟浏览器之间通过SingalR建立WebSocket通道的文件。

03

用 Blazor WebAssembly 实现微前端

我聊下最近我在做的事情，然后分享下在Blazor WebAssembly 微前端的实现细节，这篇文章是我的一些心得，以及一个示例的 Demo 项目，展示了如何使用Blazor 实现多模块分布式的应用程序的微前端，如下图所示。

00

MAUI Blazor 项目实战 - 从0到1轻松构建多平台应用UI

最近在项目中尝鲜了MAUI，总体感受下来还是挺不错的，优缺点并存，但是瑕不掩瑜，目前随着.Net版本的迭代升级对它的支持也越来越友好，相信未来可期！感兴趣的朋友欢迎关注。文章中如有不妥的地方，也请多多指教。

05

[Blazor] 利用AdvancedTimer定时刷新页面

Blazor 组件，可用作简单的计划程序或执行定期重复的任务通过调用自定义异步代码。所有组件都适用于 WebAssembly 和服务器托管模型。有关代码示例，请参阅用法。

01

.NET5 Blazor初探

经常看我公众号的朋友应该能看出来，我的文章基本都是.Net、Android、OpenCV的相关的，用到的语言C#、Kotlin、C++、还有现在偶尔还维护下的Delphi老代码。本来也想空余时间学一下前端的，公众号里也有几篇VUE文章，后台没再继续学习的主要原因就是学习的成本太高，除了JS的语言，像编译部署、环境搭建、跨域访问等一系列的东西，需要花费的时间太多。前阵子.Net5发布后跟着做了个小的东西，也是无意间看到了Blazor后，抱着测试看看是否占用学习时间太多的想法做了个Demo，于是有这今天这篇。

01

在 .NET 7上使用 WASM 和 WASI

WebAssembly（WASM）和WebAssembly System Interface（WASI）为开发人员开辟了新的世界。.NET 开发人员在 Blazor WebAssembly 发布时熟悉了 WASM。Blazor WebAssembly 在浏览器中基于 WebAssembly 的 .NET 运行时上运行客户端。WASI通过提供一个系统接口来在Web之外运行WebAssembly，从而将WASM带出浏览器世界。它是 WASM 模块如何与主机环境交互的标准。

01

.NET平台系列10 .NET统一平台愿景

2019年，微软分享了【统一的.NET堆栈和生态系统的愿景】。给开发者带来的价值是，将能够使用一组API，语言和工具来针对广泛的应用程序类型，包括移动，云，桌面和IoT。可能会意识到，如今已经可以使用.NET定位广泛的平台，但是，这些工具和API在Web和Mobile上并不总是相同的，例如它们不是同时发布的。

01

.NET8 Blazor的Auto渲染模式的初体验

通过VS创建Blazor应用时，选择Blazor Web App这个新模板。过程中可以看到有四种模板可供选择。我们可以选择Auto来体验。

04

Blazor带我重玩前端(三)

需要升级VS2019以及.NET Core到最新版（具体的最低支持，我已经忘了，总是越新支持的就越好），以更好的支持自己开发Blazor项目。

03

「译」用 Blazor WebAssembly 实现微前端

我聊下最近我在做的事情，然后分享下在Blazor WebAssembly 微前端的实现细节，这篇文章是我的一些心得，以及一个示例的 Demo 项目，展示了如何使用Blazor 实现多模块分布式的应用程序的微前端，如下图所示。

02

Day 02 网页和Blazor介绍

笔者对网站的认知为前端、后端及数据库，使用者在浏览器页面按下按钮或是表单请求，触发前端事件，将收集起来的条件打包送往后端，后端接收条件后去数据库据此处理判断，捞出使用者想要的数据后，后端将页面、数据回传给前端，前端再将相应数据呈现在页面上，这就是最原始的前后端交流。

02

Blazor学习之旅(8)MudBlazor组件库介绍

为了实现一个Web应用系统，需要有个看起来不丑的UI，而对于.NET程序员来说要做全栈开发还是有点难，而本篇介绍的这个UI组件库正好可以帮助我们解决这个问题！

02

最终选型 Blazor.Server：又快又稳！

书接上文，昨天我们快速的走了一遍wasm的开发流程（我的『MVP.Blazor』快速创建与部署），总体来说还是很不错的，无论是从技术上，还是从开发上，重点是用C#来开启前端时代，可以开发SPA单页面应用，这个本身就是很奇妙的一件事，因为我有一定的VUE.JS基础，所以入手Blazor.Wasm的话，还是特别快的，可以说是很对脾气的，无论是双向绑定、组件开发、页面模板、生命周期、父子通讯等等等等上，都很契合。

03

NET 8 预览版 2 亮点是Blazor

.NET 团队在2023年3月14日发布了.NET 8预览版2，博客文章地址：https://devblogs.microsoft.com/dotnet/announcing-dotnet-8-preview-2/，亮点是了对Blazor的一些改进。

05

Blazor VS React / Angular / Vue.js

Blazor是一项新的Microsoft技术，允许开发人员使用C＃为浏览器编写代码, 本文将Blazor与其他三个常见SPA框架进行了比较：React，Angular和Vue.js, JavaScript是当前基于浏览器的单页应用程序（SPA）最受欢迎的语言，因为直到最近，它还是在浏览器中运行的唯一语言。这些框架可以从JavaScript或TypeScript进行编译或转换。本文询问开发人员是否需要依赖JavaScript，以及我们是否可以开始使用C＃构建SPA应用程序。

01

Blazor VS React / Angular / Vue.js

Blazor是一项新的Microsoft技术，允许开发人员使用C＃为浏览器编写代码, 本文将Blazor与其他三个常见SPA框架进行了比较：React，Angular和Vue.js, JavaScript是当前基于浏览器的单页应用程序（SPA）最受欢迎的语言，因为直到最近，它还是在浏览器中运行的唯一语言。这些框架可以从JavaScript或TypeScript进行编译或转换。本文询问开发人员是否需要依赖与JavaScript，以及我们是否可以开始使用C＃构建SPA应用程序。

00

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭