# 第二週 助教課程筆記
###### 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>
```
Sign in with Wallet
Connect another wallet