---
# System prepended metadata

title: 【Day5】基礎HTML/CSS

---


# HTML
## 常用標籤
```htmlmixed
粗體 <b></b> 
斜體 <i></i>
標題(由大至小) <h1></h1>、<h2></h2>、<h3></h3>...以此類推
內文 <p></p>
換行 <br>
圖像 <img src="">
連結 <a href=""></a>
```
快捷鍵:選取標籤字按tab鍵出現<>節省時間與麻煩

其餘標籤、屬性可查詢「[html tag](https://www.w3schools.com/tags/tag_html.asp)」

## 結構與層級
- 群組化：使呈現的東西好移動或修改
- 自動排列清單
  - 語法
  ```htmlmixed=
  <ol>
      <li>項目</li>
      <li>項目</li>
      <li>項目</li>
  </ol>
  ```
  - 導覽列應用範例 (division分割)
  ```htmlmixed=
    <div>
        <ul>
          <li>首頁</li>
          <li>簡介</li>
          <li>作品</li>
          <li>聯絡方式</li> 
        </ul>
    </div>
    ```
    補充：
    ol = orderlist，有編號的排序清單
    ul = unorderlist，不加編號的排序清單
    div為不具備任何屬性的分隔標籤，塞任何東西都是預設的
## 調整外觀、顏色與框線
- 更改字體顏色
  - 語法
    ```htmlmixed=
    <h1>標題字</h1>
    <h1 style="color: red;">紅標題字</h1>
    ```
  - 呈現
  ![](https://hackmd.io/_uploads/SyIk5m5t2.png)
- 調整間距
  - 語法
    ```htmlmixed=
    <h1 style="color: red;">紅標題字</h1>
    <h1 style="color: red;letter-spacing: 10px">10px間隔的紅標題字</h1>
    ```
  - 呈現
  ![](https://hackmd.io/_uploads/H1leiQ9F2.png)
- 添加框線、背景顏色
  - 語法
    ```htmlmixed=
    <h1 style="border:solid 2px black; width:400px;height:300px;background-color:#ccc">標題字</h1>
    ```
  - 呈現
  ![](https://hackmd.io/_uploads/SyKo2mqKh.png)
- div標籤
  - 語法
    ```htmlmixed=
    <div style="font-size: 28px;font-weight: bold;">hello world!</div>
    ```
  - 呈現
  ![](https://hackmd.io/_uploads/r1M4A79K3.png)
# CSS
## 分開撰寫概念
由於在HTML中添加style會顯得較為混亂與不易管理，且若要用同個CSS，必須打兩次，因此在網頁作業中偏好將style分開來寫。
## class
- 調整對應元素之顏色
  - 語法
    - HTML
        ```htmlmixed=
        <h1 class="redtext">標題</h1>
        <h1 class="redtext">標題</h1>
        <h1>標題</h1>
        <h1>標題</h1>
        ```  
    - CSS
        ```css=
        h1{
          color:blue;
        }
        .redtext{
          color:red;
          font-size:12px;
        }
        ```
  - 呈現
  ![](https://hackmd.io/_uploads/B1yqQS9t2.png)
- 利用div標籤--->按鈕
  - 語法
    - HTML
    ```htmlmixed=
    <div class="button">第一個按鈕</div>
    <div class="button">第二個按鈕</div>
    <div class="button black_button">第三個按鈕</div>
    ```
    - CSS
    ```css=
    .button{
      display: inline-block;
      border: solid 1px black;
      border-radius: 5px;
  
      padding: 10px;
      padding-left: 20px;
      padding-right: 20px;
  
      font-family: 微軟正黑體;
    }
    .black_button{
      background-color: black;
      color: white;
    }
    ```
  - 呈現
  ![](https://hackmd.io/_uploads/HyJWuBqY2.png)
  
  特殊性質補充：在疊加樣式的情況下，若後面class內的樣式和前者重複，則後者將蓋掉前者。
 ## id
 - 特色
 用來標示網頁獨一無二的元素，只能有一個，
 因為之後的id將全被忽略，透過JS操作某組樣式，只有第一組會被更改。
 - 調整對應元素之顏色
   - 語法
     - HTML
     ```htmlmixed=
     <div id="sp_text">id存取</div>
     ```
     - CSS
     ```css=
     #sp_text{
       color: blue;
     }
     ```
   - 呈現
   ![](https://hackmd.io/_uploads/HJNp3H9tn.png)
## 顯示方式
- display
  - 預設為block
  特性:連續給時會換行
  ![](https://hackmd.io/_uploads/rJzAlvCYn.png)
  - none
  全消失
  - inline/inline-block差異(margin)
    - inline
    只能調整左右距
    ![](https://hackmd.io/_uploads/rJEsbvCKn.png)
    - inline-block
    可調整元素與外面距離(上下左右皆可，ex:margin-top: 10px)
    ![](https://hackmd.io/_uploads/SkRRZvAth.png)
  - inline、inline-block與block差異(border)
    - inline、inline-block
    與字緊貼
    ![](https://hackmd.io/_uploads/S17lEPRth.png)
    - block
    整個撐滿
    ![](https://hackmd.io/_uploads/rkGmNv0F2.png)
- 仿hahow導覽列練習
  補充：挑選配色可查詢「[color picker](https://www.webfx.com/web-design/color-picker/)」
  - 程式碼
    - HTML
    ```htmlmixed=
    <ul class="nav_area">
    <li class="button">課程簡介</li>
    <li class="button">預計單元</li>
    <li class="button">常見問題</li>
    <li class="button">留言發問</li>
    </ul>
    ```
    - CSS
    ```css=
    .button{
      display: inline-block;
      
      padding: 10px;
      padding-left: 30px;
      padding-right: 30px;
      background-color: #33bbae;
      
      border-bottom: solid 7px #53e5d6;
      
      font-family: 微軟正黑體;
      font-weight: bold;
      letter-spacing: 1px;
      color: white;
    }
    .nav_area{
      background-color: #33bbae;
    }
    ```
  - 呈現
  ![](https://hackmd.io/_uploads/SkQdqwAYh.png)
## 元素位置
- 定位方式
改變top(上距)、bottom(下距)、left(左距)、right(右距)
預設為static
  - 相對定位
    - static(預設排列位置)
    自動排列下來，無法調整位置
    - relative(相對預設排列位置)
    自動排列下來，且可調整偏移
  - 絕對定位
    - absolute(絕對上層位置)
    可絕對定位
    - fixed(絕對視窗位置)
    固定在視窗特定位置，無論如何捲動都不會動
- 實作練習
  - 程式碼
    - HTML
    ```htmlmixed=
    <h3>CSS定位方式</h3>
    <div class="static">static自動排列下來，無法調整位置</div>
    <div class="relative">relative自動排列下來，且可調整偏移(左距30px)</div>
    <div class="absolute">absolute可絕對定位(上距50px、右距50px)</div>
    <div class="fixed">fixed固定在視窗特定位置，無論如何捲動都不會動(上距200px、右距50px)</div>
    ```
    - CSS
    ```css=
    body{
      height: 2000px;
    }
    .static{
      position: static;
    }
    .relative{
      position: relative;
      left: 30px;
    }
    .absolute{
      position: absolute;
      right: 50px;
      top: 50px;
    }
    .fixed{
      position: fixed;
      right: 50px;
      top: 200px;
    }
    ```
    快捷鍵：div.class名稱--->按tab鍵
  - 呈現
  1. 移動前
  ![](https://hackmd.io/_uploads/By5jPd0F3.png)
  2. 移動後
  ![](https://hackmd.io/_uploads/HJOaDuCYn.png)
- 將absolute在特定元素中定位(放到另一個div內)
  absolute特性：只針對可定位的上層元素做調整---relative、absolute、fixed，static則無法
## 內外間隔
- 概念
  - padding內距
  用來調整內部東西與框線距離
  - margin外距
  用來調整整個元素與外部所有元素(ex:子元素與父元素、相鄰子元素間...)的距離
- 實作練習
  1. 利用div標籤觀察內外距
    - 程式碼
      - HTML
      ```htmlmixed=
      <div class="outer">
        <div class="inner">
          一些文字
        </div>
        <div class="inner">
          一些文字
        </div>
      </div>
      ```
      - CSS
      ```css=
      .outer{
        display: inline-block;
        border: solid 2px black;
        width: 400px;
        height: 300px;
      }
      .inner{
        display: inline-block;
        border: solid 2px black;
        padding: 10px;
        padding-left: 30px;
        padding-right: 30px;
        
        margin-left: 40px;
        margin-top: 20px;
      }
      ```
    - 呈現
    ![](https://hackmd.io/_uploads/r1cKGt0tn.png)

  2. 導覽列製作
    - 程式碼
      - HTML
      ```htmlmixed=
      <ul class="outer">
        <li class="inner">
          項目清單
        </li>
        <li class="inner">
          項目清單
        </li>
        <li class="inner">
          項目清單
        </li>
        <li class="inner">
          項目清單
        </li>
      </ul>
      ```
      - CSS
      ```css=
      .outer{
        display: inline-block;
        border: solid 2px black;
        width: 400px;
        height: 300px;
      }
      .inner{
        display: block;
        border: solid 2px black;
        padding: 10px;
        padding-left: 30px;
        padding-right: 30px;
        
        margin-top: 10px;
        margin-right: 50px;
      }
      ```
    - 呈現
    ![](https://hackmd.io/_uploads/SyInNFCK3.png)
## 字體變化&span
- 字體性質
  1. 種類 font-family
  2. 大小 font-size
  3. 顏色 color
  4. 粗細 font-weight
  5. 間距 letter-spacing
  6. 行距 line-height
- 實作練習觀察字體變化
  - 程式碼
    - HTML
    ```htmlmixed=
    <div class="fdemo_1">font-family字體種類</div>
    <div class="fdemo_2">font-size字體大小</div>
    <div class="fdemo_3">color字體顏色</div>
    <div class="fdemo_4">font-weight字體粗細</div>
    <div class="fdemo_5">letter-spacing字體間距</div>
    <div class="fdemo_6">line-height字體行距 <br>line-height字體行距 <br>line-height字體行距</div>
    ```
    - CSS
    ```css=
    .fdemo_1{
      font-family: 微軟正黑體;
    }
    .fdemo_2{
      font-size: 30px;
    }
    .fdemo_3{
      color: blue;
    }
    .fdemo_4{
      font-weight: 900;
    }
    .fdemo_5{
      letter-spacing: 10px;
    }
    .fdemo_6{
      line-height: 40px;
    }
    ```
  - 呈現
  ![](https://hackmd.io/_uploads/r1iMstRKn.png)
- span
  - 與div差異
  div顯示預設為block(同行);span預設則為inline(同排)
  - 實作練習
    - HTML
    ```htmlmixed=
    <p>文章練習文章練習文章練習，<span class="title">文章練習</span>文章練習文章練習文章練習文章練習文章練習。</p>
    ```
    - CSS
    ```css=
    .title{
      font-size: 30px;
      color: red;
      font-family: 微軟正黑體;
      letter-spacing: 10px;
      line-height: 50px;
      font-weight: 900;
    }
    ```
  - 呈現
  ![](https://hackmd.io/_uploads/BJn7AYRK2.png)

:::warning
內容主要整理自「動畫互動網頁程式入門 (HTML/CSS/JS)」課程，網址：https://hahow.in/courses/56189df9df7b3d0b005c6639/discussions?item=5a1e1745a2c4b000589dd21d
:::