樣式化我們的 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 樣式化簡短介紹到此結束，讓我們回到建立應用功能。在下一篇文章中，我們將為待辦事項建立一個合適的元件，並使其能夠檢查、編輯和刪除待辦事項。