Angular 是一种流行的前端框架，它允许您构建动态 Web 应用程序。Angular 应用程序的样式在用户体验中起着至关重要的作用。本文将介绍如何更改 Angular 应用程序的样式。
使用 Angular CLI 创建新的应用程序
在开始更改 Angular 应用程序的样式之前，您需要使用 Angular CLI 创建一个新的应用程序。要创建新的应用程序，请使用以下命令：
ng new my-app
这将创建一个名为 my-app 的新应用程序，并在其中安装所需的依赖项。一旦安装完成，您可以使用以下命令启动应用程序：
cd my-app ng serve
这将启动应用程序并在默认端口上运行。您可以通过在浏览器中输入 http://localhost:4200 来访问应用程序。
更改全局样式
Angular 应用程序的全局样式可以通过 styles.css 文件进行更改。该文件位于 src 目录下。您可以使用此文件更改应用程序的字体、颜色、背景等。
以下是一个示例 styles.css 文件：
-- -------------------- ---- ------- -- --- --- --- ------ ------ -- ---- ----- --- ---- ------ ----- ----- ----- -- ---- - ------------ ------ ---------- ----------- ----------------- -------- - -- - ------ ----- - ------ - ----------------- -------- ------ ------ ------- ----- -------- ---- ----- ----------- ------- ---------------- ----- -------- ------------- ---------- ----- ------- --- ---- ------- -------- -------------- ---- -
在这个示例中，我们更改了 body 的字体和背景颜色、h1 的颜色以及 button 的样式。
使用组件样式
除了全局样式之外，您还可以使用组件样式来更改应用程序的样式。每个 Angular 组件都可以有自己的样式。这些样式只会影响该组件及其子组件。
要为组件创建样式，请将样式文件添加到组件文件夹中。例如，如果您要为名为 my-component 的组件创建样式，请将样式文件命名为 my-component.component.css 并将其放在组件文件夹中。
以下是一个示例 my-component.component.css 文件：
-- -------------------- ---- ------- -- - ------ ----- ---------- ----- - - - ------ ----- ---------- ----- -
在这个示例中，我们更改了 h2 和 p 的颜色和字体大小。
要将样式文件与组件关联，请在组件的元数据中添加 styleUrls 属性。例如：
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
// ...
}在这个示例中，我们将 my-component.component.css 文件与 my-component.component.ts 文件关联起来。
使用内联样式
除了全局样式和组件样式之外，您还可以使用内联样式来更改应用程序的样式。内联样式是指直接在 HTML 元素中添加样式。
以下是一个示例内联样式：
<div style="color: #333; font-size: 16px;">Hello, world!</div>
在这个示例中，我们将 div 元素的颜色和字体大小更改为 #333 和 16px。
要在 Angular 应用程序中使用内联样式，请将样式添加到组件模板中的 HTML 元素中。例如：
<div [style.color]="color" [style.font-size]="fontSize">Hello, world!</div>
在这个示例中，我们使用了属性绑定将 color 和 fontSize 变量与 div 元素的样式关联起来。
结论
在本文中，我们介绍了如何更改 Angular 应用程序的样式。我们讨论了全局样式、组件样式和内联样式，并提供了示例代码。希望这篇文章能够帮助您更好地掌握 Angular 应用程序的样式。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/677a5d215c5a933a3414c350