---
# System prepended metadata

title: 20190924前端程式設計note
tags: [前端程式設計]

---

# 20190924前端程式設計note

## HTML
### Table
主要語法大家如果不熟悉，可以再去看老師的code，或是[w3school](https://www.w3schools.com/html/html_tables.asp)看一下。
記住：
`<tr> `的r代表row
`<th>` 的h代表header
整個表格是一個row一個row展開，所以都是以一個`tr`包著裡面`th` or `td`

快捷鍵：`table > (tr>th* m(行的數目)) + (tr > td * m(行的數目)) * n(列的數目扣掉標題列)` (這邊看老師的檔案)

---
## CSS

### CSS selector
這個部分很重要，也有延伸很多很特別的寫法，像是有關parent, child的。老師上課沒有提到，如果有興趣的同學可以直接google "CSS selector 整理"，會有更多資訊。

| Selector(written in CSS file) | HTML (writen in HTML file)|
|----------|------|
|   tag(當你設定這個tag後，後面用到此tag的都會被套用到)    |<tag> |
|  #id(一個id只能對應一個tag)     |id="id_name"|
|  .class(不同的tag中可以是同一個class)  |class="class"|

Ex:
==< In CSS File >==

    h1 {
        text-align: center;
        ...
    }

    #This_is_the_id_you_named {
        text-align: center;
        ...
    }
    
    .This_is_the_class_you_named{
        text-align: center;
        ...
    }
==< In HTML File >==

    < h1 >這是內容< / h1 >
    < h1 id = "This_is_the_id_you_named">
    < h1 class = "This_is_the_class_you_named">
    
p.s. 如果你是css檔案中指定h1 tag，下面兩個指定id和指定class的也會因此被套用到。這個情況就是衝突產生，更多資訊可以看[這邊](https://www.webdesigns.com.tw/CSS-selector.asp)


### CSS img樣式修正
- 建議直接在瀏覽器做操作，更改完再貼回VS code的檔案
    - Mac: Fn + F12 or 直接在網頁畫面上右鍵 -> 檢查
    - Windows: 直接 F12
- img 中的一些大小屬性
    - `width: 300px;` (px為網頁中常用到的單位，自己也可以試試其他單位 ex: em)可以查一下[網頁常用單位](https://www.tellustek.com/web-design/78-unit-for-web-design)
    - `border-width: 5px;` (邊界寬度)
    - `border-color: #aaaaaa; `(color可以直接在vs code裡面找，鼠標放在你的顏色的文字上ex: #aaaaaa上 會有調色盤給你選)
    - `border-style: solid`
    
:::info 
CSS有太多種，有時候你想改你要用的東西，就直接用關鍵字搜尋，或是直接到[w3school](https://www.w3schools.com/cssref/pr_background-color.asp)改但常見的`font-size, font-family, width` 等等要記得就好。 
:::
    
###### tags: `前端程式設計`

    
