---
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 （例如分隔線, 顏色的代碼)


下次：
- 間距 Spacing
- 大小 Sizing