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: #000;
background-color: #fff;
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: #fff;
background-color: #000;
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: #000;
outline: none;
border: #000 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 (min-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 #000;
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;
}
最后一步是重新访问您的浏览器，看看样式是如何更新的。现在事情更有意义了。