# 常用 Props（上）

來複習一下，前面我們提到CSS語法是由選擇器、屬性和屬性值所構成，在介紹各種 CSS 常用屬性之前，我們先來對屬性值做個簡單的介紹。

<figure><img src="https://www.w3schools.com/css/img_selector.gif" alt=""><figcaption><p>你是忘記了 還是害怕想起來</p></figcaption></figure>

大部分常見的CSS屬性值為：**整數與實數、長度單位、百分比、URL、顏色、文字名稱**。

### font-family

設定字型的類別，常見的做法會一次指定多種字型，瀏覽器會依順序去套用使用者電腦內擁有的字型，有的話就套用、沒有的話則往下一個找。

```css
/* 依序設定 字型: 思源黑體, 微軟正黑體, 蘋方體, 黑體, sans-serif, serif */

*{
    font-family: "Noto Sans CJK TC", "Microsoft JhengHei", PingFang, STHeiti, sans-serif, serif;
}
```

{% hint style="warning" %}

* 當字型名稱中出現空格時，要在外側加上雙引號
* 為了避免編碼問題或設定出錯，建議使用英文字型名稱
* 檢查您的字體在不同瀏覽器和設備上的顯示方式
  {% endhint %}

想要在網頁上有其他特別的字型，推薦使用免費的網路字型如[Google Fonts](https://fonts.google.com/)

中文網頁設計很常會使用Google 的開源字型：思源黑體Noto Sans TC、思源宋體Noto Serif T&#x43;**，**&#x54;C 指的是 Traditional Chinese，這兩種字型是由Adobe與Google聯手開發的開源字型，根據 Open Font License 獲得許可的字型，可以在您的產品和項目中使用它們——印刷或數字、商業或其他方式。

一般在缺字的時候會出現方框，因此缺字稱為「豆腐」，而思源體的字型家族英文名稱為Noto，即無豆腐之意，指創作者希望該字型不缺字，是最完善的字型。

付費字型，可以參考[justfont](https://justfont.com/)新世代中文字型設計暨推廣團隊，致力於培育台灣下一世代的字型設計力量，追尋更美好的文字風景，知名作品包含金萱系列字型家族。

#### Goole Fonts使用教學

步驟一：先至[Google Fonts](https://fonts.google.com/)選取想要的字體

<figure><img src="https://3433349642-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfNa3cQXA0JgS2aeBbzYg%2Fuploads%2FTLyw35D17GRR20ZcBRqQ%2FScreenshot%202023-02-10%20%E4%B8%8A%E5%8D%8810.05.30.png?alt=media&#x26;token=d1559e08-5657-4617-85c3-92b1b9168e34" alt=""><figcaption></figcaption></figure>

步驟二：點選預覽右側的「+ select XXX 000」將想要的樣式加入清單 (可以複選喔)

<figure><img src="https://3433349642-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfNa3cQXA0JgS2aeBbzYg%2Fuploads%2FvwYbeS7cKwXJNCmJa3Uk%2FScreenshot%202023-02-10%20%E4%B8%8A%E5%8D%8810.07.53.png?alt=media&#x26;token=4cb5151c-c0d4-47c8-ba45-02bb3ea0a4dc" alt=""><figcaption></figcaption></figure>

步驟三：打開最右上的選單會出現能放進**HTML的`<link>和@import，擇一複製貼上到codepan中， 接著複製下面的CSS font-family屬性和值貼到codepen`**

<figure><img src="https://3433349642-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfNa3cQXA0JgS2aeBbzYg%2Fuploads%2FJla0tKCVR6Nkt4Z16mfb%2FScreenshot%202023-02-10%20%E4%B8%8A%E5%8D%8810.24.06.png?alt=media&#x26;token=ad190c19-387c-401e-805a-bde6c091576c" alt=""><figcaption></figcaption></figure>

<pre class="language-html"><code class="lang-html"><strong>&#x3C;!-- 將 googlefonts 引入 codepan HTML的方式 -->
</strong><strong>
</strong>&#x3C;!-- 方法1 -->
&#x3C;link rel="preconnect" href="https://fonts.googleapis.com">
&#x3C;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
&#x3C;link href="https://fonts.googleapis.com/css2?family=Babylonica&#x26;display=swap" rel="stylesheet">

&#x3C;!-- 方法2 -->
<strong>&#x3C;style>
</strong>@import url('https://fonts.googleapis.com/css2?family=Babylonica&#x26;display=swap');
&#x3C;/style>
</code></pre>

<pre class="language-css"><code class="lang-css"><strong>/* CSS */
</strong><strong>font-family: 'Babylonica', cursive;
</strong></code></pre>

{% hint style="info" %}
**`@import也可以放入CSS，將前後的<style> </style>拿掉即可`**
{% endhint %}

完成以上步驟就可以在網頁上呈現自己想要的字體囉！

### color

設定文字的顏色，常見有以下四種的方式。

&#x20;**16 進位碼（HEX)**

```css
color: #0099FF;
```

#### 顏色名稱

```css
color: red;
color: skyblue;
```

**RGB碼 與 RGBA 碼**

RGB碼是將光的三原色 紅(Red) 綠(Green) 藍(Blue)數字化

RGBA 是在 RGB 顏色值的格式最後再加上一個 **alpha** 值，**alpha** 值可以指定顏色的**透明度**，值的範圍為0.0（完全透明）至1.0（不透明），也可以使用百分比 0%至100%呈現。

```css
/* RGB碼 */
color: rgb(255,0,0);
/* RGBA碼 */
color: rgba(255,0,0,0.3);
```

**HSL 碼 與 HSLA 碼**

HSL即 色相、飽和度、亮度（Hue, Saturation, Lightness）

<pre class="language-css"><code class="lang-css">/* HSL碼 */
<strong>color: hsl(219,42%,50%);
</strong>/* HSLA碼 */
color: hsla(219,42%,50%,0.6);
</code></pre>

{% hint style="info" %}
從CSS 2.1開始，提供有RGB的十進位顏色代碼。

從CSS 3開始，網頁顏色開始支持RGBA和HSLA顏色表示法，提供透明色的可能性。
{% endhint %}

### font-size

設定文字的大小，常見的設定方式分為以下三大類，入門最推薦使用px來做網頁設計的單位，精確度高也不需換算容易入門。

* 關鍵字：small、medium、large
* 絕對單位：最常使用的px(像素pixel)
* 相對單位：em、rem、％

```css
font-size: medium;
font-size: 20px;
font-size: 1rem;
```

### font-weight

設定文字的字重，為方便理解可以想成文字的粗細。

* normal：預設字體厚度，不用寫出來。
* bold：常用的粗體字。
* bolder：比粗體更粗一點。
* lighter：比預設一般字體更細。
* 100-900：數字越大越粗。

```css
font-weight: normal;
font-weight: bold;
font-weight: lighter;
font-weight: 700;
```

### letter-spacing

&#x20;增加字與字之間的間距

```css
/* 關鍵字 */
letter-spacing: normal;

/* 長度＋單位 */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: 0.5px;
```

### text-align

文字的對齊

* left：對齊左側
* right：對齊右側
* center：對齊中間
* justify：左右對齊

```css
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
```

### line-height

設定文字的行高，推薦使用相對數值

例如：文字字級設定10px，行高設定300%或3em或3，這樣行高就會自己換算出30px，與px像素最大的不同在於只要字級改變行高就會跟著等比例改變。

```css
line-height: 10px;
line-height: 300%;
line-height: 3em;
line-height: 3;
```

### 複習

{% embed url="<https://codepen.io/yuenwu1996/pen/dyjByRw>" %}

### 小結

善用這些常用屬性可以讓網站內容變得更豐富有層次，請多多練習各種屬性與其呈現方式。

<div align="left"><figure><img src="https://3433349642-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfNa3cQXA0JgS2aeBbzYg%2Fuploads%2Fx6pIHnE9H4Op9lbG7796%2F%E5%BF%AB%E4%BF%A001.gif?alt=media&#x26;token=6e15a67d-d1fa-40eb-bc43-06af961bb254" alt=""><figcaption><p>學習快俠精神：資訊量太多就放慢一下步調</p></figcaption></figure></div>

### 作業

作業一：使用上述所學的常用文字屬性在codepen上做出一篇部落格文章樣式，需有 文章標題、日期、文章內容。

進階作業：試著在codepen中引入google icon，可以[參考google官方文件](https://developers.google.com/fonts/docs/material_symbols?hl=zh-tw)

### 參考來源

* <https://www.w3schools.com/css/>
* [Material Symbols guide](https://developers.google.com/fonts/docs/material_symbols)
* [六角學院 實際展示em與rem的差異](https://www.hexschool.com/2016/01/02/2016-08-08-em-vs-rem/)
