---
# System prepended metadata

title: 'CSS 14. 文字設定, 文字對齊, 字元間距 and 行高'
tags: [2022 網頁開發全攻略教程 / CSS篇章 - font styling]

---

# CSS 14. 文字設定, 文字對齊, 字元間距 and 行高

### text-align / 可設定文字要靠齊的方向

![](https://i.imgur.com/AvY0j4k.png)


- 例如我想將此文字從預設靠左，移動至中間，就設定:

```
p {
  text-align: center;
}
```

![](https://i.imgur.com/Iu01vuv.png)


---

### text-decoration / 文字裝飾

- 承上圖，如我套用此屬性，可觀看結果會是文字被畫上消除線。

```
  text-decoration: line-through;
```

![](https://i.imgur.com/bgQvEhK.png)

- 文字加上底線 - `underline`

```
text-decoration: underline;
```

![](https://i.imgur.com/L8pmWsR.png)


### text-decoration 最常用於錨點的底線消除 - (重要!)

- 錨點，`a` 連結，預設的 `decoration` 為 `underline`

  故我們在製作網頁的時候，我們會常常使用: `none` 這個值給它

```
// HTML

<a href="#">Fubon Guardinas</a>
```

```
// CSS

text-decoration: none;
```
![](https://i.imgur.com/CKlxtxP.png)



---

### line-height / 設定文字的行與行間的高度:

- [參考 MDN 文件把玩](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)

- 常用到的 value:

![](https://i.imgur.com/023ewYm.png)


---

### letter-spacing / 字元間距:

- [參考 MDN 文件把玩](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing)

- 常用到的 value:

![](https://i.imgur.com/OfBcRBM.png)

###### tags: `2022 網頁開發全攻略教程 / CSS篇章 - font styling`