# CSS基本知識
{%hackmd BJrTq20hE %}
## 迷你 css 庫
- sakura：

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sakura.css/css/sakura.css" type="text/css" />

- pico：

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">

## CSS權重分數：先看權重，再看先後：

- html tag：1分
- class：10分
- inline style：100分
- id：1000分
- !important：10000分

    th {
        font-weight: 600 !important; 
    }

#### ==!important > inline > id > 使用 class 的選擇器 > class > element==
### CSS鏈接語法：
1. 外部連接套用

    <link rel="stylesheet" href="css/style.css"/>

2. 嵌入套用

    <style type="text/css" media="【媒體類別】">

## 選擇器
### 基本選擇器
- [標籤選擇器](https://developer.mozilla.org/zh-TW/docs/Web/CSS/Type_selectors) elementame
- [Class 選擇器](https://developer.mozilla.org/zh-TW/docs/Web/CSS/Class_selectors) .classname
- [ID 選擇器](https://developer.mozilla.org/zh-TW/docs/Web/CSS/ID_selectors) #idname
- 通用選擇器 `*` ：將樣式套用於全部元素標籤中，通常在 reset css 時才會用到此方法。
`* { margin: 0px; padding: 0px; }`
- 群組選擇器( `,` )：當有多個class使用相同的css樣式，即可用群組選擇器
利用「逗號」串連多個選擇器一併管理的用法，這樣可以將多處不同樣式一次指定，避免重複撰寫相同的 class 內容。
`h1,h2,h3 { color: #333333; }`
- 屬性選擇器(attribute selector)
- [屬性選擇器](https://developer.mozilla.org/zh-TW/docs/Web/CSS/Attribute_selectors) [attr=value]：
選擇具有某html屬性的元素標籤
例如下列範例的意思就是選擇具有href屬性的a元素
元素名稱[屬性名稱]
`a[href] { color: #ff0000; }`
元素名稱[屬性名稱][屬性名稱] (指定多個屬性，需同時擁有)
`a[href][title] { color: #00ff00; }`

- 準確屬性選擇器(Exact attribute value selector)：
只選擇具有特定屬性值的元素標籤
例如下列範例的意思就是選擇target屬性值為_blank的a元素
元素名稱[屬性名稱=“屬性值”]
`a[target="_blank"] { color: #00ffff; }`
元素名稱[屬性名稱=“屬性值”][屬性名稱=“屬性值”]
`a[href="https://www.google.com.tw/"][target="_blank"] { color: #cccccc; }`
- 部份屬性選擇器(Partial value attribute selector)：
- 元素名稱[屬性名稱`^=`“特定開頭”]：
選擇具有特定屬性，且屬性值是以“特定開頭”的元素標籤
例如下列範例就是具有class名稱開頭為green的p元素會變成綠色
發現結果第三行是黑色，第四行才是綠色
也就是說不只單字的開頭，還要放在第一個值，這個寫法才會生效
`p[class^="green"] { color: #34bf49; }`

- 元素名稱[屬性名稱`$=`“特定結尾”]：
選擇具有特定屬性，且屬性值是以“特定結尾”的元素標籤
例如下列範例就是具有class名稱結尾為purple的p元素會變成紫色
我們發現第三行仍然是黑色沒有變成紫色
也就是說不只單字的結尾，還要放在最後一個值，這個寫法才會生效
`p[class$="purple"] { color: #7d3f98; }`

- 元素名稱[屬性名稱`*=`“特定字眼”]：
選擇具有特定屬性，且屬性值包含“特定字眼”的元素標籤
例如下列範例就是選擇所有class名稱包含big(不論位置在開頭/中間/結尾)的元素標籤都適用
`[class*="big"] { border: 1px solid #333; }`
- 元素名稱[屬性名稱`~=`“特定單詞”]：
當元素的屬性值可用空白隔開設定多個值時，若其中有一個值為特定單詞(一定要完全符合)，則套用樣式
我們可以發現下列範例的最後三行才是藍色文字，其他都不符合套用規則
`[class~="blue"] { color: #037ef3; }`
- [狀態選擇器](https://developer.mozilla.org/zh-TW/docs/Web/CSS/Pseudo-classes) a:active,、a:visited、e:checked
- 深度選擇器：`:deep`
- scoped：限制CSS作用範圍，作用是避免父元件的 CSS 樣式會污染到子元件的 CSS 樣式。
- deep selector：跳脫CSS作用範圍，可以把父元件的 CSS 樣式穿透到子元件的 CSS 樣式，即使父元件的 CSS 設定了 scoped。[link](https://blog.csdn.net/qq_45327886/article/details/120200842)
- 其他應用情況：修改第三方套件的樣式
當我們以元件的方式來載入第三方套件，並且想修改它的樣式，就有機會要用 deep selector。

### 複合選擇器
- [鄰接同層選擇器](https://developer.mozilla.org/zh-TW/docs/Web/CSS/Adjacent_sibling_selectors) ( `+` )：
可選擇有相同的父元素，緊接在一個元素後的「第一個」相鄰兄弟元素(同一層中)，例如下列範例中，只有 h1 的下一個 p
是紅色的，其他第二個之後的 p 仍然是黑色的([看測試demo](https://codepen.io/lin-hsienli/pen/XyRZOj))。
(只要是跟h1相鄰的都有作用)
`h1 + p { color: #ff0000; }`
- [通用同層選擇器](https://developer.mozilla.org/zh-TW/docs/Web/CSS/General_sibling_selectors) ( `~` )：( 兄元素「之後所有的」弟元素 )
可選擇有相同的父元素，兄元素「之後所有的」弟元素，例如剛剛那個範例若改成~選擇器，h1 上面再多加一個
p ，結果是除了h1 上面的那個 p ，底下的 p 全部變成紅色的了(**[看測試demo](https://codepen.io/lin-hsienli/pen/WYjzwb)**)。
`h1 ~ p { color: #ff0000; }`
- [直屬選擇器](https://developer.mozilla.org/zh-TW/docs/Web/CSS/Child_selectors) ( `>` )：(所有的子元素都有作用，但不包含孫元素)
與子孫選擇器(任意的後代元素皆選)不同，子選擇器是只選擇子元素，子元素的子元素(孫元素)的樣式並不受影響，但假如改寫成子孫選擇器，所有的
li 元素都會變成紅色的
`.main-menu > li { color: #ff0000; }`
- [後代(子孫)選擇器](https://developer.mozilla.org/zh-TW/docs/Web/CSS/Descendant_selectors) A` `B： ( 空一格 )
利用元素間的親子關係，依序由「父元素→子元素→孫元素 」的形式特定出範圍的選擇器。
注意：必須依序以「半形空格」分隔並列出元素標籤
`#main-list ul li a { color: #ff0000; }`
但假如能明確的辨識出目的元素，不會與其他用途的標籤混淆，省略中間的元素直接寫目的元素也是可以的，例如上列可以改為：
`#main-list a { color: #ff0000; }`
- .a.b：(沒有空格)
代表需要同時存在才滿足
`.example.noSpace { color: green; }`

    <p class="example noSpace "> 

- 父層選擇器(`:has`)：[link](https://sentry.io/answers/is-there-a-css-parent-selector/)

    li:has(> a.active) { /* styles to apply to the li tag */ }

或是利用 js 的 parentNode

    const icon = document.querySelector('.btn .icon');
    const btn = icon.parentNode;
    btn.style.padding = "0.25rem 0.5rem";

### 虛擬元素
- [虛擬類別](https://developer.mozilla.org/zh-TW/docs/Web/CSS/Pseudo-classes)
- 選取子元素的「child」型虛擬類別：
※ 注意：這邊的E寫的是子元素本身的標籤(子元素可以省略不寫，但虛擬類別與父元素之間要有半形空格)，若不指定元素標籤的話，就會不區分元素類型只依順序計算。
E`:first-child` (選取第一個子元素 E )
E`:last-child` (選取最後一個子元素 E )
E`:nth-child(n)` (選取第 n 個子元素 E )
可以將 :nth-child(n) 中的 n 寫成算式(an+b)，例如3n、n+1
[如果寫成3n+2](http://csscoke.com/2013/09/21/%E4%BD%BF%E7%94%A8css3-nth-childn-%E9%81%B8%E5%8F%96%E5%99%A8%E8%A9%B3%E8%A7%A3/)：結果就是隔3行
如果寫成n+2：結果就是從2開始往後數
E:nth-child(`odd`) (選取第奇數個子元素 E，第 1、3、5、7…個)
E:nth-child(`even`) (選取第偶數個子元素 E，第 2、4、6、8…個)
E:nth-last-child(n) (選取倒數第 n 個子元素 E )
E:only-child (選取唯一的子元素 E )
- 選取兄弟元素的「of-type」型虛擬類別：[查看Demo(範例1)](https://codepen.io/lin-hsienli/pen/wRodeq)
- 這些虛擬類別，可以選擇同一階層且「同一類元素」中符合條件者：
E`:first-of-type`(選取每個類別的第一個元素 E，不包含第二個以後…，各種類別分開計算)
E`:last-of-type` (選取每個類別的最後一個元素 E )
E`:nth-of-type(n)` (選取每個類別的第 n 個元素 E )
E`:nth-last-of-type(n)` (選取每個類別的倒數第 n 個元素 E )
E`:only-of-type` (選取唯一的類別元素 E )
- 嵌套效果選擇器 (類似 scss 嵌套)：
- `:is()`、`:where()`

        // 一般寫法
        .container .class1 article,
        .container .class2 article,
        .container .class3 article,
        .container .class4 article {
          color: #f00;
        }

        // 簡化
        .container :is(.class1, .class2, .class3, .class4) article {
          color: #f00;
        }

        // 效果同 scss，如下
        .container {
            .class1, .class2, .class3, .class4 {
                article {
                  color: #f00;
                }
            }
        }

:is() 跟 :where() 的不同：
基本上是完全一樣，唯一的差異是 :where() 的權重是0，因此可以被輕易複寫。
- 否定虛擬類別：[查看Demo範例](https://codepen.io/lin-hsienli/pen/maOwoz)
這個類別可以根據要排除的條件，一次選取其餘全部的元素，例如要做元素間的間距時很方便(除了第一個元素，其餘都設定 margin-top )。
- E`:not(s)` (不含條件 s 的元素 E )
>
※ 注意：s條件可以是「虛擬類別」、「id/class選擇器」或「類型選擇器」

        .my-list :not(:last-child) {
            color: #f00;
        }
        .wrap :not(.text-b) {
            color: #00f;
        }
        .block :not(p) {
            text-decoration: underline;
            color: #0f3;
        }

- 目標虛擬類別：[查看Demo範例](https://codepen.io/lin-hsienli/pen/gZLxqa)
- E`:target` ( 選取「點擊時」 href 路徑所指向的目標元素 E )
>
※ 注意：這個虛擬類別，可以選取連結「目的地」的元素，而非連結本身的元素
先設定好 a 元素的連結 # 名稱，再將對應的 id 名稱綁在要顯示的區塊 ul 上，接著將 ul 元素預設隱藏( display: none; )，只有在點擊 a 連結時，對應的目的地 ul 元素(ul:target)才會顯示出來( display: block; )，要注意的就是 :target 並不是綁在 a 元素，而是綁定在 a 元素連結指向的「ul 元素」。
如此，就用純 css 的寫法完成了一個簡易的展開收合 Menu。

        ul {
            list-style: circle;
            display: none;
        }
        ul:target {
            display: block;
        }

- 表單虛擬類別：[查看Demo範例](https://codepen.io/lin-hsienli/pen/pqNpGr)
可以依據「輸入表單的狀態」選擇元素的虛擬類別，可用來設定表單元素相鄰的 label 元素之樣式。
- E`:enabled` (有效的表單元素 E )
- E`:disabled` (禁用的表單元素 E )
- E`:checked` (被選中的表單元素 E，例如單選/複選核取框)
純css動態切換狀態： https://codepen.io/Idered/pen/AeBgF?editors=1100
- E`:invalid`：驗證錯誤時的樣式
- CSS 虛擬 (偽) 元素列表
| 選擇器 | 名稱 | 說明 | |
|-----------------|-------|--------------|---|
| E::first-line | 偽元素 | E 元素的第一行 | |
| E::first-letter | 偽元素 | E 元素的第一個字 | |
| E::before | 偽元素 | E 元素之前新增文字內容 | |
| E::after | 偽元素 | E 元素之後新增文字內容 | |
>
before、after用途為：可以在指定元素的前後插入其他內容，例如：插入內容，或加上特效
注：一定要加入content屬性才會有作用！！！
## CSS Module：
1. 新增一個檔案，命名為 `Hello.module.css`
2. 引入檔案，`import styles from "./Hello.module.css";`
3. 會發現 class 後綴會增加亂數（唯一性）。
### 進階運用：[link](https://molly1024.medium.com/css-modules-%E6%98%AF%E4%BB%80%E9%BA%BC-%E7%82%BA%E4%BB%80%E9%BA%BC%E6%88%91%E8%A6%81%E6%94%B9%E7%94%A8-css-modules-what-is-css-modules-why-should-you-use-it-aeb7d2955c58)
1. composes
1. `:global`：全局選擇器（等同於一般 className 的寫法，不會增加後綴亂碼）
在 `CSS Module` 中加入共用樣式，`:global(.className)`

    <h2 className="wrap">this is global</h2>
    ...
    // 寫法一：
    :global(.wrap) {
        color: green;
    }

    // 寫法二：
    :global {
      .class1 {
        需要添加修改的属性1:属性值1;
      }
    }

3. hover / focus 怎麼加
4. 使用變數
5. composes 繼承其他 css 設定

### CSS區塊，Div & Span：
1. Div：
Div 是一個區塊級容器 (block-level container)，這代表在 `</div>` 標籤後會自動換行。
置中：Margin左右設為Auto，即可置中，但需要設寬度
2. Span：
Span 跟 Div 類似，不同的是，Span 可以涵蓋更細層的元素。所以，我們甚至可以用 `<span>` 來調整單一文字的樣式。另外，在 `</span>` 之後並不會換行。

## CSS顯示(Display)：[說明](https://medium.com/ui-ux%E7%B7%B4%E5%8A%9F%E5%9D%8A/display-%E5%B1%AC%E6%80%A7%E4%B8%AD%E5%B8%B8%E7%94%A8%E7%9A%84%E9%A1%9E%E5%88%A5-77eb86714d8a)

1. `display:block;` 若沒有定義該元素長寬，則會100%佔滿所在空間，會自動換行
常見元素標籤：div、ul li、p、h1
水平置中方法：mx-auto
3. `display:inline;` 該元素佔有的空間為其內容本身(文字或圖片)之長寬，無法改變寬高，不會自動換行。
常見元素標籤：span、a、imput、img
水平置中方法：text-align : center

inline屬性的DOM( 如span )會產生自己的inline box，該line box浮於畫面之上，不與其他元素疊加
如果改成block或inline-block才會有影響

總結： [https://yachen168.github.io/article/LineBox.html](https://yachen168.github.io/article/LineBox.html)
- inline 元素會自己產生出 inline box 空間，而會因為字體不同產生行距與自己的高度
- 但他產生的字體行距與 inline box 空間，不會影響父層高度
- 若要讓行內標籤能自適應推擠到外層區塊元素，他本身必須變成區塊元素，也就是 display:block
###
4. `display: inline-block`：與 inline 一樣不會自動換行，但卻是以 block 元素盒子的方式顯示 (可以設定寬高)
5. `display: table-cell`：與 table 元素中的 th、td 顯示方式相同，是比較早期 RWD 常見的做法(現在有 flex 可以用)。
6. `display: list-item`： 以 block 元素盒子的方式配置，但以條列式項目方式顯示，和 li 一樣
7. `display: flex`：[link](https://leahlin912.github.io/2019/03/28/CSS-%E5%9C%A8%E5%AE%B9%E5%99%A8%E4%B8%AD%E5%88%86%E9%85%8D%E4%B8%A6%E8%A1%8C%E7%A9%BA%E9%96%93(flex)/) 希望容器之內的物件可以並行接續排列，並且每個物件都有固定比例占據該容器
8. `display: none` 不會讓元素出現在 formatting structure 中，很像不在畫面上，會完全消失
9. `visibility: hidden` 生成的 box 是看不見的，完全透明，不會 draw 任何內容，但會影響佈局，也就是會在畫面上佔用空間，但會看不到元素的樣子。(隱藏時，畫面不會跳動)

## CSS浮動(float)：[範例](https://leahlin912.github.io/2019/03/26/CSS-%E6%B5%AE%E5%8B%95%E5%AE%9A%E4%BD%8D(float)%E3%80%81%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8B%95(clear)/)
當Div設定float時，其元件會依據設定的方向並排對齊，而其他Div也會因浮動產生位的影響。

將文字繞著一個圖案顯現。這是用 float (浮動) 這個屬性來達成的。也可調整div的浮動方向。
- float 屬性有三個可能的值：left、right、和 none。

## CSS清除(Clear)：
clear (清除) 屬性是用來抵銷 float 屬性的作用。可能的值為：
- left：消除左邊的浮動。
- right：消除右邊的浮動。
- both：消除左邊及右邊的浮動。
- none：不消除任何一邊的浮動。

## 長度單位：
| **類別** | **單位** | **意義** |
|--------|--------|------------------------------|
| 相對單位 | em | 目前大寫 "M" 的高度 |
| | ex | 目前小寫 "x" 的高度 |
| | px | pixel, 相對畫素、解析度 |
| | % | 相對於目前設定的百分比（可超過100%） |
| | vh | 視窗高度，1vh等於視窗高度的1% |
| | vw | 視窗寬度，1vw等於視窗寬度的1% |
| | vmin | vw和vh中較小的那個(也是百分比) |
| | vmax | vw和vh中較大的那個 |
| 絕對單位 | cm | 公分 (centimeters)；1cm = 10mm |
| | mm | 公釐 (millimeters) |
| | in | 英吋 (inchs)；1in = 2.54cm |
| | pt | 點 (poits)；1pt = 1/72in |
| | pc | 大點；picas；1pc = 12pt = 4.23mm |

常用的文字單位：
- 絕對數值：px 像素 ( Pixel ) 。 px 是相對於顯示器屏幕解析度而言的，1 px 並不是一個固定的長度，而是根據載具及其使用方式而定。
- 相對數值：em。em 是基於基數來計算出來的相對字體大小，如未設置，則瀏覽器的默認字體尺寸為 16px。
>
任意瀏覽器的默認字體高都是16px。所有未經調整的瀏覽器都符合：1em=16px。
為了簡化font-size的換算，需要在css中的body選擇器中聲明 Font-size=62.5%，這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的 px數值除以10，然後換上em作為單位就行了。
- 相對數值：`rem`。CSS3 新增的一個相對單位，這個單位與 em 的區別在於可以只修改根元素就成比例地調整所有字體大小，避免字體大小逐層復合的連鎖反應。
>
設定根元素 html {font-size:10px;}，則
body {font-size: 1.4rem;} 的字級大小則會是 1.4*10=14px
>
推薦使用相對數值 rem，對於 RWD網頁字級設定時只要調整 html 根元素的字體大小，便可使所有網頁文字同時等比例縮放，不必逐一修改。
## 容器單位
- [IT邦](https://ithelp.ithome.com.tw/articles/10338897)
| 單位 | 說明 |
| --- | --- |
| cqw | 表示容器查询宽度（Container Query Width）占比。1cqw等于容器宽度的1%。假设容器宽度是1000px，则此时1cqw对应的计算值就是10px。 |
| cqh | 表示容器查询高度（Container Query Height）占比。1cqh等于容器高度的1%。 |
| cqi | 表示容器查询内联方向尺寸（Container Query Inline-Size）占比。默认情况下，Inline-Size指的就是水平方向，对应的是宽度，因此，1cqi通常可以看成是容器宽度的1%。 |
| cqb | 表示容器查询块级方向尺寸（Container Query Block-Size）占比。默认情况下，Block-Size指的就是垂直方向，对应的是高度，因此，1cqb通常可以看成是容器高度的1%。 |
| cqmin | 表示容器查询较小尺寸的（Container Query Min）占比，例如容器尺寸是300px*400px，则100cqmin对应的是尺寸较小的宽度300px，而非高度。 |
| cqmax | 表示容器查询较大尺寸的（Container Query Min）占比。 |
- 使用情境：當需要製作一個會根據容器的大小來做排版變化的元件時，如下：[DEMO](https://codepen.io/im1010ioio/pen/RwEdLXx)
- Container 設定
1. `container-type`：有設定就會變成容器元素
- `inline-size`：左右方向，高度會被內容撐高。
- `size`：上下左右方向，我猜想是因為設定後它已被預期會改變高度，所以不會被內容撐高，會失去其高度，要再設定其高度。
2. `container-name`：如果元件裡面有多個 container 需要設定，可以加上命名來各自設定。
3. `container`可簡寫：`container: <container-name> / <container-type>`

        .container {
            container-type: inline-size;
            container-name: toolbar;
            // or 簡寫如下
            container: toolbar / inline-size
            width: 30vw;
            .toolbar {
                display: flex;
            }
        }

        /* 當名為「toolbar」的容器小於 150px， .toolbar 改為直式排列 */
        @container toolbar (width < 150px) {
            .toolbar {
                flex-direction: column;
                width: 200px;
            }
        }

## CSS Outline(外輪廓)：
與下面盒子模式不同在於：
outline是純裝飾性質，不會佔用空間，而margin會占有空間    [範例](http://jsfiddle.net/g8FXT/)
- 設定方式同 border：

    border: 1px solid red;
    outline: 1px solid red;

## CSS盒子模式，Box model：

- `Margin`：又稱為外距，Padding又稱為內距

1. 外距調整的時候，只會移動位置，不會調整大小，數值可以為負
2. 內距調整的時候，會把內容推開，方框會變大，如果想要維持大小不變，則方框尺寸要修改來扣掉padding尺寸，數值只能大於等於0

要設定 padding, border-width, margin...等值時，我們常用四個方位的簡稱來取代四個值，其意義如下：
| **值** | **範例** | **套用範圍** |
|-------|-------------------------------|-------------------------------------|
| 1 | margin: 50px | 所有邊均為50px |
| 2 | margin: 10px 5em | [上、下邊 10px] [左、右邊 5em] |
| 3 | padding: 3px 5em 10px | [上邊 3px] [左、右邊 5em] [下邊 10px] |
| 4 | border-width: 2px 3px 5px 4px | [上邊 2px] [右邊 3px] [下邊 5px] [左邊 4px] |
| | | 順時鐘方向 |

置中小撇步：對於有設定width的block元素來說，margin可設成auto讓整個元素自動水平置中
- `margin-inline-start`：[來源](https://www.zhangxinxu.com/wordpress/2018/10/diff-css-margin-inline-margin-block/)
margin-inline 和 margin-block 指的是方向。

        .inline-start {
            margin-inline-start: 40px;
        }
        .block-start {
            margin-block-start: 40px;
        }

## 邊框(Border)：[範例](https://www.1keydata.com/css-tutorial/tw/border.php)
在 CSS 中常見的邊框 (border) 屬性有以下幾種：
- [border-style](https://www.1keydata.com/css-tutorial/tw/border.php#borderstyle) 實線、虛線、雙線、點線、凹線(inset)、凸線(outset)、崁入線、浮出線
example： `border:15px red outset;`
- [border-width](https://www.1keydata.com/css-tutorial/tw/border.php#borderwidth)
- [border-color](https://www.1keydata.com/css-tutorial/tw/border.php#bordercolor)
- [border-top-, border-left-, border-bottom-, border-right-](https://www.1keydata.com/css-tutorial/tw/border.php#borderdirection)

    // 單一屬性設定
    border-width: 1px; 
    border-style: solid; 
    border-color: #000;

- [border](https://www.1keydata.com/css-tutorial/tw/border.php#border)：若四邊的邊框屬性(寬度、樣式、顏色)都一樣，那我們可以用一個 border 屬性來描述

    border: 1px solid #000;
    
    // 單一屬性簡寫：
    border-right: 1px solid #000;

- border-collapse: collapse; ：表格框呈現線型
- box-sizing: border-box; 把邊框占用的空間往內扣，預設是content-box (box的尺寸是針對內容，邊框占用的空間往上加)
- [用boder畫出三角形圖案](https://www.webdesigns.com.tw/css_triangle.asp)：

    .box { 
        width: 100px; 
        height: 100px; 
        border-right: 20px solid #7700BB; 
        border-left: 20px solid #E63F00; 
        border-top: 20px solid #00DDDD; 
        border-bottom:  20px solid #9999FF; 
    }

- border-image： [https://codepen.io/dipscom/pen/EveJLL](https://codepen.io/dipscom/pen/EveJLL)
### [border-radius](https://developer.mozilla.org/zh-TW/docs/Web/CSS/Shorthand_properties)，也會使用連貫的１～４個值來代表四個角落：
| | **單值語法：border-radius: 1em — 這唯一的值代表了所有角落。** |
|------|------------------------------------------------------------------------|
|| 雙值語法：border-radius: 1em 2em — 第一個值代表左上和右下，第二個值則是右上及左下角。 |
|| 三值語法：border-radius: 1em 2em 3em — 第一個值代表左上，第二個值代表右上及左下，第三個值則是右下的角落。 |
|| 四值語法：border-radius: 1em 2em 3em 4em — 這四個值分別代表左上、右上、右下、左下，由左上開始的順時針排序。 |
>
PS：也可以套用在圖片上，達成裁切的效果(可變成圓圖)by border-radius: 50%
- 進階用法：border 也可以畫曲線(畫橢圓)
`border-radius: 125px 10px 20px 185px / 25px 205px 205px 25px;`
也可使用 [Open Props](https://open-props.style/#getting-started) CSS 庫
## inpu樣式：
- 初始化顏色：讓表單預設顏色與主題一致

    body {
      accent-color: #080; /* use your favorite color */
    }

- 可設定屬性：

    input {
        border~: 沿用上面border的樣式寫法
        caret-color: auto; /* 預設 */
        caret-color: transparent; /* 透明 */
        caret-color: #FF1744; /* 指定色 */
        outline: none; /* 外框效果 */
    }

### button：新屬性 [https://www.w3school.com.cn/html5/html5_button.asp](https://www.w3school.com.cn/html5/html5_button.asp)
**new** : HTML5 中的新属性。
| **属性** | **值** | **描述** |
|----------------|----------------|-----------------------------|
| autofocus | autofocus | 规定当页面加载时按钮应当自动地获得焦点。 |
| disabled | disabled | 规定应该禁用该按钮。 |
| form | form_name | 规定按钮属于一个或多个表单。 |
| formaction | url | 覆盖 form 元素的 enctype 属性。 |
| | | 注释：该属性与 type="submit" 配合使用。 |
| formenctype | 见注释 | 覆盖 form 元素的 action 属性。 |
| | | 注释：该属性与 type="submit" 配合使用。 |
| formmethod | • get | 覆盖 form 元素的 method 属性。 |
| | • post | 注释：该属性与 type="submit" 配合使用。 |
| formnovalidate | formnovalidate | 覆盖 form 元素的 novalidate 属性。 |
| | | 注释：该属性与 type="submit" 配合使用。 |
| formtarget | • _blank | 覆盖 form 元素的 target 属性。 |
| | • _self | 注释：该属性与 type="submit" 配合使用。 |
| | • _parent | |
| | • _top | |
| | • framename | |
| name | button_name | 规定按钮的名称。 |
| type | • button | 规定按钮的类型。 |
| | • reset | |
| | • submit | |
| value | text | 规定按钮的初始值。可由脚本进行修改。 |

## CSS背景(background)： [http://www.eion.com.tw/Blogger/?Pid=1116](http://www.eion.com.tw/Blogger/?Pid=1116)

在 CSS 中常見的背景 (background) 屬性有以下幾種：
簡寫：
- [background](https://ithelp.ithome.com.tw/articles/10250499): { color image attachment repeat poition / size }
//如果要寫size，前面一定要加position
- [background-attachment](https://wcc723.github.io/css/2013/09/25/background-att/)：這個 CSS 屬性能夠設定，背景圖片的位置是否要固定在 viewport（視圖）上，還是背景圖片會隨著它的 containing block（外層容器）一起滾動。
是背景固定模式的屬性，有scroll、fixed、local。 [sample link](https://codepen.io/BernLeech/pen/mMNKJV)
- fixed (視差滾動)
背景相對於內、外視窗皆是固定位置的。所以滾動外視窗時，內視窗背景會有往下掉的錯覺。
- local (new)
內視窗滾動時，背景圖片、內容會跟著滾動，外視窗滾動頁面整個挪動
- scroll (預設)
讓背景固定，內視窗滾動是圖片上層內容在滾動，外視窗滾動頁面整個挪動
>
給背景加上透明度：

    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('http://placehold.it/350x150') no-repeat 0% 20%/ cover;

漸變色：background: [linear-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient)  (角度、色標、色標);
- `linear-gradient`：線性漸層
1. 第一个参数是渐变的角度，他可以接受一个表示角度的值（可用的单位deg、rad、grad或turn）或者是表示方向的关键词（top、right、bottom、left、left top、top right、bottom right或者left bottom）
2. 第二个参数是接受一系列颜色节点（终止点的颜色），以[一種顏色]開始，以[另一種顏色]結尾
ex：

            /* ([<angle> | to <side-or-corner>]? , <color-stop-list>) */
            background-color: linear-gradient(20deg,#3d5493,#1aa2a0) fixed center center / 100% 100%;

(20度，第一色，第二色，位置，尺寸)
ex：彩虹色 [https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient())

            linear-gradient(to right, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);

- `radial-gradient`( //放射漸層
example：

        radial-gradient(farthest-side at left bottom, red, yellow 50px, green);

>
多重背景： [https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds](https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds)
每個設定的背景被一個個分層，第一個背景在最上面，最後一個背景是在最下面一層。 記得只有最後一個背景可以設定 background color。
>
- [background-color](https://www.1keydata.com/css-tutorial/tw/background.php#color)
- [background-image](https://www.1keydata.com/css-tutorial/tw/background.php#image): url(路徑名稱 或 網址);
- [background-size](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size) (背景圖片尺寸)：auto | length | percentage | cover | contain
- `auto` 為預設值，即背景圖片原始長寬。
- `length` 指定圖片具體大小的數值，不允許負值。
- `percentage` 以背景圖所在元素的百分比指定背景圖大小(不允許負值)。
- `cover` 主要用於背景圖小於所在的容器，而背景圖又不適合使用 repeat，此時就可以採用 cover 的方式，使背景圖放大至容器的大小，但此方法容易使背景圖因放大而失真。
- `contain` 與 cover 正好相反，主要用於背景圖大於所在容器，但卻需要將背景圖完整呈現，此時就可採用 contain 的方式，使背景圖縮小至容器的大小。

        background:url(penguin.png) no-repeat center;
        background-size: auto;
        background-size: 300px 100px;
        background-size: cover; /*以寬度縮放*/
        background-size: contain; /*以高度縮放*/

- [background-repeat](https://www.1keydata.com/css-tutorial/tw/background.php#repeat)
- [background-attachment](https://www.1keydata.com/css-tutorial/tw/background.php#attachment) fixed、scroll
- [background-position](https://www.1keydata.com/css-tutorial/tw/background.php#position)：center center (center center可以接在圖片連結後面)
- percentage 百分比表示
可用兩個百分比表示水平與垂直的起點。
只用一個百分比表示水平位置，垂直位置由系統預設值是 50% (亦可用負值)。
- length 長度值表示
可用兩個長度值表示水平與垂直的起點。單位是圖元 0px 0px 或任何其他的 CSS 單位。
可以混合使用 % 和 length 值。
- top, center, bottom 位置方向表示
使用此方法背景圖只顯示於元素的矩框之內，其參數有 left, center, right … 及下列方式。
- `background-clip`：背景剪裁，设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。
- `border-box`：背景延伸至边框外沿（但是在边框下层）此為預設值。
- `padding-box`：背景延伸至内边距（padding）外沿。不会绘制到边框处。
- `content-box`：背景被裁剪至内容区（content box）外沿。
- `text` ：背景被裁剪成文字的前景色。[聚光燈範例](https://www.youtube.com/watch?v=tf9Ueehm03s&ab_channel=CodingStartup)

## CSS濾鏡特效(backdrop-filter)：
它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。(非主流，主流直上filter) [效果圖](https://kumo.tw/article.php?id=75)

/* 关键词值 */
backdrop-filter: none;
/* 指向 SVG 滤镜的 URL */
backdrop-filter: url(commonfilters.svg#filter);
/* <filter-function> 滤镜函数值 */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%); //對比
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%); //灰階
backdrop-filter: hue-rotate(120deg); //色彩旋轉
backdrop-filter: invert(70%); //反相
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%); //褐色
backdrop-filter: saturate(80%); //飽和度
/* 多重滤镜 */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
/* 全局值 */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: unset;

## CSS圖片(image)：(inline)
- [object-fit](https://www.w3schools.com/css/tryit.asp?filename=trycss3_object-fit_all)：用於指定如何調整`<img>`或`<video>`的大小以適合其容器 [https://codepen.io/nate12/pen/mdmMQKJ?editors=1100](https://codepen.io/nate12/pen/mdmMQKJ?editors=1100)
- fill`-這是默認設置。替換內容的大小可填充元素的內容框。如有必要，將拉伸或擠壓物體以適合物體
- `contain` -縮放內容以保持其縱橫比，同時適合元素的內容框
- `cover`-替換內容的大小可在填充元素的整個內容框時保持其縱橫比。該對象將被裁剪以適合
- `none` -替換的內容未調整大小
- `scale-down` -內容的大小就像未指定或包含的大小一樣（將導致較小的具體對像大小）
- [object-position](https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-position)：調整圖片的重心位置
- left|top|right|bottom|百分比%

- vertical-align:bottom;：圖片下面不留白 [https://tzuhui.github.io/2020/01/08/HTML/html-img-blank/](https://tzuhui.github.io/2020/01/08/HTML/html-img-blank/)
原因說明：
因為圖片預設是 inline 元素，而 inline 元素的 vertical-align 設定預設是和父元素的 baseline 對齊的，而 baseline 本身又和父元素底邊有一定的間距。這個間距是來自於英文文字中像是 j, y 這些超過基準線的字符。
解法一：

    img {
        vertical-align: top/bottom/text-top/text-bottom;
    }

解法二：

    img {
        display: block;
    }

解法三：.box 是指 img 的父元素，解法三的方式是讓文字大小為 0px，進而讓因為文字而有的間距不見。

    .box {
        font-size: 0px;
    }

- opacity：0.5; 透明度
- svg尺寸設定： [https://segmentfault.com/a/1190000007143300](https://segmentfault.com/a/1190000007143300)
`<svg width="115" height="190" viewBox="0 0 115 190">……</svg>`
viewPort：寬高是viewport，增加會填滿可視區域
viewBox：可視範圍，減小是拉近，放大是拉遠

## CSS字體(font)：
載入字體的三種方式：
1. 使用 `<link>` 元素載入字體

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap" rel="stylesheet">

2. 使用 `@import` 載入字體

    @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap");

1. [font-family](https://www.1keydata.com/css-tutorial/tw/font.php#family) 設定字體的類別
在 CSS 中常見的字體 (font) 屬性有以下幾種：

    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", Roboto, "Helvetica Neue", Arial, sans-serif;
                    /* mac, IOS 系統字體                  Windows 英文系統字 微軟正黑體 Android 系統字 IOS 系統字 通用字體 */
    }

如果文字在這個字體中沒有對應的字的話，就會套用下一個字體。一般來說，最後一個設定的字體會是 sans-serif(無襯線體/黑體) 或 serif(襯線體/明體) 這類的通用字型名稱（generic-family）

### 其他屬性：
- [font-size](https://www.1keydata.com/css-tutorial/tw/font.php#size) font-size: calc(12px + 1.6vw); /* 最小12px，卻又可以變大 */
- [font-weight](https://www.1keydata.com/css-tutorial/tw/font.php#weight) 屬性是用來設定字體的厚度。厚度的設定值可以從 100 到 900 (900 是最厚的)。另外，我們也可以將厚度設定為 bold (厚)、bolder (更厚)、及 normal (正常)。
此屬性==需字體有提供對應的粗細才有作用==
| font-weight | 對應字型的命名 |
| -------------------------- | -------------- |
| 100 | Thin |
| 200 | |
| 300 | Light |
| 400（等同 normal，預設值） | Regular |
| 500 | Medium |
| 600 | |
| 700（等同 bold） | Bold |
| 800 | |
| 900 | Black |
| 1000 | |
- [font-style](https://www.1keydata.com/css-tutorial/tw/font.php#style) 設定字體是否為斜體字 (italic 或 oblique)
- [font-variant](https://www.1keydata.com/css-tutorial/tw/font.php#variant) small-caps、normal，設定文字是不是要以小型大寫 (small caps) 字體顯現。
- overflow-wrap或word-wrap:break-word：文字如果溢出block區塊，可以自動換行
overflow-wrap: normal | break-word | anywhere
按照單字換行可以使用css的word-wrap:break-word;
超過長度強制換行則可以使用word-break: break-all;
- letter-spacing：字元間的空白，如果區塊為inline or inline-block會被視為一塊文字，如：兩個input之間會有一個空白
- 解法1：在母層CSS新增letter-spacing:-0.34;，然後在本層(自己層)設為letter-spacing:0;
- 解法2：在父層CSS設定font-size為0(讓空白消失)，然後本層再把font-size設定回來
- webkit-text-`stroke`:5px black;：文字外框
- webkit-text-`fill-color`: transparent;：文字簍空

## CSS文字樣式：

以下是幾個最常被用到與文字樣式有關的 CSS 屬性。

- [direction](https://www.1keydata.com/css-tutorial/tw/text.php#direction) 設定文字的方向。可能的值為 'ltr' 及 'rtl'。
- [letter-spacing](https://www.1keydata.com/css-tutorial/tw/text.php#letterspacing) 字元間距控制 (每個字之間的距離控制)
- [word-spacing](https://www.1keydata.com/css-tutorial/tw/text.php#wordspacing) 設定每個單字與每個單字之間的距離。( 每個單字間的距離 )
word-spacing:5px;
- white-space 空白區域處理：
| **normal** | **默认。空白会被浏览器忽略。** |
|------------|-------------------------------------|
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 `<pre>` 标签。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 `<br>` 标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列(多個空格，視為一個)，但是保留换行符。 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
- [line-height](https://www.1keydata.com/css-tutorial/tw/text.php#lineheight) 設定每一行之間的空間。(純數字，無單位)
- [text-align](https://www.1keydata.com/css-tutorial/tw/text.php#textalign) left、right、center、justify(左右對齊)
`text-align:justify`不会处理被打断的行和最后一行，因此只有多行適用。[參考](https://segmentfault.com/q/1010000007136263)
`text-align-last:justify`：單行適用
- [vertical-align](https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align) 垂直對齊，top、middle、bottom
- [text-decoration](https://www.1keydata.com/css-tutorial/tw/text.php#textdecoration)：屬性是用來設定文字上有什麼裝飾。可能的值包括：
- **underline**: 文字下加上一條線。
- **overline**: 文字上加上一條線。
- **line-through**: 文字中間加上一條線劃過去。
- **blink**: 讓文字閃爍。
- [text-indent](https://www.1keydata.com/css-tutorial/tw/text.php#textindent) 字首縮排，設定每一段的第一行前面要留多少空間。可設定的值包括百分比以及長度。
- text-indent: 32px;
- [text-justify](https://developer.mozilla.org/en-US/docs/Web/CSS/text-justify?fbclid=IwAR2pu-F6kFVaI13Lemvcd5AxvESDDNiBrApHCYKY2PenUq2hfZ-alsbdtCw)：文字分散對齊。
根據現有的寬度對句子進行「截斷」與「間距配給」
- inter-word：使用`單詞`截斷，再動態調整間距空間。(中文需用此設定)
- inter-character：使用`字元`來做截斷，再動態調整間距空間。
- [text-transform](https://www.1keydata.com/css-tutorial/tw/text.php#texttransform)：屬性是用來控制大小寫是如何展現的。可能的值包括：
- **capitalize**： 每一個字的第一個字母都以大寫顯現，其他的字母則不改變。
- **uppercase**： 所有的字母都以大寫顯現。
- **lowercase**： 所有的字母都以小寫顯現。
- **none**： 大小寫不做任何改變。
- text-overflow：文字溢出設定
- `clip`：直接截斷文字
- `ellipsis`：在截斷位置後方加上`...` (PS: 限單行)

        .single-ellipsis {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

- [多行文字截斷](https://netivism.com.tw/blog/492)

        .multiline-ellipsis { 
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 5; /*限制行數*/
          overflow: hidden;
        }

## CSS文字排版：

columns
- `column-count`：這屬性只要直接填入數值即可，用來定義欄位數量。
- `column-width`：column-count及column-width只能二擇一，前者是直接定義欄位數量，後者則是定義欄位寬度。
- `column-gap`：欄位空隙寬度。
- `column-rule-style`：欄與欄之間的border樣式。
- `column-rule-width`：欄與欄之間的border寬度。
- `column-rule-color`：欄與欄之間的border色彩。
- `column-span`：設定指定元素不受column影響。(可以使用在標題或是重要的文字上)
column-break-inside：文字換欄設定
- `auto`: 自動
- `avoid`: 文字段落結束後才換欄
- `column-break-before`, `column-break-after`

指定元素的前後是否強制換欄。可以放在整個段落的前後

## SCROLLBAR 自訂卷軸樣式：
https://tools.wingzero.tw/article/sn/232
詳細解說：https://www.tpisoftware.com/tpu/articleDetails/2630
- 經典滾動條 (Classic Scrollbars)：
範例：

    .container::-webkit-scrollbar {
        width: 1em;
    }
    .container::-webkit-scrollbar-button{
        background: #fff;
    }
    .container::-webkit-scrollbar-track-piece{
        background: #aaa;
    }

- 製作macos滾動條 (Overlay Scrollbars)
https://www.instagram.com/p/CpNY2nOPa-o/

    /* 主體 & 背景 */
    ::-webkit-scrollbar {
        width: 18px;
        background-color: transprent;
    }

    /* Handle Bar */
    ::-webkit-scrollbar-thumb {
        // 黑色背景小透明
        background-color: rgba(0,0,0,0.3);
        border-radius: 999px
        // 使用邊框讓拇指能夠與邊緣有些間隙
        border: 5px solid transprent;
        background-clip: content-box;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #ccc;
    }

    body {
        // 讓bar浮於元素之上
        overflow: overlay;
    }

- `Scrollbar Gutter`：
是指內邊框邊緣和外填充邊緣之間的空間。

使用 `scrollbar-gutter: stable;` 即可不占用實體空間而排擠到內容。[如圖](https://ithelp.ithome.com.tw/articles/10300710)：

    .card {
      overflow-y: auto;
      scrollbar-gutter: stable;
    }

## CSS鏈接：

連接的預設樣式是藍色，且有下劃線。可是，有的時候，我們會想要改變一下這個預設的樣式。這可以透過以下幾個選擇器來達成：

- a`:link`： 設定當連接過去的網頁尚未被看過時，該連接的樣式。
- a`:visited`： 設定當連接過去的網頁已經看過時，該連接的樣式。
- a`:hover`： 設定當滑鼠蓋在連接上面時，該連接的樣式。
- a`:active`： 設定當連接被點擊時，該連接的樣式。
## CSS清單(List)：
在 CSS 中常見的清單 (list) 屬性有以下幾種：
- [list-style-type](https://www.1keydata.com/css-tutorial/tw/list.php#styletype)：[樣式DEMO](https://www.w3schools.com/cssref/pr_list-style-type.php)
- [list-style-position](https://www.1keydata.com/css-tutorial/tw/list.php#styleposition)：修改列表的顯示位置

    /* 項目符號在 li 範圍內 */
    ul.p1 {
     list-style-position: inside;
    }
    /* 項目符號在 li 範圍外（預設值） */
    ul.p2 {
     list-style-position: outside;
    }
    /* 可用來確認 li 項目位置 */
    li {
     border: 1px #cccccc solid;
    }

- [list-style-image](https://www.1keydata.com/css-tutorial/tw/list.php#styleimage)：修改列表開頭為小圖示
- [list-style](https://www.1keydata.com/css-tutorial/tw/list.php#liststyle)：list-style-style、list-style-position、list-style-image 多屬性簡寫
- 段落首行縮排：

    text-indent: -1em; // 負往左，正往右

### Counter(CSS計數器)：[教學](https://tools.wingzero.tw/article/sn/252)
- 要使用的話首先必須要像 ul, ol 和 li 的關係一樣要有子母的元素

    ol{
      counter-reset:num; // 設定變數，初始值為0
      list-style-type: none;
    }
    li:before{
      content:counters(num, ".") "："; // 印出數字
      counter-increment: num;  // 每多一個子元件就+1
    }

效果如下：
<iframe height="300" style="width: 100%;" scrolling="no" title="counter level" src="https://codepen.io/deathhell/embed/yLgEGga?default-tab=html%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/deathhell/pen/yLgEGga">
counter level</a> by deathhell (<a href="https://codepen.io/deathhell">@deathhell</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

- 另一個效果範例：[link](https://hackmd.io/@Heidi-Liu/css-list-style)

    ol {
      list-style: none;
    /*  命名自訂標號變數  */
      counter-reset: my-counter;
    }
    ol li {
    /*  使用自訂標號  */
      counter-increment: my-counter;
    /* 段落首行縮排 */
      text-indent: -1em;
    }
    /* 以偽元素自訂標號樣式 */
    ol li::before {
      content: "("counter(my-counter) ")";
      color: blue;
      font-weight: bold;
    }

<iframe height="300" style="width: 100%;" scrolling="no" title="Custom List Style - 自訂標號樣式" src="https://codepen.io/heidiliu2020/embed/PoWXJLv?default-tab=html%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/heidiliu2020/pen/PoWXJLv">
Custom List Style - 自訂標號樣式</a> by Heidi-Liu (<a href="https://codepen.io/heidiliu2020">@heidiliu2020</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
更改預設項目的樣式：
<iframe height="300" style="width: 100%;" scrolling="no" title="Custom List Style - 自訂標號樣式" src="https://codepen.io/twoz/embed/azvLBRj?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/twoz/pen/azvLBRj">
Custom List Style - 自訂標號樣式</a> by onedog (<a href="https://codepen.io/twoz">@twoz</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
## CSS表格(Table)：
caption：表格標題的標籤，放在table裡面

<style>
    caption
    {
        caption-side:bottom;
    }
</style>

| 值 | 描述|
|---------|---------|
| top | 默认值。把表格标题定位在表格之上。|
| bottom | 把表格标题定位在表格之下。|
| inherit | 规定应该从父元素继承 caption-side 属性的值。 |

在 HTML 中，常看到 `<table>` 之內加了 border、cellpadding、及 cellspacing 的屬性。如果我們有透過 CSS 來制定表格的樣式，那就不需要在 HTML 之內用到這些屬性了。

table的display可選值：
- table：指定對像作為塊元素級的表格，相當於html標籤`<table>`
- inline-table：指定對像作為內聯元素級的表格，相當於html標籤`<table>`
- table-caption：指定對像作為表格標題，相當於html標籤`<caption>`
- table-cell：指定對像作為表格單元格，相當於html標籤`<td>`
- table-row：指定對像作為表格行，相當於html標籤`<tr>`
- table-row-group：指定對像作為表格行組，相當於html標籤`<tbody>`
- table-column：指定對像作為表格列，相當於html標籤`<col>`
- table-column-group：指定對像作為表格列組顯示，相當於html標籤`<colgroup>`
- table-header-group：指定對像作為表格標題組，相當於html標籤`<thead>`
- table-footer-group：指定對像作為表格腳註組，相當於html標籤`<tfoot>`

還有一些協助屬性：
- border-collpase：用來決定表格的邊框是分開的還是合併的。在分隔模式下，相鄰的單元格都擁有獨立的邊框。在合併模式下，相鄰單元格共享邊框。
- border-spacing： 規定相鄰單元格邊框之間的距離（只適用於邊框分離模式）。相當於HTML 中的cellspacing 屬性，但是第二個可選的值可以用來設置不同於水平間距的垂直間距。
- table-layout：定義了用於佈局表格單元格，行和列的算法。
- auto：表格及單元格的寬度取決於其包含的內容。
- fixed：表格和列的寬度通過表格的寬度來設置，某一列的寬度僅由該列首行的單元格決定。
>
默认情况下，表格会根据内容撑开。如果你想强制固定宽度，建议加上 `table-layout: fixed`：

    <table border="1" style="width: 600px; table-layout: fixed;">
      <tr>
        <td style="width: 200px;">即使文字很长很长很长很长，也不会超出 200px</td>
        <td style="width: 400px;">400px</td>
      </tr>
    </table>

- vertical-align：用來指定行內元素（inline）或表格單元格（table-cell）元素的垂直對齊方式。

純CSS表格結構樣式&範例：

/* DivTable.com */
.divTable {
    display: table;
    width: 100%;
}
.divTableRow {
    display: table-row;
}
.divTableCell,
.divTableHead {
    border: 1px solid #999999;
    display: table-cell;
    padding: 3px 10px;
    text-align: center;
}

.divTableHeading {
    background-color: #EEE;
    display: table-header-group; //group表示為同一組表格
    font-weight: bold;
}

.divTableFoot {
    background-color: #EEE;
    display: table-footer-group;
    font-weight: bold;
}

.divTableBody {
    display: table-row-group;
}

<div class="divTable">
    <div class="divTableHeading">
        <div class="divTableRow">
            <div class="divTableHead">學號</div>
            <div class="divTableHead">姓名</div>
        </div>
    </div>
    <div class="divTableBody">
        <div class="divTableRow">
            <div class="divTableCell">&nbsp;</div>
            <div class="divTableCell">&nbsp;</div>
        </div>
    </div>
</div>

## CSS位置 (position) ：

在 CSS 中常見的位置 (position) 屬性有以下幾種：
- [position](https://www.1keydata.com/css-tutorial/tw/position.php#position)
**position** 屬性制定出要用哪一類的位置。可能的值有：
- **`static` (預設值)**: 沒有任何的定位效果，元素都會逐行排列。如果 **position** 的值是被設定為 statics 的話，那 top、bottom、left、和 right 的值就都沒有意義了。
- **`absolute`**: 這代表元素會被放在瀏覽器內的某個位置 (依 top、bottom、left、和 right 的值而定)。當使用者將網頁往下拉時，元素也會跟著改變位置。(該元素會浮出來，後面的元素會往上移動)
會寫 position: absolute; 的通常都是在 子元素 的地方撰寫，而 父元素 會寫上 position: relative; 幫助 子元素 進行絕對定位。
- **`relative`**: 這代表元素被放的地方將會與預設的地方有所不同。不同的程度是依照 top、bottom、left、和 right 的值而定。(看起來位置移動，但實際上沒有(保留原位空間)
- **`fixed`**: 相對於瀏覽器視窗 (viewport) 定位，讓元素固定在螢幕上的特定位置，不隨頁面滾動而移動，且脫離文檔流，不佔用原有空間。
此元素會被放在瀏覽器內的某個位置 (依 top、bottom、left、和 right 的值而定)。
- **`sticky`**：滾動黏滯定位。可以跟著滾動，而滾到一定程度時，則會被固定住，搭配top來使用
sticky黏住的範圍等於父層的高度，無法超過父層 [https://codepen.io/twoz/pen/rNyrXQQ?editors=1100](https://codepen.io/twoz/pen/rNyrXQQ?editors=1100)

相互關係：
1. 父為absolute，子為absolute
子元素寬度為內容決定，不會把父元素撐開
2. 父為absolute，子為relative
子元素寬度與父元素同寬，會把父元素撐開
3. 父為relative，子為absolute(常用)
父元素與子元素不會互相影響
###
- [top](https://www.1keydata.com/css-tutorial/tw/position.php#top)
- [right](https://www.1keydata.com/css-tutorial/tw/position.php#top)
- [left](https://www.1keydata.com/css-tutorial/tw/position.php#top)
- [bottom](https://www.1keydata.com/css-tutorial/tw/position.php#top)
- [overflow:](https://www.1keydata.com/css-tutorial/tw/position.php#overflow)
**overflow** 屬性是用來設定當內容放不下時的處理方式。可能的值包括：
- **visible**: 內容完全呈現，不管放得下放不下。
- **hidden**: 放不下的內容就不顯示出來。
- clip: 效果同上
- **scroll**: 無論內容放得下放不下，都加入上下捲軸及左右捲軸的功能。
overflow-y: scroll;
- **auto**: 當內容放不下時，加上捲軸的功能。
或是可以拿來避開float
- [z-index](https://www.1keydata.com/css-tutorial/tw/position.php#z-index)
index 屬性是用來決定元素重疊的順序。換言之，當兩個元素有重疊的情況時，z-index 值將會決定哪一個元素在上面。z-index 值比較大個元素會被放在上面。
絕對定位的確可以達到堆疊的效果，但僅限於 父元素 與 子元素 之間，假如我今天有多個 子元素 要進行堆疊，而且這些 子元素 同時面對一個 父元素 ，這種時候用絕對定位就比較不好做，就必須要利用 z-index 了。
## CSS滑鼠游標圖案(Cursor)：[w3c](https://www.w3schools.com/cssref/pr_class_cursor.php)
- cursor: url(圖案網址);
- cursor: pointer;(指標滑鼠-常用)
## CSS製作圖案(遮罩應用)：
- [Mask](https://blog.twjoin.com/css-%E9%81%AE%E7%BD%A9%E5%8A%9F%E8%83%BD%E8%88%87%E7%B0%A1%E6%98%93%E4%BA%92%E5%8B%95%E8%A3%BD%E4%BD%9C-9830d2e22b4b)：是使用既有圖片(JPG、PNG、SVG) 當作遮罩以達成剪裁效果
* mask-image: 定義圖片 url，初始值為 none
* mask-mode: 定義圖片使用 alpha 或亮度遮罩，初始值為 match-source
* mask-repeat: 定義圖片是否水平/垂直/雙向重複或不重複，初始值為 repeat
* mask-position: 定義圖片的初始位置，初始值為 center
* mask-size: 定義遮罩的尺寸，並設定完全或部分顯示圖像，初始值為 auto
- [clip-path](https://bennettfeely.com/clippy/) (多邊形裁切)：透過類似 SVG 連接座標來畫出多邊形

    clip-path: circle(50%); //圓形
    clip-path: ellipse(130px 140px at 10% 20%); //橢圓形
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); //多邊形

## CSS動畫：
Transition、Animation、Transform的分析比較：[link](https://ithelp.ithome.com.tw/articles/10200712)
| 名稱 | 介紹 | 作用於 | 效能問題 |
| --- | --- | --- | --- |
| `Transition` | 基礎的動畫效果，強調CSS屬性的過渡動畫 | CSS屬性變化 | 另一獨立執行緒處理，較不影響效能 |
| `Animation` | 細節複雜的動畫效果，強調CSS屬性的流程與控制，可加keyframes | CSS屬性變化 | 另一獨立執行緒處理，較不影響效能 |
| `Transform` | 控制html元素的旋轉、縮放、移動等等 | HTML元素(包含內容)變化 | 因會操作HTML元素運算，因此必須考慮效能 |

### Transition：屬性變化：
常用於滑鼠事件（:hover、:active、:focus、click）或鍵盤輸入時觸發
- transition: [[property 屬性名稱](http://litianyi.cc/technology/2014/08/27/css-transition/)] [duration 時間] [timing-function 速度曲線] [delay 延遲]
- transition-property:指定要轉換的CSS屬性：width、height、all
( 只能设置可以连续变化(如：widht, height, color, opacity, font-size等)属性！如果设置(display, position等)这种指定的，不能连续变化的属性时，在transition中没有过渡效果 )
- transition-duration:轉換需要的時間，預設0，單位為s或ms
transition-delay:延遲多久轉換，預設0，單位為s或ms
- transition-timing-function:轉換時的速度曲線，預設ease
>
EXAMPLE： https://thoughtbot.com/blog/transitions-and-transforms

    div {
        transition: transform 1s; //變形的屬性(多屬性加逗號)
    }
    div:hover {
        transform: rotate(1080deg); //變形的樣式
    }

單向、雙向hover效果：[link](https://ithelp.ithome.com.tw/articles/10200365)
- transition-timing-function：轉換時的速度曲線，**預設ease**
以下表格是transition-timing-function較常用的幾個屬性值：
| 名稱 | 說明 | =cubic-bezier(X,X,X,X) |
|-----------------------|-------------------------|----------------------------|
| linear | 均速 | cubic-bezier(0,0,1,1) |
| ease | 緩入中間快緩出，預設值 | cubic-bezier(.25,.1,.25,1) |
| ease-in | 緩入 | cubic-bezier(.42,0,1,1) |
| ease-out | 緩出 | cubic-bezier(0,0,.58,1) |
| ease-in-out | 緩入緩出(對比於ease較平緩) | cubic-bezier(.42,0,.58,1) |
| cubic-bezier(n,n,n,n) | 利用貝茲曲線自定義速度模式，n=0~1中的數值 | cubic-bezier(n,n,n,n) |
>
### [Animation](https://www.oxxostudio.tw/articles/201803/css-animation.html)：真動畫，寫在要動的元件上
- animation：動畫名稱 | 播放時間 | 延遲執行的時間 | 速度 | 次數 | 方向 | 填充模式 | 撥放狀態
(animation：name | duration | timing-function | delay | iteration-count | direction | fill-mode | play-state;)

| 屬性 | 說明 |
|-----------------------------------------------------------------|--------------------------|
| animation-name | 動畫名稱 |
| animation-duration | 動畫持續時間，預設 0，單位 s 或 ms。 |
| animation-delay | 動畫延遲播放時間，預設 0，單位 s 或 ms。 |
| animation-iteration-count | 動畫播放次數，預設 1。 <br/> 其他還有 infinite。無限 |
| animation-timing-function | 動畫加速度函式，預設 ease。 <br/> 其他還有： linear、ease-in、ease-out、ease-in-out <br/> step-start、step-end、steps(int,start/end)、cubic-bezier(n,n,n,n)。 |
| animation-direction | 動畫播放方向，預設 normal。 <br> 其他還有 reverse、alternate來回交替的、alternate-reverse。 |
| animation-fill-mode | 動畫播放前後模式，預設 none。 <br>其他還有 <br> forwards( 動畫結束停在第一格 )、 <br> backwards( 動畫結束停在最後一格 )、 <br> both( 有上面兩種功能 )。 | |
| animation-play-state | 動畫播放或暫停狀態，預設 running。 <br> 其他還有 paused。 | |

    animation-name: example;
    animation-duration: 4s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;

- 相當於腳本

    @keyframs 名稱{
        from{狀態一}
        to{狀態二}
    }

    //or %數

    @keyframs 名稱{
        0% {
            top: 0;
            left: 0;
        }
        25% {
            top: 200px;
            left: 0;
        }
        50% {
            top: 200px;
            left: 200px;
        }
        75% {
            top: 0;
            left: 200px;
        }
        100% {
            top: 0;
            left: 0;
        }
    }

[曲線動畫路徑](https://tobiasahlin.com/blog/curved-path-animations-in-css/)

動畫關鍵字：
CSS Animation, SVG Animation, HTML5 Canvas, Sprite Image

動畫套件總匯： [tools](https://simular.co/resources/type/effects-tools.html)，包含：AOS，GSAP、[animate](https://animate.style/)
### Transform(移動、變形)：
- 可以用來搭配裁切圖案，如：[裁切圖片定位](https://youtu.be/2Qs0EuqJIYA?t=830)。
**註：translate在inline屬性無法作用**：[link](https://www.w3school.com.cn/cssref/pr_transform.asp)

| 值 | 描述 | 测试 |
|-------------------------------------------|----------------------------|----|
| none | 定义不进行转换。 | 测试 |
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 | 测试 |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4x4 矩阵。 | |
| translate(x,y) | 定义 2D 转换。從原來的位置移動 | 测试 |
| translate3d(x,y,z) | 定义 3D 转换。 | |
| translateX(x) | 定义转换，只是用 X 轴的值。 | 测试 |
| translateY(y) | 定义转换，只是用 Y 轴的值。 | 测试 |
| translateZ(z) | 定义 3D 转换，只是用 Z 轴的值。 | |
| scale(x,y) | 定义 2D 缩放转换。 | 测试 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 | |
| scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 | 测试 |
| scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 | 测试 |
| scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 | |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 | 测试 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 | |
| rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 | 测试 |
| rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 | 测试 |
| rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 | 测试 |
| skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 | 测试 |
| skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换。 | 测试 |
| skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换。 | 测试 |
| perspective(n) | 为 3D 转换元素定义透视视图。 | 测试 |
>
- transform-origin(0,0)：軸心 [https://wcc723.github.io/css/2013/10/10/css-transform-origin/](https://wcc723.github.io/css/2013/10/10/css-transform-origin/)
可以是：

    transform-origin(0,100%); //右上
    transform-origin：left top; //左上

## CSS陰影：
- box-shadow：區塊陰影
`box-shadow: 10px 10px 5px #888888;`
box-shadow: h-shadow | v-shadow | blur | spread | color | inset;
- h-shadow：水平位移距離
- v-shadow：垂直位移距離
- blur：模糊半徑
- spread：擴散距離
- color：顏色
- inset：內陰影
inset | offset-x | offset-y | color

e.g. `box-shadow: inset -7px -7px 7px 1px lightgray;`

進階應用：擬真立體影子 [https://ithelp.ithome.com.tw/articles/10193561](https://ithelp.ithome.com.tw/articles/10193561)

    .shadow:before{
        content: "";
        position: absolute;
        z-index: -2;
        bottom: 15px;
        left: 10px;
        width: 120px;
        height: 48px;
        box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5);
        transform: rotate(-5deg);
    }
    .shadow:after{
        content: "";
        position: absolute;
        z-index: -2;
        bottom: 15px;
        right: 10px;
        left: auto;
        width: 120px;
        height: 48px;
        box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5);
        transform: rotate(5deg);
    }


    .shadow:before{
        content: "";
        position: absolute;
        z-index: -2;
        left:80px;
        bottom:5px;
        width: 120px;
        height: 40px;
        box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
        transform:skew(50deg);
        transform-origin:0 100%;
    }

這和上面有點不一樣的是要用 transform:skew() 轉角度

和 transform-origin 移動位置去達到想要的效果

因為只有一個影子就作 :before 一個就可以了
- drop-shadow：擬真陰影
drop-shadow(offset-x offset-y blur-radius color)
- offset-x offset-y （需要）
兩個`<length>`值確定陰影偏移量。offset-x指定水平距離，其中負值將陰影放置在元素的左側。offset-y指定垂直距離，其中負值將陰影放置在元素上方。如果兩個值均為0，則陰影將直接放置在元素後面。
- blur-radius （可選的）
陰影的模糊半徑，指定為`<length>`。值越大，陰影變得越大且越模糊。如果未指定，則默認為0，導致邊緣清晰，不模糊。不允許使用負值。
- color （可選的）
陰影的顏色，指定為`<color>`。如果未指定，color則使用屬性的值。

## CSS變數(variable)：
1. 宣告變數：變數都放在 :root 選取器(最高層級)內，並且使用 --自訂名稱作為屬性的方式來宣告變數。

    :root {
        --primary: Aquamarine;
        --background-color: Teal;
    }

> ⭐如果變數不是定義在 `:root` 全域中，而是定義在某個選擇器內，就是區域變數。區域變數只有那個選擇器內（包含子層）可以使用
2. 取用變數方式1：使用 var (--變數名稱) 來套用。

    body {
        background: var(--background-color);
    }

1. 取用變數方式2：`var(--名稱, 預設值);` ( 預設值不一定要填 )
預設值可以在「無法讀取變數名稱時自動套用預設的值」

    h2{
      color: var(--h2, #0cc);
    }

JavaScript 操作 CSS 變數：

    const root = document.documentElement;
    root.style.setProperty('--size', `${this.value}px`)

    // 改用 jquery
    $('html').get(0).style.setProperty('--size', `${$(this).val()}px`);

    // 取值
    const style = getComputedStyle(root); // 读取最终样式
    const value = style.getPropertyValue('--main-color');
    // or 簡化
    getComputedStyle(root)['--main-color']

- element.style：读取的只是元素的内联样式，即写在元素的 style 属性上的样式，支持讀跟寫。
- getComputedStyle(element)：读取的样式是最终样式，包括了内联样式、嵌入样式和外部样式。
### css變數進階用法：
[影片](https://www.youtube.com/watch?v=_2LwjfYc1x8&ab_channel=KevinPowell)、[文章](https://im1010ioio.hashnode.dev/css-variables#heading-kirpgllpmo7nlkjms5uqkg)
- 替變數設定預設值：

    .plan {
        // 變數名稱加底線為模擬私有變數
        --_shadow: var(--shadow, pink);
        --_icon: var(--icon, red)
    }

- 如果需要客製化時：
直接修改變數的值 (覆蓋)，如果沒給值就會讀取上面之預設值

    .plan--pram {
        --shadow: var(--clr-yellow-300);
        --icon: var(--clr-yellow-400);
    }

## CSS功能符號( Functional Notations )
https://www.oxxostudio.tw/articles/202011/css-max-min-clamp-calc.html
- `max()`：定義了一個數學運算最大值，用來定義最大寬度。

    div{
      width:max(80vw, 200px); //寬度不小於 80vw，寬度最小是 200px
    }
    
    /* 原始寫法：
    div{
      width:80vw;
      min-width:200px;
    }
     */

進階使用：
因為是數學函數，可以在括號內進行數學式的運算 ( 注意 CSS 的算式之間必須有空白 )，下方的例子可以讓 h1 自動變換文字大小。

    h1{
      font-size:max(10 * (1vw + 1vh) / 2, 12px);
    }

- `min()`：定義了一個數學運算的最小值。與上面相反

    div{
      width:min(80vw, 200px); //寬度不大於 80vw，寬度最大 200px
    }

- `clamp()`：包含三個數值，定義「最大值、最小值以及中間的數值」，效果等同於：
`max(最小值, min(val, 最大值));`

    div{
      clamp(200px, 100%, 300px); // 最小200px，最大300px。
    }

    /*
    div{
      width: 100%;
      min-width:200px;
      max-width:300px;
    }
    */

- `calc()`：主要作為計算使用，可以和max()、min()、clamp或是 CSS 的變數互相搭配

    :root{
      --w:min(200px, 80vw);
    }
    div {
      height: 50px;
      width:calc(var(--w) - 50px);
    }

## RWD
- CSS media query：規則
- `not`：
用來排除某些設備的樣式，假如有AB兩個設備，其中有一個樣式是想要A有卻不想要B有，這時候就可以用 `@media A not B` 的方式來讓A設備有指定樣式。
- `only`：
用於一些老舊不支援 Media Queries 的瀏覽器，不過現今的瀏覽器都支援 Media Queries 了，所以這個語法了解就好了XD
- `and`：
and 是最常使用的語法，翻成中文可以想成 而且 ，用邏輯的方式去想就代表左右兩邊均成立這個條件才成立，而 and 最常被擺在等等要介紹的 Media Feature 進行串接。
>
ex：

    /* 當裝置是螢幕，而且寬度小於 767px (包含) 時 */
    @media screen and (max-width: 767px) { ... }

    /* 當寬度小於 767px (包含) 或者裝置為直向時 */
    @media (max-width: 767px), (orientation: portrait) { ... }

    /* 當裝置不是螢幕，而且是列印時 */
    @media not screen and print { ... }

- Media Type：裝置類型
Media Type 有非常多種，筆者在這邊僅列出最常用的三種：
* `all`：用於全部的裝置。
* `print`：用於印表機，此樣式套用於預覽列印中。
* `screen`：用於所有的螢幕，舉凡電腦、手機、平板裝置等螢幕皆適用於此。
* `speech`：朗讀裝置，針對可以「讀出」頁面的設備。
- Media Feature (特徵)：
Media Feature 也有非常多種，這邊筆者僅介紹用於 RWD 上的幾種 Features ：
* `width`
寬度可分為 最大寬度(max-width) 以及 最小寬度(min-width) 兩種，用於裝置寬度範圍內的特定樣式。

        @media (min-width: 600px){ }   //當螢幕寬度不小於600px的時候(大於600px)
        
        /* 平板：螢幕寬度介於 768px 和 991px (包含) 之間時 */
        @media screen and (min-width: 768px) and (max-width: 991px) { ... }

新式寫法：可用 >、<、>= 或 <=

        /* 手機：螢幕寬度小於 768px 時 */
        @media screen and (width < 768px) { ... }

        /* 平板：螢幕寬度介於 768px 和 992px 之間時 */
        @media screen and (768px <= width <= 992px) { ... }

        /* 桌機：螢幕寬度大於 992px 時 */
        @media screen and (width > 992px) { ... }

* `height`
高度可分為 最大高度(max-height) 以及 最小寬度(min-height) 兩種，用於裝置高度範圍內的特定樣式。
* `orientation`
當裝置處於 直立(portrait) 以及 橫向(landscope) 時會有特定樣式。

		@media screen and (orientation: portrait) {}：螢幕方向為直式
		@media  (orientation: landscape)   {}：螢幕方向為橫式

* `hover`
當 hover 時，按鈕顏色會變暗，但是在觸控螢幕上會變成類似 focus 的效果，有可能不是我們需要的，這時候就可以透過這個屬性來設定樣式。

        /* 當螢幕支援 hover 行為時 (例如：非觸控螢幕) */
        @media screen and (hover: hover) { ... }

        /* 當螢幕不支援 hover 行為時 (例如：觸控螢幕) */
        @media screen and (hover: none) { ... }

>
PS：在切換的時候，切換前的CSS碼與切換後的CSS碼須放在同一頁才有作用
### 進階
- 可利用可變元素，如：textarea，來控制變數。[sample](https://codepen.io/jh3y/pen/zYZKEyM?editors=1100)，[origin web](https://css-tricks.com/can-we-create-a-resize-hack-with-container-queries/)
## CSS 列印
[link](https://ithelp.ithome.com.tw/articles/10337976)