# 文字
### 主講人：黃夙賢
---
## 文字顏色
- 控制文字顯示顏色
- color: red | # FFFFFF | RGB(255, 255, 255)
- red(顏色):[W3C color name](https://www.w3schools.com/cssref/css_colors.php)
- #FFFFFF: #RRGGBB(16進位的RGB顏色)
- RGB(255,255,255):10進位的RGB顏色
---
## [27.文字顏色](https://github.com/shhuangmust/html/blob/master/27.%E6%96%87%E5%AD%97%E9%A1%8F%E8%89%B2.html)
```html=
<html>
<head><title>文字顏色</title></head>
<style>
h1{ Color:red; }
h2{ Color:##99BBFF; }
h3{ Color: rgb(255, 0 , 255) }
</style>
</head>
<body>
<h1>文字顏色</h1>
<h2>文字顏色</h2>
<h3>文字顏色</h3>
</body>
</html>
```
---
## 文字大小
- 控制文字大小
- font-size: large | 20px | 2em;
- 關鍵字：xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger
- 絕對單位：px (1pixel = 1/96in)、pt
- 相對單位：% (百分比), em
---
## 文字大小比較表
---
## [28.文字大小](https://github.com/shhuangmust/html/blob/master/28.%E6%96%87%E5%AD%97%E5%A4%A7%E5%B0%8F.html)
```html=
<html>
<head><title>文字顏色</title></head>
<style>
.f1{ font-size:large; }
.f2{ font-size:20px; }
.f3{ font-size:2em; }
</style>
</head>
<body>
<p>原始大小</p>
<p class='f1'>關鍵字</p>
<p class='f2'>絕對單位</p>
<p class='f3'>相對單位</p>
</body>
</html>
```
---
## 字元間距
- 控制字跟字之間的距離
- letter-spacing: normal | 1em | 1px
- 單位：em (單字的大小)，px
---
## [20.字元間距](https://github.com/shhuangmust/html/blob/master/20.%E5%AD%97%E5%85%83%E9%96%93%E8%B7%9D.html)
```html=
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#ls1 {letter-spacing: 1.5em}
#ls2 {letter-spacing: -5px}
</style>
</head>
<body>
<h1>這是正常的文字間距</h1>
<h1 id="ls1">這是較大的文字間距</h1>
<h1 id="ls2">這是較小的文字間距</h1>
</body>
</html>
```
---
## 行高
- 控制行跟行之間，文字的距離
- line-height: normal | 2 | 20px | 300%
- 2(數字): 文字大小2被行高
- 20px: 固定行高
- 300%: 預設行高的3倍
---
## [21.行高調整](https://github.com/shhuangmust/html/blob/master/21.%E8%A1%8C%E9%AB%98%E8%AA%BF%E6%95%B4.html)
```html=
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
span {line-height: 300%}
</style>
</head>
<body>
<span>節約用電也能賺摳摳，你登錄了嗎？台電昨公布今年前10月累積省電度數達12.5億度，獎勵金已發放逾10億元，但民眾必須登錄申請才能享有回饋金，估計全台符合資格者還有518萬戶未申請，
台電強調回饋預算無上限，呼籲民眾趕快登錄，別讓獎勵金溜走囉！ 綜合媒體報導，台電節電獎勵金可透過上網、臨櫃與撥打台電客服專線3管道申請，台電提醒民眾申請需要電號資料，也可
透過地址查詢，若親臨服務所申請最好攜帶電費帳單前往。據節電獎勵辦法，只要較去年同期節省1度電，每度可享0.6元回饋金，直接從當期電費單扣抵，亦即只要較去年同期節省1度電，當
期電費就可少繳84元，全年若都比去年節省將可省下504元。</span>
</body>
</html>
```
---
## 文字對齊
- 控制文字的水平對齊方向
- text-align: center | right | left | justify
- left (對齊左側)、center (置中)、right (對齊右側)、justify (左右對齊)
---
## [22.文字對齊](https://github.com/shhuangmust/html/blob/master/22.%E6%96%87%E5%AD%97%E5%B0%8D%E9%BD%8A.html)
```html=
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
h1{text-align: left}
h2{text-align: center}
h3{text-align: right}
h4{text-align: justify}
</style>
</head>
<body>
<h1>這是標題</h1>
<h2>這是標題</h2>
<h3>這是標題</h3>
<h4>上屆12強，台灣只靠預賽5場比賽就狂敲9轟，4年後過去，普遍對台灣打者的印象都是進步，可惜今年12強卻沒能發揮重砲本色，打完7場比賽不只全壘打4轟下修，打擊率更只有2成07。相較於賽前預估打高投低，台灣球員在實戰表現剛好相反，近乎完美的投球徹底比下擅長的打擊，甚至中心打線還比前、後段棒次表現都還差。</h4>
</body>
</html>
```
---
## 文字修飾線條
- 控制文字的修飾線條
- text-decoration: none | overline | line-through | underline
- overline(文字上線)、line-through(刪除線)、underline(文字底線)
---
## [23.文字刪除線](https://github.com/shhuangmust/html/blob/master/23.%E6%96%87%E5%AD%97%E5%88%AA%E9%99%A4%E7%B7%9A.html)
```html=
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
h1{text-decoration: overline}
h2{text-decoration: underline}
h3{text-decoration: line-through}
a{text-decoration: none}
</style>
</head>
<body>
<h1>這是標題</h1>
<h2>這是標題</h2>
<h3>這是標題</h3>
<a href="">這是連結</a>
</body>
</html>
```
---
## 文字字體
- 設定文字字型
- font-family: 思源黑體 | 微軟正黑體 | 蘋方黑體 | 華康麗黑體 | Helvetica , Arial | sans-serif | serif;
- Sans-Serif(無襯線字,筆畫末端無裝飾性線條)，Serif(有襯線字,筆劃末端有裝飾性線條
)
- 並不是每個人的電腦都有這些字型
- [Google font](https://fonts.google.com/)
---
## [24.文字字體](https://github.com/shhuangmust/html/blob/master/24.%E6%96%87%E5%AD%97%E5%AD%97%E9%AB%94.html)
```html=
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p style="font-family: serif">This is serif text in a paragraph</p>
<p style="font-family: sans-serif">This is sans-serif text in a paragraph</p>
<p style="font-family: Arial">This is arial text in a paragraph</p>
<p style="font-family: Times New Roman">This is times new roman text in a paragraph</p>
<p style="font-family: fantasy">This is fantacy text in a paragraph</p>
<p style="font-family: 細明體">這是細明體文字展演</p>
<p style="font-family: 標楷體">這是標楷體文字展演</p>
<p style="font-family: 微軟正黑體">這是微軟正黑體文字展演</p>
</body>
</html>
---
## 文字縮排
- 控制文字縮排
- text-indent: 3em | -3em
---
## [25.文字縮排](https://github.com/shhuangmust/html/blob/master/25.%E6%96%87%E5%AD%97%E7%B8%AE%E6%8E%92.html)
```html=
| <html lang="en"> |
| | <head> |
| | <meta charset="utf-8" /> |
| | <title></title> |
| | <style> |
| | #p1 {text-indent: 3em} |
| | #p2 {text-indent: -3em;margin-left: 3em} |
| | </style> |
| | </head> |
| | <body> |
| | <p id="p1">輕度颱風「鳳凰」路徑大幅東修，將朝西北西方向往台灣東南部海面前進，並沿著東部外海北轉。中央氣象局表示，明天上午可能發布海警，桃園以北降雨明顯，東北部可能有局部大雨；鳳凰後天離台灣最近，但屆時應已減弱為熱帶性低氣壓，發布陸警機率低。</p> |
| | <p id="p2">輕度颱風「鳳凰」路徑大幅東修，將朝西北西方向往台灣東南部海面前進，並沿著東部外海北轉。中央氣象局表示，明天上午可能發布海警，桃園以北降雨明顯，東北部可能有局部大雨；鳳凰後天離台灣最近，但屆時應已減弱為熱帶性低氣壓，發布陸警機率低。</p> |
| | ||
| | </body> |
| | </html> |
```
---
## 文字大小寫
- 控制文字大小、小寫
- text-transform: uppercase | lowercase | capitalize
- unndercase(全大寫)、lowercase(全小寫)、capitalize(開頭首字大寫)
---
## [26.文字大小寫](https://github.com/shhuangmust/html/blob/master/26.%E6%96%87%E5%AD%97%E5%A4%A7%E5%B0%8F%E5%AF%AB.html)
```html=
| <html lang="en"> |
| | <head> |
| | <meta charset="utf-8" /> |
| | <title></title> |
| | <style> |
| | h1{color: #1a7aef; |
| | background-color: #ff6a00; |
| | box-shadow:2px 2px 3px red; |
| | text-transform: uppercase} |
| | h2{text-transform: lowercase} |
| | h3{text-transform: capitalize} |
| | </style> |
| | </head> |
| | <body> |
| | <h1>This is some text in a paragraph.</h1> |
| | <h2>This is some text in a paragraph.</h2> |
| | <h3>This is some text in a paragraph.</h3> |
| | </body> |
| | </html> |
```
---
{"metaMigratedAt":"2023-06-17T14:39:43.579Z","metaMigratedFrom":"YAML","title":"文字","breaks":true,"description":"控制文字顯示顏色","contributors":"[{\"id\":\"ef0225b9-6c2a-4012-82c9-fa1031d2c4db\",\"add\":7126,\"del\":374,\"latestUpdatedAt\":1761548590133}]"}