{%hackmd @dzif24x25/yRBnguqQQl-2ylH1j5h0cg %}
# CSS & 文字
---
## 字型
---
## `font-size`
設定文字大小
---
可以用數字設定，也可以用以下的值來設定：
* `xx-large`
* `x-large`
* `large`
* `medium`
* `small`
* `x-small`
* `xx-small`
---
### 範例
HTML：
```htmlembedded=
<p class="large">large 測試</p>
<p class="small">small 測試</p>
<p class="_18px">18px 測試</p>
<p class="_150percent">150% 測試</p>
<p class="_1cm">1cm測試</p>
```
---
CSS：
```css=
.large {
font-size: large;
}
.small {
font-size: small;
}
._18px {
font-size: 18px;
}
._150percent {
font-size: 150%;
}
._1cm {
font-size: 1cm;
}
```
---
---
## `color`
設定文字顏色
---
### 可以使用以下方式設定：
* 顏色名稱：
`red`, `blue`, `green`
* HEX 值：
`#FF0000`, `#0000FF`, `#008000`
* RGB 值：
`rgb(255, 0, 0)`
---
### 範例
HTML：
```htmlembedded=
<p class="red">紅色</p>
<p class="orange">橙色</p>
<p class="yellow">黃色</p>
<p class="green">綠色</p>
<p class="blue">藍色</p>
<p class="indigo">靛色</p>
<p class="purple">紫色</p>
```
---
CSS：
```css=
.red {
color: red;
}
.orange {
color: #FFA500;
}
.yellow {
color: rgb(255, 255, 0);
}
.green {
color: green;
}
.blue {
color: #0000FF
}
.indigo {
color: #4B0082
}
.purple {
color: purple;
}
```
---
---
## `font-style`
設定文字的粗體 & 斜體
---
* `normal`：標準字體 (預設值)
* `italic`：斜體字體
* `oblique`：斜體字體 (類似 `italic`，但傾斜角度不同)
---
### 範例
HTML：
```htmlembedded=
<p class="normal">normal 標準字體</p>
<p class="italic">italic 斜體字體</p>
<p class="oblique">oblique 斜體字體</p>
```
CSS：
```css=
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}
```
---
---
## `text-decoration`
設定文字下方的線條樣式
---
* `none`：沒有線條 (預設值)
* `underline`：底線
* `overline`：上線
* `line-through`：中線
* `blink`：閃爍線
---
### 範例
HTML：
```htmlembedded=
<p class="none">none 沒有線條</p>
<p class="underline">underline 底線</p>
<p class="overline">overline 上線</p>
<p class="line-through">line-through 中線</p>
<p class="blink">blink 閃爍線</p>
```
---
CSS：
```css=
.none {
text-decoration: none
}
.underline {
text-decoration: underline
}
.overline {
text-decoration: overline
}
.line-through {
text-decoration: line-through
}
.blink {
text-decoration: blink
}
```
---
---
## `font-weight`
設定文字的粗細程度
---
* 數字值 (100 ~ 900)：越大越粗
* `normal`：標準字體 (等同於 400)
* `bold`：粗體字體 (等同於 700)
* `bolder`：更粗體字體
* `lighter`： 細體字體
---
### 範例
HTML：
```htmlembedded=
<p class="_100">100</p>
<p class="_200">200</p>
<p class="_300">300</p>
<p class="_400">400</p>
<p class="normal">normal</p>
<p class="_500">500</p>
<p class="_600">600</p>
<p class="_700">700</p>
<p class="bold">bold</p>
<p class="_700">800</p>
<p class="_900">900</p>
<p class="bolder">bolder</p>
<p class="lighter">lighter</p>
```
---
CSS：
```css=
._100 {
font-weight: 100;
}
._200 {
font-weight: 200;
}
._300 {
font-weight: 300;
}
._400 {
font-weight: 400;
}
._500 {
font-weight: 500;
}
._600 {
font-weight: 600;
}
._700 {
font-weight: 700;
}
._800 {
font-weight: 800;
}
._900 {
font-weight: 900;
}
.normal {
font-weight: normal;
}
.bold {
font-weight: bold;
}
.bolder {
font-weight: bolder;
}
.lighter {
font-weight: lighter;
}
```
---
---
## `font-family`
設定文字的字型
---
* 字型名稱
`Arial`
`Times New Roman`
`微軟正黑體`
* 一組字型名稱
`sans-serif, serif, monospace`
---
### 範例
HTML：
```htmlembedded=
<p class="arial">Arial</p>
<p class="times_new_roman">Times New Roman</p>
<p class="MSJhengHei">微軟正黑體</p>
<p class="font-set">sans-serif, serif, monospace</p>
```
---
CSS：
```css=
.arial {
font-family: Arial;
}
.times_new_roman {
font-family: Times New Roman;
}
.MSJhengHei {
font-family: 微軟正黑體;
}
.font-set {
font-family: sans-serif, serif, monospace;
}
p {
font-size: 2em;
}
```
---
---
## 補充：Web Font 網路字體
---
讓瀏覽器自動下載這些字體，電腦中沒有指定字體的使用者也能使用這些字體
---
### 常用Web Font服務
* Google Fonts
* Adobe Fonts
---
### 以Google Fonts為例
1. 前往Google Fonts (https://fonts.google.com/)
---
### 以Google Fonts為例
2. 挑選喜歡的字體
---
### 以Google Fonts為例
3. 選擇字體，此時可在右上角的`Selected family`看到已選擇的字體
---
### 以Google Fonts為例
4. 複製
---
### 以Google Fonts為例
5. 貼上至HTML檔案裡的`<head></head>`中
---
### 以Google Fonts為例
6. 即可在CSS中套用想要的字體
---
## 段落
---
## `text-align`
設定文字在容器中的對齊方式
---
* `left`: 靠左對齊 (預設值)
* `center`: 置中對齊
* `right`: 靠右對齊
* `justify`: 兩端對齊
---
### 範例
HTML：
```htmlembedded=
<p class="left">靠左對齊</p>
<p class="center">置中對齊</p>
<p class="right">靠右對齊</p>
<p class="justify">兩端對齊</p>
```
---
CSS：
```css=
.left{
text-align: left;
}
.center{
text-align: center;
}
.right{
text-align: right;
}
.justify{
text-align: justify;
}
```
---
---
## `letter-spacing`
設定文字字元間的距離
---
* 數字值 (正負皆可)：越大距離越遠
* `normal`：標準字元間距 (預設值)
---
### 範例
HTML：
```htmlembedded=
<p class="_-10px">letter-spacing: -10px;</p>
<p class="_-3px">letter-spacing: -3px;</p>
<p class="normal">letter-spacing: normal;</p>
<p class="_3px">letter-spacing: 3px;</p>
<p class="_10px">letter-spacing: 10px;</p>
```
---
CSS：
```css=
._-10px {
letter-spacing: -10px;
}
._-3px {
letter-spacing: -3px;
}
.normal {
letter-spacing: normal;
}
._3px {
letter-spacing: 3px;
}
._10px {
letter-spacing: 10px;
}
```
---
---
## `line-height`
設定文字行高
---
* 數字值 (正整數)：表示行高的倍數 (如：1.5 表示文字高度的 1.5 倍)
* `normal`：標準行高 (預設值)
* 像素值 (px)：表示行高的固定像素值
---
### 範例
HTML：
```htmlembedded=
<p class="_150">line-height: 1.5;</p>
<p class="_150">line-height: 1.5;</p>
<p class="_150">line-height: 1.5;</p>
<p class="normal">line-height: normal;</p>
<p class="normal">line-height: normal;</p>
<p class="normal">line-height: normal;</p>
<p class="_10px">line-height: 10px;</p>
<p class="_10px">line-height: 10px;</p>
<p class="_10px">line-height: 10px;</p>
<p class="_50px">line-height: 50px;</p>
<p class="_50px">line-height: 50px;</p>
<p class="_50px">line-height: 50px;</p>
```
---
CSS：
```css=
._150 {
line-height: 1.5;
}
.normal {
line-height: normal;
}
._10px {
line-height: 10px;
}
._50px {
line-height: 50px;
}
```
---
{"metaMigratedAt":"2023-06-18T03:21:16.793Z","metaMigratedFrom":"YAML","title":"CSS & 文字","breaks":true,"contributors":"[{\"id\":\"b1b336d5-b75d-4c19-b4f6-fccd69a2a9f2\",\"add\":10799,\"del\":4080}]"}