# 文字
###### tags: `NKFW 網頁設計入門`
* font-size
* color
* font-family
* text-align
* text-decoration
* opacity
* Proeject
## font-size
:::info
調整字體大小
:::
```htmlembedded=
<p class="a">A 字體大小為30px</p>
<p class="b">B 字體大小為40px</p>
```
```css=
.a {
font-size: 30px;
}
.b {
font-size: 40px;
}
```
## color
* 調整字體顏色
* 顏色有三種表示方法
* 英文名稱
* 例：red ,blue......
* rgb(red,green,blue)
* 例：rgb(255,0,0) 為紅色
* 色碼表
* 例：#000000 為黑色
* [色碼表](https://www.ifreesite.com/color/)
:::info
* rgb與色碼表原理
一般來說，紅、綠、藍被認為是疊加型的三原色，可透過以 不同比例混和，產生各種顏色，用於電子顯示器。
先從rgb開始說明，rgb的3個數字依序分別代表紅、綠、藍的顏色深度，範圍皆為0~255(2^8-1)，在電腦中各以8個bits(1個byte)進行儲存。
位元(bit)：每個bit皆為2進位數字(0或1)，用於電腦資料儲存單位。
色碼表其實就是rgb，但表示方式不同。色碼表的數字可分為3個部分，如#123456可分為12/34/56，每個部分各有2位的16進位數，2位的16進位數正好對應到rgb系統的1個數字(例如A8對應到168)。
16進位制：使用0-9及A-E來表達每1位數字。舉例來說，
A8 = A * 16 + 8 = 10 * 16 + 8 = 168。
| 16進位數 | 對應10進位數 | 16進位數 | 對應10進位數 |
| -------- | -------- | -------- | -------- |
| 0 | 0 | 8 | 8 |
| 1 | 1 | 9 | 9 |
| 2 | 2 | A | 10 |
| 3 | 3 | B | 11 |
| 4 | 4 | C | 12 |
| 5 | 5 | D | 13 |
| 6 | 6 | E | 14 |
| 7 | 7 | F | 15 |
:::
```htmlembedded=
<p class="a">A 字體顏色紅色</p>
<p class="b">B 字體顏色為藍色</p>
<p class="c">C 字體顏色為紫色</p>
```
```css=
.a {
color: rgb(255,0,0);
}
.b {
color: blue;
}
.c {
color:#6F00D2;
}
```
## font-weight
:::info
調整字粗細
:::
```htmlembedded=
<p class="a">A font-weight: normal</p>
<p class="b">B font-weight: bold</p>
```
```css=
.a {
font-weight: normal;
}
.b {
font-weight: bold;
}
```
## line-height
:::info
調整行距
:::
```htmlembedded=
<p class="first">first paragraph <br> first paragraph</p>
<p class="second">second paragraph <br> second paragraph</p>
```
```css=
.second {
line-height : 10px;
}
```
## font-family
:::info
調整字形
:::
```htmlembedded=
<p class="a">A font-family: 'Courier New'</p>
<p class="b">B font-family: 'Times New Roman'</p>
```
```css=
.a {
font-family: 'Courier New';
}
.b {
font-family:'Times New Roman';
}
```
## text-align
:::info
調整文字水平位置
:::
* text-align : left;
* 水平靠左(預設) 例：
* text-align : center;
* 水平置中 例：
* text-align : right;
* 水平靠右 例：
(藍色部分為p標籤背景顏色)
## text-decoration
:::info
調整文字效果
:::
* text-decoration : none;
* 預設，例：
* text-decoration : underline;
* 文字加底線，例：
* text-decoration : line-through;
* 文字中畫一條線，例：
:::success
試試看把超連結的底線去掉吧
:::
## opacity
:::info
* 設定文字或圖片透明度
* 值範圍0~1
* 0為完全透明；1為預設
:::
```css=
p {
opacity : 0.7;
}
```
```css=
<p>這是p標籤</p>
```
# Project
:::info
結合以上所學，試著自己寫一段程式來達到下圖的效果
:::
:::spoiler 解答
```htmlembedded=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css 文字</title>
<style>
body{
font-size: 30px;
font-weight: bold;
}
.p1{
color: chocolate;
text-align: start;
}
.p2{
color: rgb(3, 58, 17);
text-align: center;
}
.p3{
color: rgb(99, 3, 43);
text-align: end;
}
.span2{
opacity: 0.7;
font-size: 25px;
}
.span3{
opacity: 0.5;
font-size: 20px;
}
</style>
</head>
<body>
<p class="p1">
<span class="span1">示範</span>
<span class="span2">示範</span>
<span class="span3">示範</span>
</p>
<p class="p2">
<span class="span1">示範</span>
<span class="span2">示範</span>
<span class="span3">示範</span>
</p>
<p class="p3">
<span class="span1">示範</span>
<span class="span2">示範</span>
<span class="span3">示範</span>
</p>
</body>
</html>
```
:::
Sign in with Wallet
Connect another wallet