---
# System prepended metadata

title: CSS屬性

---

# 文字
###### tags: `NKFW 網頁設計入門`
* font-size
* color
* font-family
* text-align
* text-decoration
* opacity
* Project

---

## 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;
}

```

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

---

## color

* 調整字體顏色
* 顏色有三種表示方法
    * 英文名稱
        * 例：red ,blue......
    * rgb(red,green,blue)
        * 例：rgb(255,0,0) 為紅色
    * 色碼表
        * 例：#000000 為黑色
        * [色碼表](https://www.ifreesite.com/color/)

---

## 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;
}
```
![](https://i.imgur.com/XYbZekl.png)

---

## 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;
}
```
![](https://i.imgur.com/busq882.png)

---

## 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;
}
```
![](https://i.imgur.com/z0qgwpK.png)

---

## 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';
}
```

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

---

## text-align
:::info
調整文字水平位置
:::

---

* text-align : left;
    * 水平靠左(預設) 例：
    ![](https://i.imgur.com/CijMTA2.png)
* text-align : center;
    * 水平置中 例：
    ![](https://i.imgur.com/rA4fXKn.png)
* text-align : right;
    * 水平靠右 例：
    ![](https://i.imgur.com/qQkgAVq.png)
    (藍色部分為p標籤背景顏色)

---

## text-decoration
:::info
調整文字效果
:::

---

* text-decoration : none;
    * 預設，例：
    ![](https://i.imgur.com/1lwpTzT.png)
* text-decoration : underline;
    * 文字加底線，例：
    ![](https://i.imgur.com/taE4eXS.png)
* text-decoration : line-through;
    * 文字中畫一條線，例：
    ![](https://i.imgur.com/yanxtdj.png)

:::success
試試看把超連結的底線去掉吧
:::

---

## opacity
:::info
* 設定文字或圖片透明度
* 值範圍0~1
* 0為完全透明；1為預設
:::

```css=
p {
    opacity : 0.7;
}
```
```css=
<p>這是p標籤</p>
```

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

---

## Project
:::info
結合以上所學，試著自己寫一段程式來達到下圖的效果
![](https://i.imgur.com/v9PmKK8.png)

:::

---

:::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>
```
:::
