# CSS 優化文字設定

### 為什麼要讓文字段落設計變得好看?

- 例如: 新聞網站、商品的介紹設計，若文字看起來簡潔又有吸引力
可以增加使用者在網頁瀏覽上的順暢度級觀看意願提高，這就是需要學習
優化文字設定的原因

- 介紹幾種常用的語法吧:

### 1. 寫一個 p 段落：

    <p>
        
    </p>

### 2. 透過假字產生器快速產生文字範例:

    <p>
        lorem30 // 按下 tab 展開
    </p>
    
    
/// 可得以下結果:    
    
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nisi, nobis sit, minima nostrum amet quas sunt
        sequi praesentium quia delectus aut ducimus laborum magni eos provident velit voluptate enim?
    </p>    

### 3. 開始撰寫 CSS:

1. 字型的設定 - font-family:

p {
    /* 常見設定方式: */
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

2. 行距 - line-height

- 解說: 當你的文字大小為 16px，那麼你的行距參數將等於 16 * 你設定的數值:

- 例如當前文字 16 * 1.5 = 24px ，行距就會在文字的上下產生出 24px 的距離，如圖:


line-height: 1.5;

---

3. 文字靠齊 - text-align

- 有三個選擇:

left、center、right

text-align: center;

---

4. 首行縮排 - text-indent:

- 常用在中文的網站上面，假設來說我們的文字段落設定為16px

那我們首行若要空兩格，那麼就輸入: 16 * 2 = 32px

- 使用前：


- 使用後：
-

---

5. 文字裝飾 - text-decoration

- 常用於文字內容的修飾

- 關於 decoration 有很多種樣式:

[可參考 mdn 網站文件](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration)

- 另外像是，ａ標籤預設文字都是一個底線，這時可以用: none 來消除

text-decoration: none;

6. 文字的間距 - letter-spacing:

- 透過此語法，可讓字與字之間的左右距離變寬，通常單位是 px

letter-spacing: 1.6px;

###### tags: `HTML、CSS`