---
# System prepended metadata

title: 前端 Lesson3 & HW
tags: [前端Brian]

---

---
title: 前端 Lesson3 & HW
tags: 前端Brian
---

## 複習上週的HTML

常見的 HTML
https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Howto

語意化
https://seanacnet.com/html/semantic-elements/
=> 語意化是為了讓網頁爬蟲看懂你的網站，會影響 SEO

## CSS 入門(1)

### 上課檔案
https://codesandbox.io/s/dazzling-hertz-me8qb0?file=/index.html

### 為什麼 HTML 寫上去就有樣式？為什麼在不同瀏覽器樣式不同？

chrome default css
https://www.w3schools.com/cssref/css_default_values.php

### 載入 CSS 的方法
- inline style
- 使用選擇器
    - 選擇 html tag
    - 選擇 class

inline style
```
<p style="font-size: 40px;">字要變大</p>
```

選擇 html tag
```
<style>
p {
    font-size: 40px;
}
</style>

<p class="my-big-stlye">字要變大</p>
```

選擇 class
```
<style>
.my-big-stlye{
    font-size: 40px;
}
</style>

<p class="my-big-stlye">字要變大</p>
```

class 可以疊加，如果屬性重複或衝突後面的會覆蓋掉前面的
```
<style>
.my-big-stlye{
    font-size: 40px;
}

.my-small-stlye{
    font-size: 16px;
}
</style>

<p class="my-big-stlye my-small-stlye">字還是16px</p>
```



### 常用的 CSS 屬性(1)
- 文字相關
    - 字的大小 font-size: 數字+單位;
    - 顏色 color: 顏色;
- 排版相關
    - flow(display)
            - display: block & inline 
Use inline, inline-block, and block to control the flow of text and elements.
        - `<div>`  & `<span>`
            The div HTML element(block) is the generic container for flow content 撐滿一行 分行
            span element(inline) for styling of phrasing content 片段的 不分行
        - https://zh-tw.learnlayout.com/display.html

```
<span class="border">
  xxxxhere
</span>

<div class="border">
  xxxxhere
</div>
```


```
<p class="inline border">
  xxxxhere
</p>

<p class="block border">
  xxxxhere
</p>
```
        

- 版型&對齊
        - display: flex => 將容器內的 block 元素(例如 div,或其他預設是block的元素)做水平排列 block
   
   
```
<div class="flex">
  <div class="border">
    <p>前十大熱門文章</p>
    <ol>
      <li>土鳳梨</li>
      <li>大鳳梨</li>
    </ol>
  </div>

  <div class="border">
    <p>前十大熱門文章</p>
    <ol>
      <li>土鳳梨</li>
      <li>大鳳梨</li>
    </ol>
  </div>
</div>
```




## HW
- 破關這個 Flexbox 遊戲
    - https://flexboxfroggy.com/
    - 可以做到第五關就好後面的還沒教
    - 很好學可以看完這篇文章繼續破關https://www.casper.tw/css/2017/07/21/css-flex/
    - 答案: google Flexbox Froggy青蛙遊戲全記錄(上)
- 看 block, inline 的 tag 有哪些
    - 看教過的就好
    - 答案：https://injerry.pixnet.net/blog/post/38847454
- 試著用教到的 CSS 屬性做這個 CV 的排版
    - hint: 先用筆去草稿怎麼分組他們&用什麼標籤 不要急著寫
    - 先做出初步的排版，沒教過的 CSS 樣式屬性可以 google （例如分隔線, 顏色的代碼)

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


下次：
- 間距 Spacing
- 大小 Sizing
