---
# System prepended metadata

title: 第二週 助教課程筆記
tags: [2021 網頁切版班]

---

# 第二週 助教課程筆記

###### tags: `2021 網頁切版班`

Quick Link

[助教筆記](https://quip.com/5p2iAxU9Jqhk)



### 檢視重點：找出共同設定—字體、行高、大小

- **預設字體**
    - `補充資料連結`

        [系統字體介紹](https://wcc723.github.io/design/2018/10/25/fonts/)

        [font-family 詳細解說](https://www.oxxostudio.tw/articles/201811/css-font-family.html)

        [如何使用 Google Fonts](https://hackmd.io/@YmcMgo-NSKOqgTGAjl_5tg/HJpJk8ABU/https%3A%2F%2Fhackmd.io%2F2nenMilfR7WSJSDI4WzcWA%3Fview)

        [CSS 設定中英文不同的問題](https://wcc723.github.io/sass/2014/02/21/font-code-range/)

        [CSS 網頁字型 @font-face 使用教學與範例 - G. T. Wang](https://blog.gtwang.org/web-development/css-font-face/)

    - 順序：英文字型 > Linux系統 > Mac系統 > Windows > 基礎字體（如果中文字型在前，那麼網頁可能會讀取不到英文的字體，所以用越少的放前面）

        ```css
        body {
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", Roboto, "Helvetica Neue", Arial, sans-serif;
                                        /* mac, IOS 系統字體                   Windows 英文系統字  微軟正黑體 Android 系統字  IOS 系統字  通用字體 */
        }
        ```

    - 順序很重要：先讀英文字體，再讀中文字體，只要一讀到有符合的設定，後面的就會直接忽略，越常用放越後面，像是通用字體、或是一些預防措施（防止讀不到），就會放在最後面。
    - 如果字型是兩個字（有空格）要記得加上`" "`
    - 通用字體：要記得放上 Arial, sams-serif

        Q: 如果都讀不到，還是要加上這一串嗎？

        → 還是建議要加，因為算是有個base 的感覺，也不確定之後什麼時候會讀到，像是建築的基地，要打好基礎的概念。

    - **補充設計稿上的用法：font**

        ```css
        font: normal normal 300 24px/36px Roboto;
        /*  font-style font-variant font-weight font-size line-height font-family */
        ```

        不建議用設計稿上一串的設定如下，因為只要有一個錯誤，就容易讓code 設定壞掉的風險。

- **行高設計稿的問題**
    1. 用倍數設定：

        → 好處：設計師的設計上會有一定的規律，因此可以不用特別做class 就可以讓不同字體大小的文字，自動排出相對應的行高

        → 建議： 詢問設計師有沒有特定的倍率

        →可以用spotlight `^+space` 做個算式 算一下 

    2.  body 設定範例

        ```css
        body{
         line-height:1.5; /* 16*1.5=24px 
        										css reset 是 *1 */ 
        }
        h1,h2,h3,h4,h5,h6{
        	line-height:1.2;
        }
        ```

        但是要記得在class 寫font-size 要不然lh 會使用預設值，也就是固定24px，而不會隨著文字大小做變動

    3. 16px 是瀏覽器規範的預設值（14px 最小)不能太小

- **大小**
    - h1 與 **.h1 的差異**

        標題標籤有自己的語意，所以使用時是看語意而不是字體大小

        ```
        <h2 class="h2"></h2>

        .h1{
            fonst-size:
        }
        .h2{
            fonst-size: 32px;
        }
        .h3{
            fonst-size:
        }
        .h4{
            fonst-size:
        }
        .h5{
            fonst-size:
        }
        .h6{
            fonst-size:16px;
        }

        不建議再繼續寫 h7~~
        ```

        ```
        .font-sm{
            fonst-size:
        }
        .font-m{
            fonst-size:
        }
        .font-lg{
            fonst-size:
        }
        ```

        不是共用的大小建議直接寫在區塊 class 內

        ```
        .title{
            font-size: 80px;
            ....
        ```

    - px 與rem 的差異

        rem 準取決於最外層的文字大小

        全域設定的部分一定要用px，代表這份稿的基數設定是16px，後面class再用rem 算是倍數關係

        ```css
        body{
         font-size: 16px;
        }
        ```

        → 之後設計稿只要在body做調整的話，後續設定都不用改，只是改變基數，同樣的倍數關係做調整即可。

        → px 不一定要設計在`body` 但是要設定在 `rem` 之前 

        → 例如：如果 f1 是48px 就會寫成 `font-size: 3rem;`

        如果共同設定中，除了body 之外 都用px / rem 的話，就要固定沿用其中一項，不可以混用～

        **Q: margin 用rem 的話，是以body fz 的文字大小為基礎嗎？**

- **色彩**
    - 找出主色 （有明暗變化）→ 使用bootstrap 的命名方式、強調色（次要色、重要、執行關鍵）

        ```
        .text-primary {
       color: blue;
        }
        .bg-light{
         background-color: lightblue;
        }
        ```

    - 命名不要用顏色命名，用語意化的命名方式

        之後如果要調整主色系顏色，就不用回到 html 改class ，只需要調整css 的顏色即可，沒有命名的衝突。

        primary → 主色

        secondary → 次要色

        warning → 警告（黃色）

        danger → 危險（紅色）

        light →

- **間距**
    - `補充資料連結`

        [box-sizing 影音](https://courses.hexschool.com/courses/1104597/lectures/23646499)

        [偽類和偽元素](https://bit.ly/2TKqUhG)

    - 先找出區塊、與元件間的間距規律

        → 好處： 可以從內容與間距的觀察中，找出規律之外，也能從中找出邏輯，從而寫出合適的html 標籤

    - 需要觀察的事項：只要倍數沒有餘數，用倍數設定
        - 元件之間：8 16
        - 元件與外層元件之間: 24
        - 區塊之間: 72
    - 只要倍數沒有餘數，間距用倍數設定class；反之，如果無法，就寫在該class下面就好，不用另外寫
    - 命名的話，用自己的編序，不一定要照間距的倍數去命名（依照順位即可），只要確保class內是用倍數乘除即可

        → 建議把全部的間距列出來之後，再去規劃通用類別的數值

    ```
    m - margin
    p - padding
    t - top
    b - bottom

    margin-bottom = mb

    /* 使用數值 */
    .mb-8{
        margin-bottom: 8px;
    }
    /* 要改數字的時候需連同 class 名稱一起改 */

    /* 使用倍數 */
    .mb-1{
        margin-bottom: 8px;
    }
    ```

    共同設定

    ```
    *, *::before, *::after{
      box-sizing: border-box;
    }
    body {
        font-size: 16px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", Roboto, "Helvetica Neue", Arial, sans-serif;
      line-height: 1.5;
    }
    h1, h2, h3, h4, h5, h6 {
      line-height: 1.2;
    }

    大小
    色彩
    間距
    ```

- 課後補充資源

    [API](https://bootstrap5.hexschool.com/docs/5.0/utilities/api/)


### CSS 模組化

- **命名完整性：`語意化的重要性`**
    - [ ]  不要用emmet 寫法命名，其他人其實會看不懂
    - [ ]  不要用流水號
    - [ ]  不要用方向，偏主觀，大家的方向可能不同

    → 要語意化，讓自己十年後都看得懂！

- 參考Bootstrap util 的命名方式：

    [Bootstrap utils 命名](https://getbootstrap.com/docs/4.0/utilities/flex)

### 作業檢討

- KATA練習
- 履歷Ver1 常見問題
    - 推擠方向要一致
    - 第一週用不到 flex
    - 設計稿上的資訊不一定是正確的
<br>

    ```
    .title h1 {
            font: normal normal normal 80px/106px Roboto;
            border-bottom: #000000 2px solid;
            margin-bottom: 51px;
    }
    ```

### 容器

- **推擠方向的一致性**

    → 好處：class 只要寫一次，不容易搞混，忘記設定

- 什麼是 container？將最重要的內容放在畫面中間（像是一個容器）

    ```
     .container {
            width:;
            margin: 0 auto;
        }
    ```

- 怎麼算出容器寬度？看設計稿的佈局網格 

    兩種算法：

    ```
    1) 12*78 + 24*11 = 1200px

    2) 1920 - 360*2 = 1200px
    ```

- container & wrap 差別在哪？

    - wrap 比較常包在最外層

    ```
    <div class="wrap">
        <div class="profile">
            <div class="container">
                <h2>...</h2>
            </div>
        </div>
         ....
    </div>
    ```