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;
}
最後一步是重新訪問您的瀏覽器，看看樣式是如何更新的。現在事情更有意義了。