前言

在使用Angular开发前端应用程序时，我们可以通过引入CSS来为我们的应用程序添加样式和布局。本教程将向您介绍如何在Angular中引入CSS文件。

步骤一：创建CSS文件

首先，我们需要创建一个CSS文件，该文件将包含我们希望应用于项目中的样式和布局。我们可以使用现有的CSS框架，如Bootstrap或Material Design，或者自己编写CSS代码。

/* styles.css */

/* 添加样式和布局 */
body {
  font-family: Arial, sans-serif;
  background-color: #f2f2f2;
}

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

.container {
  margin: 20px;
  padding: 10px;
}

步骤二：在angular.json文件中引入CSS文件

接下来，我们需要在Angular项目的angular.json文件中配置并引入我们的CSS文件。打开项目的根目录，并找到angular.json文件。在该文件中，找到"styles"数组并添加我们的CSS文件路径。

"styles": [
  "src/styles.css"
],

步骤三：在组件中应用样式

现在，我们已经成功引入了CSS文件，接下来我们可以在组件中使用这些样式。假设我们有一个名为"AppComponent"的组件，我们可以在它的HTML文件中应用我们的样式。

  
Welcome to my Angular App!



  
This is the content of my app.

总结

通过以上步骤，我们可以轻松地在Angular应用程序中引入和应用CSS样式。创建一个CSS文件，将其引入angular.json文件，并在组件的HTML文件中使用这些样式，可以使我们的应用程序拥有更好的外观和用户体验。