样式化我们的 Angular 应用
现在我们已经设置好了基本的应用结构并开始显示一些有用的内容，让我们换个思路，用一篇文章来看看 Angular 是如何处理应用样式的。
| 预备知识 | 熟悉核心 HTML、CSS 和 JavaScript 语言，了解 终端/命令行。 |
|---|---|
| 目标 | 学习如何样式化 Angular 应用。 |
为 Angular 添加样式
Angular CLI 会生成两种类型的样式文件：
- 组件样式：Angular CLI 为每个组件提供自己的样式文件。此文件中的样式仅适用于其组件。
styles.css：在src目录中，此文件中的样式将应用于您的整个应用程序，除非您在组件级别指定样式。
根据您是否使用 CSS 预处理器，CSS 文件的扩展名可能会有所不同。Angular 支持纯 CSS、SCSS、Sass 和 Less。
在 src/styles.css 中，粘贴以下样式：
css
body {
font-family: "Helvetica", "Arial", sans-serif;
}
.btn-wrapper {
/* flexbox */
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
.btn {
color: black;
background-color: white;
border: 2px solid #cecece;
padding: 0.35rem 1rem 0.25rem 1rem;
font-size: 1rem;
}
.btn:hover {
background-color: #ecf2fd;
}
.btn:active {
background-color: #d1e0fe;
}
.btn:focus {
outline: none;
border: black solid 2px;
}
.btn-primary {
color: white;
background-color: black;
width: 100%;
padding: 0.75rem;
font-size: 1.3rem;
border: black solid 2px;
margin: 1rem 0;
}
.btn-primary:hover {
background-color: #444242;
}
.btn-primary:focus {
color: black;
outline: none;
border: black solid 2px;
background-color: #d7ecff;
}
.btn-primary:active {
background-color: #212020;
}
src/styles.css 中的 CSS 应用于整个应用程序，但是，这些样式不会影响页面上的所有内容。下一步是添加专门应用于 AppComponent 的样式。
在 app.component.css 中，添加以下样式：
css
.main {
max-width: 500px;
width: 85%;
margin: 2rem auto;
padding: 1rem;
text-align: center;
box-shadow:
0 2px 4px 0 rgb(0 0 0 / 20%),
0 2.5rem 5rem 0 rgb(0 0 0 / 10%);
}
@media screen and (width >= 600px) {
.main {
width: 70%;
}
}
label {
font-size: 1.5rem;
font-weight: bold;
display: block;
padding-bottom: 1rem;
}
.lg-text-input {
width: 100%;
padding: 1rem;
border: 2px solid black;
display: block;
box-sizing: border-box;
font-size: 1rem;
}
.btn-wrapper {
margin-bottom: 2rem;
}
.btn-menu {
flex-basis: 32%;
}
.active {
color: green;
}
ul {
padding-inline-start: 0;
}
ul li {
list-style: none;
}
最后一步是重新访问您的浏览器，看看样式是如何更新的。现在 things 更加清晰了。
总结
我们的 Angular 样式化简短介绍到此结束，让我们回到创建应用功能。在下一篇文章中，我们将为待办事项创建一个合适的组件，并使其能够检查、编辑和删除待办事项。