---
# System prepended metadata

title: HTML 超文本標記語言

---

# HTML 超文本標記語言

## 什麼是HTML
HTML（HyperText Markup Language 超文本標記語言）是一種用於建立和結構化網頁內容的標記語言。它由一系列標籤（tag）組成，每個標籤代表著不同的元素或內容，如文本、圖片、鏈接等。HTML是網頁的基本骨架，描述了網頁的結構和內容，並通過瀏覽器解釋和呈現成可視化的網頁。

## 如何創建HTML文件
鼠標右鍵 -> 新增文字文件 -> 更改檔案類型為.html
* 如果創建完HTML文件後依然是文字文件格式，需要將系統中隱藏已知文件類型取消勾選

![image](https://hackmd.io/_uploads/HkMBEPfjp.png =40%x)![image](https://hackmd.io/_uploads/ryIGVPfjT.png =60%x)


* 可以用中文命名(不推薦)
* 不允許使用特殊符號
* HTML文件名字推薦使用小寫
* 如果是多個單字創建的文件名，每個單詞首字母大寫 ex:HelloWorld

## HTML標籤
標籤是HTML最基本的單位，也是重要的組成部分，通常用 **"<"** 和 **">"** 括起來

標籤有兩種形式:
1. 成對標籤
```html=
<p>內容</p>
```

2. 不成對標籤
```html=
<hr />
```
### HTML標籤大小寫問題
標籤大小寫無關，<body />和<BODY />視為同樣
注意:HTML標籤推薦使小寫
    
### HTML標籤屬性
1. HTML屬性一般都出現在HTML標籤中，是HTML標籤的一部分
2. 標籤可以有屬性，包含了額外訊息，屬性一定要在雙引號中，標籤可以有多個屬性
3. 常見屬性名和屬性值成對出現
    `<標籤名 屬性名1="屬性值" 屬性名2="屬性值"></標籤名>`
    
### HTML注釋
* 格式 : `<!--我是HTML的注釋-->`
* 方便其他工程師了解此代碼，且以後對程式的更動修改較為輕鬆
* 注釋的內容不會被執行

## HTML的代碼格式
* 空白鍵和換行在執行時都不會起作用，所以在編寫HTML文件時，可以使用且必須遵守代碼排版和縮進，以便於閱覽修改
* 任何的空白鍵、換行、TAB都只會被視為一個空格

## HTML中的特殊符號
這些特殊符號無法直接輸入顯示在瀏覽器上，會被誤認為是代碼當中的一部分
```html=
&nbsp; 空格
&gt; >
&lt; <
```

## HTML的主結構
```html=
<!DOCTYPE html><!--申明標籤-->
<html>
<!--頭部標籤-->
    <head>
    </head>
<!--主體標籤-->
    <body>
    </body>
</html>
```
1. 最上面聲明`<!DOCTYPE html>`
    * 聲明是文件中的第一部分，位於文件最上面
    * 該標籤是告訴瀏覽器所使用的HTML規範
2. 以<html>開始，以</html>結束，中間包含頭部標籤<head></head>及主體標籤<body></body>

### <head>標籤中常用的標籤
```html=
<head lang="en">
    <!--
        lang是language意思，搜尋引擎不會判斷語言，必須讓它告知
    -->
<meta charset="UTF-8">
    <!--設置頁面字符集-->
<title>我是標題</title>
    <!--設置頁面標題-->
<meta http-equiv="refresh" content="3;url=https://google.com">
    <!--
        http-equiv告知瀏覽器行為
        refresh刷新頁面
        content設置內容
    -->
<meta name="keywords" content="first web," />
    <!--設置網站關鍵字-->
<meta name="description" content="my first web">
    <!--設置網站描述-->
    <!--
       name告知瀏覽器內容
    -->
<link rel="icon" type="" href="" />
    <!--載入標題icon-->
<link rel="stylesheet" type="text/css" href="" />
    <!--載入css樣式-->
    <!--
        rel表示文件與被連接文件的關係
        type被連接文件的類型
        href被連接文件的地址
    -->
<style>
    body{
        background-color:tomato;
    }    
</style>
    <!--載入css樣式-->
<script>
    alert('提醒視窗')    
</script>
    <!--載入JS樣式-->
```

### <body>標籤中常用的標籤
```html=
<p></p> 
    <!--段落標籤，獨佔一行-->
    
<b></b> 
<strong></strong> 
    <!--粗體標籤-->
    
<i></i>     
<em></em> 
    <!--斜體標籤-->
    
<br/> 
    <!--換行標籤--> 
<hr/> 
    <!--水平線標籤-->   
<u></u> 
    <!--底線標籤-->   
<del></del> 
    <!--刪除線標籤-->   
<hx> 
    <!--標題標籤 x=1~6-->   
<bdo></bdo> 
    <!--覆蓋默認的文件方向 dir="ltr" or "rtl"-->
<sup></sup> 
    <!--上標-->  
<sub></sub> 
    <!--下標-->  
<mark></mark>
    <!--標記內容-->

<details>
    <summary>電影院</summary>
    <p>電影片</p>
    <p>票價</p>
    <p>150</p>
</details>
    <!--
    detail可以隱藏或是展示補充內容
    summary可以為detail定義標題
    -->

<dialog></dialog> 
    <!--定義對話視窗 open="true"-->
<pre></pre>
    <!--原格式輸出-->
    
<figure>
    <img src="xxx.gif" alt="figure標籤" title="figure標籤" />
    <figcaption>figure的標題</figcaption>
</figure>
    <!--figure用於對元素進行組合，多用於圖片描述-->
```

### 布局標籤
```html=
<header></header>
    <!--頭部標籤--> 
<footer></footer> 
    <!--底部標籤--> 
<nav></nav>
    <!--導航標籤--> 
<aside></aside>
    <!--側邊標籤--> 
<span></span>
    <!--行內標籤--> 
<address></address>
    <!--地址標籤--> 
<article></article>
    <!--文章標籤--> 
    
<div></div>
    <!--區塊標籤 HTML4--> 
<section></section>
    <!--區塊標籤 HTML5--> 
```
    
### 列表標籤
```html=
<ul>
    <li>我是無序列表</li>
    <li>我是無序列表</li>
</ul>
    <!--
    。我是無序列表
    。我是無序列表
    -->
    
<ol>
    <li>我是有序列表</li>
    <li>我是有序列表</li>
</ol>
    <!--
    1.我是有序列表
    2.我是有序列表
    -->
    
<dl>
    <dt>我是列表項目</dt>
    <dd>我是項目的描述</dd>
</dl>
    <!--
    我是列表項目
    我是項目的描述
    -->
```
    
### 超連結標籤
```html=
<a href="https://www.google.com.tw/" target="_blank">google網站</a>
    <!--
    相對路徑:
    相對路徑是相對於當前文件所在位置的一種指定方式
    "./"：當前目錄
    "../"：上一層目錄
    "images/picture.jpg"：當前目錄下的 images 子目錄中的 picture.jpg
    "www.google.com.tw":網址的相對路徑

    絕對路徑:
    絕對路徑是從文件系統的根目錄（或網站的根目錄）開始的完整路徑
    "/home/user/images/picture.jpg"：文件系統的絕對路徑
    "https://www.example.com/images/picture.jpg"：網站的絕對路徑

    target = "":定義網頁打開的方式
        _self(默認):當前視窗打開文件
        _blank:在新視窗打開文件
    -->
```

* 錨點
    通常用於在同一頁面內部進行快速跳轉，使用戶可以直接跳轉到頁面中的特定位置
    
1. 使用 id 屬性為目標元素指定一個唯一名稱。
2. 並在 href 屬性中指定目標元素的 #id
```html=
<a href="#destination">點擊到達的地方</a>
<a id="destination">到達的地方</a>
```

### 多媒體標籤
```html=
<img />
    <!--
    src="要引入圖片的地址"
    width="設置圖片的寬度"
    height="設置圖片的高度"
    alt="當圖片無法載入時的文字訊息"
    title="設置標題"
    -->
    
<audio controls>
    <source src=""/>
</audio>
    <!--
    src="要引入音源的地址"
    controls 為音頻元素提供一個默認的控制面板
    -->
    
<video controls>
    <source src=""/>
</video>
    <!--
    src="要引入音源的地址"
    poster="影片在播放前用於顯示的圖片"
    controls 為音頻元素提供一個默認的控制面板
    -->
    
<embed />
    <!--
     src="要引入圖片的地址"
    -->
```
    
### 表格標籤
```html=
<table>
    
    <!--
    <table>標籤常用屬性
    width:表格寬度
    height:表格高度
    align:水平擺放位置(left, center, right)
    background:背景圖片
    bgcolor:背景顏色
    border:表格邊框的寬度
    bordercolor:邊框的顏色
    cellspacing:表格內容與表格邊框之間的距離
    cellpadding:相鄰表格之間的空白距離
    -->
    
    <caption>自我介紹</caption> <!--表格標題-->
    <tr> <!--表格列-->
        
        <!--
        <tr>標籤常用屬性
        height:表格高度
        align:水平擺放位置(left, center, right)
        valign:垂直擺放位置(top, middle, bottom)
        bgcolor:背景顏色
        -->
        
        <td>姓名</td> <!--單元格-->
        
            <!--
            <td>標籤常用屬性
            height:表格高度
            align:水平擺放位置(left, center, right)
            valign:垂直擺放位置(top, middle, bottom)
            bgcolor:背景顏色
            colspan:設置單元格跨列
            rowspan:設置單元格跨行
            -->
        
        <td></td>
        <td>性別</td>
        <td></td>
        <td rowspan="2">照片</td>
    </tr>
   <tr>
        <td>出生地</td>
        <td></td>
        <td>興趣</td>
        <td></td>
    </tr>
    <tr>
        <td>自我介紹</td>
        <td colspan="4"></td>
    </tr>
    <tr>
        <td>文化程度</td>
        <td colspan="4"></td>
</table>
```
<table>
    <caption><h2>自我介紹</h2></caption>
    <tr>
        <td>姓名</td>
        <td></td>
        <td>性別</td>
        <td></td>
        <td rowspan="2">照片</td>
    </tr>
    <tr>
        <td>出生地</td>
        <td></td>
        <td>興趣</td>
        <td></td>
    </tr>
    <tr>
        <td>自我介紹</td>
        <td colspan="4"></td>
    </tr>
    <tr>
        <td>文化程度</td>
        <td colspan="4"></td>
    </tr>
</table>
    
上述程式碼對照樣式

---

對表格標籤進行分組
```html=
<table>
    <thead> 
        <!--表格頭部-->
        <tr> 
            <th>編號</th> <!--表頭-->
            <th>用戶名</th>
            <th>年齡</th>
            <th>性別</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody> 
        <!--表格主體-->
        <tr align="center">
            <td>1</td>
            <td>admin1</td>
            <td>18</td>
            <td>男</td>
            <td>
                <a href="">刪除</a>|
                <a href="">修改</a>
            </td>
        </tr>
        <tr align="center">
            <td>2</td>
            <td>admin2</td>
            <td>19</td>
            <td>男</td>
            <td>
                <a href="">刪除</a>|
                <a href="">修改</a>
            </td>
        </tr>
        <tr align="center">
            <td>3</td>
            <td>admin3</td>
            <td>20</td>
            <td>女</td>
            <td>
                <a href="">刪除</a>|
                <a href="">修改</a>
            </td>
        </tr>
    </tbody>
    <tfoot> 
        <!--表格尾部-->
        <tr>
            <td colspan="5" align="right">
                <a href="">首頁</a>
                <a href="">下一頁</a>
                <a href="">上一頁</a>
            </td>
        </tr>
    </tfoot>
</table>
```
<table>
    <thead>
        <tr> 
            <th>編號</th>
            <th>用戶名</th>
            <th>年齡</th>
            <th>性別</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr align="center">
            <td>1</td>
            <td>admin1</td>
            <td>18</td>
            <td>男</td>
            <td>
                <a href="">刪除</a>|
                <a href="">修改</a>
            </td>
        </tr>
        <tr align="center">
            <td>2</td>
            <td>admin2</td>
            <td>19</td>
            <td>男</td>
            <td>
                <a href="">刪除</a>|
                <a href="">修改</a>
            </td>
        </tr>
        <tr align="center">
            <td>3</td>
            <td>admin3</td>
            <td>20</td>
            <td>女</td>
            <td>
                <a href="">刪除</a>|
                <a href="">修改</a>
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="5" align="right">
                <a href="">首頁</a>
                <a href="">下一頁</a>
                <a href="">上一頁</a>
            </td>
        </tr>
    </tfoot>
</table>
    
上述程式碼對照樣式


---

### 表單標籤
```html=
<form action="" method="post">
    
    <!--
        <form>標籤用於用戶輸入創建表單
        action:輸入數據被傳送到的地方
        method:數據傳送的方式
            get:傳送數據量少，傳遞的資訊會顯示在網址上
            post:傳送數據量多，不顯示在網址上，更適合用於傳遞敏感信息
    -->
    
    用戶名:<input type="text" name="username" value="" /> 
    <!--text:形式為文本-->
    
    <!--
        <input>標籤定義需要使用的表單項
        name:表單的名稱
        value:表單的值
        type:輸入的顯示方式(輸入型、點擊型、選擇型)
    -->
    
    <br>
    密碼:<input type="password" name="pwd" value="" /> 
    <!--password:形式為密碼-->
    
    <br>
    <input type="submit" value="登錄" /> 
    <!--submit:提交按鈕-->
    
    <br>
    <input type="radio" name="sex" id="male" value="0" checked /> 
    <!--
        radio:形式為單選
        name:名稱要保持一致，才能產生排斥
        checked:默認選中
    -->
    
    <label for="male">男</label>
    <!--
        <label>標籤可以將其內容與表單元素進行關聯，
        使得用戶點擊文本時即選中，提高了表單的可點擊區域
    -->
    
    <label>
        <input type="radio" name="sex" value="1" />女
    </label>
    <br>
    愛好:
    <input type="checkbox" name="hobby[]" value="1" />吃 
    <!--
        checkbox:複選
        []:代表一組數據
    -->
    
    <input type="checkbox" name="hobby[]" value="2" />喝
    <input type="checkbox" name="hobby[]" value="3" />玩
    <input type="checkbox" name="hobby[]" value="4" />樂
    <br>
    上傳頭貼<input type="file" name="pic" id="" />
    <!--
        file:上傳文件
        如果表單出現file需要做兩件事
            1.表單的傳輸方式必須是post
            2.更改表單傳輸編碼方式，在form中增加屬性enctype="multipart/form-data"
    -->
    
    <input type="hidden" name="hello" value="world">
    <!--hidden隱藏內容傳輸到server-->
    
    <input type="reset" value="重置">
    <!--reset重置輸入的內容-->
    
    電子郵件:<input type="email" name="email" id=""><br>
    <!--email電子郵件驗證-->
    
    URL:<input type="url" name="url" id=""><br>
    <!--url網址驗證-->
    
    地址: <textarea name="address" cols="30" rows="10"></textarea>
    <!--<textarea>可輸入多行文本-->
    
    <select name="xueli" id="">
        <option value="select">--請選擇--</option>
        <option value="1">小學</option>
        <option value="2">國中</option>
        <option value="3">高中</option>
    </select>
    <!--
        <select>下拉列表
        selected:默認選中
    -->
    
</form>
```
![image](https://hackmd.io/_uploads/SyAOTBPn6.png)

上述程式碼對照樣式
    
---
    
對表單標籤進行分組
```html=
<fieldset>
    <!--<fieldset>將表單進行分組-->
    
    <legend><b>personal info</b></legend>
    <!--<legend>為fieldset定義標題-->
    
    姓名
    <input type="text" name="name" id="">
    性別
    <input type="radio" name="gender" id="">男
    <input type="radio" name="gender" id="">女
    <br>
    年齡
    <input type="text" name="age" id="">
    電話
    <input type="text" name="tel" id="">
    
    <select name="select" id="">
        <option value="">--請選擇--</option>
        <optgroup label="服裝">
            <option value="">上衣</option>
            <option value="">短褲</option>
            <option value="">背心</option>
        </optgroup>
        <optgroup label="電子用品">
            <option value="">電腦</option>
            <option value="">處理器</option>
            <option value="">顯示卡</option>
        </optgroup>
    </select>
</fieldset>
```
![image](https://hackmd.io/_uploads/HkyC6BP26.png)
    
上述程式碼對照樣式


---
    
表單標籤中常用的屬性
```html=
readonly:唯讀
disable:無法輸入、點擊、選擇
selected:默認選中
autofocus:自動聚焦輸入表單
placeholder:提示輸入
required:必須填入資料
min:用於設定表單最小值(range, number)
max:用於設定表單最大值(range, number)
multiple:設定允許多個文件
pattern:用於自定義驗證規則(須配合正則語法)
step:設定兩個數值之間的間隔
novalidate:取消所有的驗證規則
formaction:修改當前的表單提交頁面
formmethod:修改當前的表單提交方式
formenctype:修改當前的表單提交編碼類型
tabindex:切換索引屬性
```
    
## HTML全局屬性

```html=
contentEditible:內容可編輯屬性
designMode:頁面可編輯屬性
```
    
# CSS 層疊樣式表

## 什麼是CSS
CSS(Cascading Style Sheets)是一種用於描述HTML外觀和格式的樣式表語言，義了文檔的呈現方式，包括元素的大小、顏色、字體、間距等屬性，以及如何將這些元素排列和定位

1. CSS的基本語法
    * CSS定義:選擇符、屬性、屬性值
    * 格式 `p:{color:yellow}`
    * 推薦使用小寫
    * 屬性和值之間用冒號(:)分開，多個屬性之間用分號(;)隔開
2. CSS中的注釋
    `/*書寫注釋的內容*/`
    
## 放置CSS的方式
    
1. 內聯樣式表（Inline Styles）
    * 在HTML元素的style屬性中直接嵌入CSS樣式
    `<p style=""></p>`
2. 內部樣式表（Internal/Embedded Styles）
    * 可以在標籤中加入ID屬性
```css=
<!DOCTYPE html>
<html>
    <head>
        <style>
            #ID屬性名{
                
            }
        </style>
    </head>
</html>
```
3. 外部樣式表（External Styles）
    * 將CSS代碼保存在單獨的外部文件中，然後在HTML文檔中使用<link>標籤將其引入
    * 也可以透過`<style>
    @import "CSS文件地址"
    </style>`
    * W3C推薦使用此方法，一般瀏覽器有緩存功能所以用戶不用每次都下載CSS文件，並且此方法較節省頻寬
```css=
p {
  color: red;
  font-size: 20px;
} 
```
    
```html=
<!DOCTYPE html>
<html>
    <head>
      <link rel="stylesheet" type="text/css" href="文件地址">
    </head>
</html>
```
4. 多重CSS疊加
    依照後定義的優先，最高優先級的是內聯樣式表，內部樣式表、外部樣式表以最後定義的為準
    
## CSS選擇器
### HTML中的關係
![image](https://hackmd.io/_uploads/S1pPhdeaT.png)

### 基本選擇器
* **類選擇器(常用)**
    * 在CSS中使用點(.)來查找，類選擇器可以有多個屬性值，使用空格分開
    ```css=
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <style>
                .one{
                    background-color: bisque;
                }
                .two{
                    font-size: 300px;
                }
            </style>
        </head>
        <body>
            <div class="one">test one</div>
            <div class="one two">test two</div>
        </body>
    </html>
    ```
* ID選擇器
    * 在CSS中用#來查找
    ```css=
    <style>
        #header {
            font-size: 24px;
        }
    </style>
    ```
* 通用選擇器
    * 在CSS中用*，所有標籤都會被選擇
    ```css=
    <style>
        * {
            font-size: 24px;
        }
    </style>
    ```
* 元素選擇器
    * 在CSS中用標籤來查找，所有該標籤都會被選擇
    ```css=
    <style>
        div {
            font-size: 24px;
        }
    </style>
    ```
* 群組選擇器
    * 將多個選擇器組合在一起，以同一樣式來應用，用逗號(,)分開
    ```css=
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <style>
                .one, .two, div {
                    background-color: bisque;
        }
            </style>
        </head>
        <body>
            <div class="one">test one</div>
            <div class="two">test two</div>
            <div >test div</div>
        </body>
    </html>
    ```
    ![image](https://hackmd.io/_uploads/SJrjFdx6a.png)

* 後代選擇器
    * 選擇某元素的後代元素，以空格分開
    ```css=
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <style>
            div p {
            background-color: bisque;
        }
    </style>
    </head>
        <body>
            
            <!--父子關係-->
            <div>
                <p>test one</p>
            </div>
            
            <!--子孫關係-->
            <div>
                <section>
                    <p>test two</p>
                </section>
            </div>
    </body>
    </html>
    ```
    ![image](https://hackmd.io/_uploads/ByM9Fdgpa.png)

* 子代選擇器
    * 選擇某元素的直接子元素，使用大於(>)符號
    ```css=
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <style>
                div > p {
                background-color: bisque;
        }
            </style>
        </head>
        <body>
            
            <!--父子關係-->
            <div>
                <p>test one</p>
            </div>
            
            <!--子孫關係-->
            <div>
                <section>
                    <p>test two</p>
                </section>
            </div>
        </body>
    </html>
    ``` 
    ![image](https://hackmd.io/_uploads/By2wFOgTa.png)
    
* 鄰接選擇器
    * 選擇某元素的下一個兄弟元素，使用加號(+)
    ```css=
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <style>
                div + p {
                    background-color: bisque;
    }
            </style>
        </head>
        <body>
            <div>我是div標籤</div>
            <p>我是div後面的p標籤</p>
        </body>
    </html>
    ```
    ![image](https://hackmd.io/_uploads/HJXIFOxTT.png)
* 兄弟選擇器
    * 選擇指定元素之後的所有相同兄弟的元素，使用波浪符(~)
    ```css=
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <style>
                div ~ p {
                    background-color: bisque;
                }
            </style>
        </head>
        <body>
            
            <!--兄弟關係-->
            <div>我是div標籤</div>
            <p>我是div後面的p標籤</p>
            <p>我是div後面的p標籤</p>

            <!--父子關係-->
            <div>
                <p>我是p標籤</p>
            </div>
        </body>
    </html>
    ```
    ![image](https://hackmd.io/_uploads/HyQ80ux66.png)

### 屬性選擇器
* 根據屬姓名或者屬性值來查找某個標籤
* E element元素標籤 | ATT attribute屬性 | VAL value屬性值
* 標籤[屬性]
    
1. E[ATT]匹配所有具有ATT的屬性，不考慮屬性值
```css=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            div[class] {
                background-color: bisque;
            }
        </style>
    </head>
    <body>
        <div class="one">我是第一個div標籤</div>
        <div class="two">我是第二個div標籤</div>
        <div id="three">我是第三個div標籤</div>
        <a href="" class="four">我是第四個a標籤</a>
    </body>
</html>
 ```
![image](https://hackmd.io/_uploads/ByttohgpT.png)

2. E[ATT = VAL]匹配所有具有ATT=VAL的E元素
```css=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            div[class="two"] {
                background-color: bisque;
            }
        </style>
    </head>
    <body>
        <div class="one">我是第一個div標籤</div>
        <div class="two">我是第二個div標籤</div>
        <div id="three">我是第三個div標籤</div>
        <a href="" class="four">我是第四個a標籤</a>
    </body>
</html>
 ```
![image](https://hackmd.io/_uploads/BkNJa3xpa.png)
    
3. E[ATT ~= VAL]匹配所有具有ATT屬性有多個空格分隔的值，其中一個等於VAL的元素
```css=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            div[class~="is"] {
                background-color: bisque;
            }
        </style>
    </head>
    <body>
        <div class="this is one">我是第一個div標籤</div>
        <div class="this is two">我是第二個div標籤</div>
        <div id="this is three">我是第三個div標籤</div>
        <a href="" class="four">我是第四個a標籤</a>
    </body>
</html>
 ```
![image](https://hackmd.io/_uploads/SkU7R2eT6.png)
4. E[ATT |= VAL]匹配所有具有ATT屬性有多個分隔符的值，其中一個值以VAL-開頭的元素
```css=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            div[class|="is"] {
                background-color: bisque;
            }
        </style>
    </head>
    <body>
        <div class="is-one">我是第一個div標籤</div>
        <div class="this-is-two">我是第二個div標籤</div>
        <div id="this is three">我是第三個div標籤</div>
        <a href="" class="four">我是第四個a標籤</a>
    </body>
</html>    
```
![image](https://hackmd.io/_uploads/rynBxaeT6.png)
5. E[ATT ^= VAL]匹配所有具有ATT屬性以VAL開頭
6. E[ATT $= VAL]匹配所有具有ATT屬性以VAL結尾
7. E[ATT *= VAL]匹配所有具有ATT屬性有VAL存在

### 偽元素選擇器
****在CSS中，偽元素選擇器通常以雙冒號(::)開頭****
    
1. E:first-line E元素的第一行
```css=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            div::first-line {
                background-color: bisque;
            }
        </style>
    </head>
    <body>
        <div class="is-one">我是第一個div標籤<br>換行之後就不會變色了</div>
    </body>
</html>
```
![image](https://hackmd.io/_uploads/BkCho6l66.png)
    
2. E:first-letter E元素的第一個字
```css=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            div::first-letter {
                font-size: 50px;
            }
        </style>
    </head>
    <body>
        <div class="is-one">我是第一個div標籤<br>換行之後就不會變色了</div>
    </body>
</html>
```
![image](https://hackmd.io/_uploads/BJgIjFQDaa.png)

3. E:before E元素的內容之前，需配合content來使用
```css=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            div::before {
                content: '我是在div元素之前的字';
                font-size: 50px;
            }
        </style>
    </head>
    <body>
        <div>我是第一個div標籤</div>
    </body>
</html>
```    
![image](https://hackmd.io/_uploads/rkWlimDaa.png)
    
4. E:after E元素的內容之後，需配合content來使用
```css=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            div::after {
                content: '我是在div元素之後的字';
                font-size: 50px;
            }
        </style>
    </head>
    <body>
        <div>我是第一個div標籤</div>
    </body>
</html>
```    
![image](https://hackmd.io/_uploads/rJJFiQDa6.png)
    
### 結構偽類選擇器
**在CSS中，偽類選擇器通常以冒號(:)開頭**
1. :root將樣式綁定到頁面根元素
```html=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            :root{
                /*聲明變量*/
                --bgColor:tomato;
                --fontColor:#000;
            }
            body{
                /*var() 使用變量*/
                background-color: var(--bgColor);
            }
            p{
                color: var(--fontColor);
            }
        </style>
    </head>
    <body>
        <div>我是第一個div標籤</div>
    </body>
</html>
```
![image](https://hackmd.io/_uploads/H1Z4SEvpa.png)

2. E:not() 對某個元素使用樣式，但是排除此元素下的某個結構元素
```html=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            li:not(.no){
                background-color: bisque;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>我是無序列表</li>
            <li class="no">我是無序列表</li>
            <li>我是無序列表</li>
        </ul>
    </body>
</html>
```
![image](https://hackmd.io/_uploads/BksbdNP6p.png)

3. E:empty 匹配所有為空的元素
```html=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            li:empty{
                background-color: bisque;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>我是無序列表</li>
            <li></li>
            <li>我是無序列表</li>
            <li></li>
            <li>我是無序列表</li>
            <li></li>
        </ul>
    </body>
</html>
```
![image](https://hackmd.io/_uploads/rybZY4v66.png)

4. :target 匹配到連結到的目標 
```html=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            :target{
                font-size: 30px;
                font-weight: bold;
                color: bisque;
            }
        </style>
    </head>
    <body>
        <a href="#james">James</a>
        <a href="#wendy">Wendy</a>
        <br>
        <a id="james">我是James</a>
        <a id="wendy">我是Wendy</a>
    </body>
</html>
```
![image](https://hackmd.io/_uploads/rkT3sED66.png)![image](https://hackmd.io/_uploads/HyuaoNPp6.png)
    
5. E:first-child 找到父元素中的第一個子元素
```html=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            li:first-child{
                background-color: bisque;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>我是有序列表1</li>
            <li>我是有序列表2</li>
            <li>我是有序列表3</li>
            <li>我是有序列表4</li>
        </ol>
    </body>
</html>
```
![image](https://hackmd.io/_uploads/B17C_sFTp.png)

6. E:last-child 找到父元素中的最後一個子元素
```html=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            li:last-child{
                background-color: bisque;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>我是有序列表1</li>
            <li>我是有序列表2</li>
            <li>我是有序列表3</li>
            <li>我是有序列表4</li>
        </ol>
    </body>
</html>
```
![image](https://hackmd.io/_uploads/BkTZtjKTa.png)

7. E:nth-child(n) 對指定子元素元素E設置樣式，E:nth-child(an+b)為循環樣式
```html=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            li:nth-child(3){
                background-color: bisque;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>我是有序列表1</li>
            <li>我是有序列表2</li>
            <li>我是有序列表3</li>
            <li>我是有序列表4</li>
        </ol>
    </body>
</html>
```
![image](https://hackmd.io/_uploads/Bk7Kcota6.png)

8. E:nth-last-child(n) 對倒數的指定子元素元素E設置樣式，E:nth-last-child(an+b)為循環樣式
```html=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            li:nth-last-child(3){
                background-color: bisque;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>我是有序列表1</li>
            <li>我是有序列表2</li>
            <li>我是有序列表3</li>
            <li>我是有序列表4</li>
        </ol>
    </body>
</html>
```
![image](https://hackmd.io/_uploads/HJaSoiK66.png)
    
9. E:nth-of-type(n) 僅匹配元素E的指定子元素
```html=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            li:nth-of-type(3){
                background-color: bisque;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>我是有序列表1</li>
            <li>我是有序列表2</li>
            <p>我<b>不是</b>有序列表</p>
            <li>我是有序列表3</li>
            <li>我是有序列表4</li>
        </ol>
    </body>
</html>
```
![image](https://hackmd.io/_uploads/rkTBCsKp6.png)

10. E:nth-last-of-type(n) 僅匹配元素E的倒數指定子元素
```html=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            li:nth-last-of-type(3){
                background-color: bisque;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>我是有序列表1</li>
            <li>我是有序列表2</li>
            <p>我<b>不是</b>有序列表</p>
            <li>我是有序列表3</li>
            <li>我是有序列表4</li>
        </ol>
    </body>
</html>
```
![image](https://hackmd.io/_uploads/SyiX1hFaa.png)

11. E:only-child 僅匹配父元素下只有唯一一個的子元素，且子元素恰為E元素
```html=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            p:only-child{
                background-color: bisque;
            }
        </style>
    </head>
    <body>
        
        <div>
            <!--只有這個會被選中-->
            <p>我是div的第一個p元素</p>
        </div>
        
        <div>
            <p>我是div的第一個p元素</p>
            <p>我是div的第二個p元素</p>
        </div>
        
        <div>
            <p>我是div的第一個p元素</p>
            <b>我是div的第二個b元素</b>
        </div>
    </body>
</html>
```
![image](https://hackmd.io/_uploads/BkkJM2FTT.png)

12. E:only-of-type僅匹配父元素下使用同種標籤的唯一一個子元素
```html=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            p:only-of-type{
                background-color: bisque;
            }
        </style>
    </head>
    <body>
        
        <div>
            <!--只有這個會被選中-->
            <p>我是div的第一個p元素</p>
        </div>
        
        <div>
            <!--因為不是唯一一個p元素-->
            <p>我是div的第一個p元素</p>
            <p>我是div的第二個p元素</p>
        </div>
        
        <div>
            <!--只有這個的p會被選中-->
            <p>我是div的第一個p元素</p>
            <b>我是div的第二個b元素</b>
        </div>
    </body>
</html>
```
![image](https://hackmd.io/_uploads/SktrNhFaa.png)

13. E:enabled 匹配表單中激活的元素(沒有diasble就會被選中)
```html=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            input:enabled{
                background-color: bisque;
            }
        </style>
    </head>
    <body>
        <form action="" method="get">
            <input type="text" value="admin">
            <br>
            <input readonly type="text" value="admin2">
            <br>
            <input disabled type="text" value="admin3">
            <br>
        </form> 
    </body>
</html>
```
![image](https://hackmd.io/_uploads/SyohP2ta6.png)
    
14. E:disabled 匹配表單中未激活的元素(有diasble就會被選中)
```html=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            input:disbled{
                background-color: bisque;
            }
        </style>
    </head>
    <body>
        <form action="" method="get">
            <input type="text" value="admin">
            <br>
            <input readonly type="text" value="admin2">
            <br>
            <input disabled type="text" value="admin3">
            <br>
        </form> 
    </body>
</html>
```
![image](https://hackmd.io/_uploads/S1ZGuhF66.png)
    
15. E:checked匹配表單中被選擇的radio或checkbox元素
```html=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            input[type=radio]:checked+label{
                font-size: 30px;
            }
            input[type=checkbox]:checked+label{
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <form action="" method="get">
            <input type="radio" name="sex" value="0" id="male"><label for="male">男</label>
            <input type="radio" name="sex" value="1" id="female"><label for="female">女</label>
            <input type="radio" name="sex" value="2" id="secret"><label for="secret">祕密</label>
            <hr>
            <input type="checkbox" name="skill[]" id="java"><label for="java">java</label>
            <input type="checkbox" name="skill[]" id="C#"><label for="C#">C#</label>
            <input type="checkbox" name="skill[]" id="python"><label for="python">python</label>
        </form> 
    </body>
</html>
```
![image](https://hackmd.io/_uploads/r173TnY66.png)

16. E:forcus匹配表單中被滑鼠點擊的項目，只對輸入域有效
```html=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            input:focus{
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <form action="" method="get">
            <input type="text" value="admin">
            <br>
            <input readonly type="text" value="admin2">
            <br>
            <input disabled type="text" value="admin3">
            <br>
        </form> 
    </body>
</html>
```
![image](https://hackmd.io/_uploads/rJTyepKaT.png)

17. ::selection 滑鼠反白選取的效果
```html=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            ::selection{
                background-color: bisque;
            }
        </style>
    </head>
    <body>
        <div>我是div標籤</div> 
    </body>
</html>
```
![image](https://hackmd.io/_uploads/r1Q6lTtap.png)

### 狀態偽類選擇器
1. :link 設置超連結a在未被訪問前的樣式
2. :visited 設置超連結a已經被訪問的樣式
3. :hover 設置元素在滑鼠旋停的樣式
4. :active 設置元素在被用戶激活的樣式
```html=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            :link{
                color: bisque;
            }
            :visited{
                color:blue;
            }
            :hover{
                color: green;
            }
            :active{
                color: gray;
            }
    </head>
    <body>
        <a href="https://google.com">去google</a> 
    </body>
</html>
```
![image](https://hackmd.io/_uploads/SkFyIysTp.png)![image](https://hackmd.io/_uploads/Hk5pHJiaT.png)![image](https://hackmd.io/_uploads/BJLAH1sap.png)
            
### 選擇器優先級
* !important為最高優先級(避免使用)
* 內聯樣式:優先級1000
* id選擇器:優先級100
* 類和偽類:優先級10
* 元素選擇器:優先級1
* 通配符選擇器:優先級0
            
當選擇器包含多種時，需要將多種選擇器優先級相加進行比較，若是一樣以放在最後面的為準

## CSS基本屬性

### color 字體顏色
* ColorName(顏色名稱)
* HEX(十六進制)
* rgb(紅, 綠, 藍)
* rgba(紅, 綠, 藍, 透明度)
* hsl(色相, 飽和度, 亮度)
* hsla(色相, 飽和度, 亮度, 透明度)
* transparent(透明色)
```html=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            .one{
                color:bisque;
            }
            .two{
                color: #00ff00;
            }
            .three{
                color: rgb(0, 255, 255)
            }
            .four{
                color: rgba(255, 0, 0, 0.5);
            }
            .five{
                color: hsl(180deg, 50%, 50%);
            }
            .six{
                color: hsla(180deg, 50%, 50%, 0.5);
            }
            .seven{
                color: transparent;
            }
        </style>
    </head>
    <body>
        <p class="one">我是顏色名稱</p>
        <p class="two">我是十六進制</p>
        <p class="three">我是RGB模式</p>
        <p class="four">我是RGBA模式</p>
        <p class="five">我是CSS3中新增HSL模式</p>
        <p class="six">我是CSS3中新增HSLA模式</p>
        <p class="seven">我是CSS3中透明色</p>
    </body>
</html>
```
![image](https://hackmd.io/_uploads/HyrBDxo6a.png)

### font-style 字體樣式
* normal 正常
* italic 斜體
```html=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            .font{
                font-style: italic;
            }
        </style>
    </head>
    <body>
        <p class="font">我是字體樣式</p>
    </body>
</html> 
```
![image](https://hackmd.io/_uploads/Bkw7Oxjpa.png)

### font-size 字體大小
PC端瀏覽器默認字體大小為16像素，最小支持12px
* 絕對單位
    * px 像素
    ```html=
    <!DOCTYPE html>
    <html lang="en">
    <head>
  x      <style>
            .one{
                font-size: 14px;
            }
        </style>
    </head>
    <body>
        <div class="one">我是div的標籤</div>
    </body>
    </html> 
    ```
    ![image](https://hackmd.io/_uploads/ByaUX5nTT.png)

* 相對單位
    * em 對於父類文本大小，如未設置就是相對於瀏覽器的大小
    ```html=
    <!DOCTYPE html>
    <html lang="en">
    <head>
  x      <style>
            .one{
                font-size: 14px;
            }
            .em{
                font-size: 3em;
            }
        </style>
    </head>
    <body>
        <div class="one">
            我是div標籤
            <p class="em">我是測試em的p標籤</p>
        </div>
    </body>
    </html> 
    ```
    ![螢幕擷取畫面 2024-03-11 223452](https://hackmd.io/_uploads/r1b38c2Ta.png)
    * ex 相對於一個正常x字符的大小，2ex≒1em
    ```html=
    <!DOCTYPE html>
    <html lang="en">
    <head>
  x      <style>
            .one{
                font-size: 16px;
            }
            .ex{
                font-size: 3em;
            }
        </style>
    </head>
    <body>
        <div class="one">
            我是正常的x大小
            <p class="ex">我是測試ex的p標籤</p>
        </div>
    </body>
    </html> 
    ```
    ![image](https://hackmd.io/_uploads/rkqNKc2aa.png)

    * **rem 相對於根元素(重要)**
        * 10px=0.625rem
        * 12px=0.75rem
        * 14px=0.875rem
        * 16px=1rem(基準點)
        * 18px=1.125rem
        * 20px=1.25rem
        * 24px=1.5rem
        * 32px=2em
    ```html=
    <!--常用佈局案例-->
    html {font-size: 62.5%;}
    body {font-size: 1.4rem;}
    h1 {font-size: 2.4rem;}
    ```
    
    ```html=
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <style>
            .rem{
                font-size: 2rem;
            }
        </style>
    </head>
    <body>
        <div class="one">
            我是正常的p標籤
        </div>
        <div class="rem">
            測試rem的div標籤
        </div>
    </body>
    </html> 
    ```
    ![image](https://hackmd.io/_uploads/rJB3Y9h6p.png)


### font-fmaily 字型
字體名稱按優先順序排列，以逗號隔開(若包括空格及中文要用引號括起來)
```html=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            .family{
                font-family: "微軟正黑體", "楷體";
            }
        </style>
    </head>
    <body>
        <div class="family">我是p標籤</div>
    </body>
</html> 
```
![image](https://hackmd.io/_uploads/SJb3Achap.png)
    
### font-weight 指定字體的粗細
* normal 正常字體，相當於數值400
* bold 粗體，相當於數值700
* lighter 細體
* 數值
```html=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            .bold{
                font-weight: bold;
            }
            .lighter{
                font-weight: lighter;
            }
            .number{
                font-weight: 900;
            }
        </style>
    </head>
    <body>
        <div class="bold">我是粗體</div>
        <div class="lighter">我是細體</div>
        <div class="number">我是數值</div>
    </body>
</html> 
```  
![image](https://hackmd.io/_uploads/rygKes3ap.png)

### font-variant 設置小型的大小字母
```html=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            .abc{
                font-variant: small-caps;
            }
        </style>
    </head>
    <body>
        <div class="abc">this is a div element</div>
    </body>
</html> 
```  
![image](https://hackmd.io/_uploads/HyMBNihap.png)

### letter-spacing 設置字體間距
```html=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            .font{
                letter-spacing: 10px;
            }
        </style>
    </head>
    <body>
        <div class="font">我是div標籤</div>
    </body>
</html> 
```  
![image](https://hackmd.io/_uploads/rJW7wjhT6.png)

### word-spacing 設置單字間距(空格有效)     
```html=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            .font{
                word-spacing: 10px;
            }
        </style>
    </head>
    <body>
        <div class="font">It's the div element</div>
    </body>
</html> 
```
![image](https://hackmd.io/_uploads/SJhCuohpp.png)

### opacity 設置顏色的透明度
```html=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            .font{
                opacity: 0.5;
            }
        </style>
    </head>
    <body>
        <div class="font">設置透明度</div>
    </body>
</html> 
```
![螢幕擷取畫面 2024-03-11 235634](https://hackmd.io/_uploads/BJKRti2p6.png)
    
## 文本屬性
### overflow|overflow-x|overflow-y 當內容溢出元素框時的行為
* visible 對溢出的內容不做處理，內容可能會超出容器
* hidden 隱藏溢出的內容且不出現滾動條
* scroll 隱藏溢出容器的內容，溢出的內容可以通過滾動呈現
* auto 當內容無溢出不會出現滾動條，反之則相反
```html=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            .overflow{
                width: 100px;
                height: 100px;
                border:1px solid blue;
                margin-bottom: 50px;
                overflow: visible;
            }
            .scroll{
                width: 100px;
                height: 100px;
                border:1px solid blue;
                margin-bottom: 50px;
                overflow: scroll;
            }
            .auto{
                width: 100px;
                height: 100px;
                border:1px solid blue;
                margin-bottom: 50px;
                overflow: auto;
            }
            .hidden{
                width: 100px;
                height: 100px;
                border:1px solid blue;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div class="overflow">
            我是div中間的內容，
            我在測試這樣的程度會不會超出元素的大小，
            若是超過他會出現滾輪嗎?
        </div>
        <div class="scroll">
            我是div中間的內容，
            我在測試這樣的程度會不會超出元素的大小，
            若是超過他會出現滾輪嗎?
        </div>
        <div class="auto">
            我是div中間的內容，
            我在測試這樣的程度會不會超出元素的大小，
            若是超過他會出現滾輪嗎?
        </div>
        <div class="hidden">
            我是div中間的內容，
            我在測試這樣的程度會不會超出元素的大小，
            若是超過他會出現滾輪嗎?
        </div>
    </body>
</html> 
```
![image](https://hackmd.io/_uploads/H1VRiC-Aa.png)![image](https://hackmd.io/_uploads/H1CCoCWAp.png)![image](https://hackmd.io/_uploads/ryu130bCa.png)![image](https://hackmd.io/_uploads/BkglnAZRT.png)
    
### text-overflow 讓溢出的文字以省略號顯示
**不能單獨使用需搭配其他屬性，中文會默認換行**
* clip 當內容溢出容器時，將溢出部分裁切掉
* ellipsis  當內容溢出容器時，將溢出部分替換為(...)
```html=
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            .clip{
                width: 100px;
                height: 100px;
                border:1px solid blue;
                margin-bottom: 50px;
                text-overflow: clip;
                overflow: hidden;
            }
            .ellipsis{
                width: 100px;
                height: 100px;
                border:1px solid blue;
                margin-bottom: 50px;
                text-overflow: ellipsis;
                overflow: hidden;
                /*中文會自動換行，必須設置內容在同一行*/
                white-space: nowrap;
            }
        </style>
    </head>
    <body>
        <div class="clip">
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            我是div中間的內容，
            我在測試這樣的程度會不會超出元素的大小，
            若是超過他會出現滾輪嗎?
        </div>
        <div class="ellipsis">
            我是div中間的內容，
            我在測試這樣的程度會不會超出元素的大小，
            若是超過他會出現滾輪嗎?
        </div>
    </body>
</html>
```
![image](https://hackmd.io/_uploads/HJ2j81fRa.png)![image](https://hackmd.io/_uploads/rJQhUJGRa.png)

### white-space 設置文字是否在同一行顯示
* normal 默認處理方式，會將一連串的空格視為一個，內部是否換行由換行規則決定
* pre 原封不動保留你輸入時的狀態，空格、換行都會保留，並且當文字超出邊界時不換行。等同pre元素效果
* nowrap 與normal值一致，不同的是會強制所有文本在同一行內顯示
* pre-wrap 與pre值一致，不同的是文字超出邊界時將自動換行
* pre-line 與normal值一致，但是會保留文本輸入時的換行