---
# System prepended metadata

title: CSS 標籤整理
tags: [網頁, CSS]

---

# CSS 標籤整理

###### tags: `網頁` `CSS`

[![](https://img.shields.io/badge/dynamic/json?color=orange&label=總觀看人數&query=%24.viewcount&url=https://hackmd.io/FlcMQiyVQO2F5WgAH2bKUQ%2Finfo)]()

### 基本HTML範例
```htmlmixed=
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title></title>
	<style></style>
</head>
<body>
	<p>Hello CSS!</p>
	<p>These paragraphs are styled with CSS.</p>
</body>
</html>
```

### CSS 基本語法
![](https://i.imgur.com/fILgwjL.gif)

Selector(選擇器) - 通常是元素、類別或ID
Declaration(宣告) - 由Property(屬性)和Value(值)所組成，宣告間以分號區隔，最外圍用大括號括住。

### CSS 套用方法
1. 行內載入
寫在元素標籤後面，原始的寫法，較不易更改和維護
```htmlmixed=
<p style="color:red; font-size:20px;">
```
2. 內部載入
格式放在`<head>`的`<style>`中，設定相對應選擇器的格式，可同時做新增、修改
```htmlmixed=
<head>
    <style>
        p
        {
            width: 200px;
            height: 40px;
            background: #b6ff00;
        }
    </style>
</head>
```
3. 外部載入
將CSS格式獨立寫成*.css檔，從HTML內部載入外部的檔案即可，寫法是在`<head>`使用`<link>`，或是在`<style>`中使用@import載入外部檔案
```htmlmixed=
<head>
    <link href="basis.css" rel="stylesheet"/>
</head>
```
```htmlmixed=
<head>
    <style type=text/css>
        @import url(basis.css);
    </style>
</head>
```

### CSS 各類選擇器
1. 類別選擇器
可多重繼承
```htmlmixed=
<style>
    .name
    {
        color: red;
    }
</style>
<body>
    <p class="name"></p>
</body>
```
2. ID選擇器
只能單一繼承
```htmlmixed=
<style>
    #id01
    {
        color: red;
    }
</style>
<body>
    <p id="id01"></p>
</body>
```
3. 標籤選擇器
可指定標籤名稱，所有相同標籤名稱都會套用此格式
```htmlmixed=
<style>
    p
    {
        color: red;
    }
</style>
<body>
    <h2></h2>  <!--這項不套用紅字-->
    <p></p>    <!--這項套用紅字-->
</body>
```
4. 群組選擇器
可將多個指定的選擇器套用相同的格式
```htmlmixed=
<style>
    h2,p
    {
        color: red;
    }
</style>
<body>
    <h2></h2>  <!--這項套用紅字-->
    <p></p>    <!--這項套用紅字-->
</body>
```
5. 屬性選擇器
可指定屬性套用相同的格式，有多種寫法
    1. 標籤[屬性]
    選擇標籤元素指定的屬性
    2. 標籤[屬性 = "值"]
    選擇標籤元素指定的屬性和值(需一模一樣)
    3. 標籤[屬性 ~= "值"]
    選擇標籤元素指定的屬性包含值的設定，設定包含值使用空格隔開單字，只要一個單字符合，即套用相同格式
    4. 標籤[屬性 |= "值"] 
    選擇標籤元素的屬性值是開頭文字加上-符號
    5. 標籤[屬性 ^= "值"]
    選擇標籤元素的指定屬性，其值符合開頭文字
    6. 標籤[屬性 \$= "值"]
    選擇標籤元素的指定屬性，其值符合結尾文字
    7. 標籤[屬性 \*= "值"]
    選擇標籤元素的指定屬性，其值符合任何一處文字

6. 後代選擇器
指定父標籤下的所有子標籤套用CSS格式
```htmlmixed=
父名稱 子名稱
{
    屬性1: 值1;
    屬性2: 值2;
}
```
7. 子選擇器
和後代選擇器差不多，只差在層級須完全相同
```htmlmixed=
父名稱>子名稱
{
    屬性1: 值1;
    屬性2: 值2;
}
```

### CSS 虛構類別
- `a:link` 未照訪的網站
- `a:visited` 照訪過的網站
- `選擇器:hover` 游標觸碰到的狀態
- `選擇器:active` 點擊時的狀態
- `選擇器:focus` 按下元件後的狀態
- `選擇器:enable` 啟用元件的狀態，通常是input元件
- `選擇器:disable` 未啟用元件的狀態，通常是input元件
- `選擇器:first-child` 該選擇器中第一個出現的
- `選擇器:last-child` 該選擇器中最後一個出現的
- `選擇器:n-child(odd)` 選擇器中的奇數個出現的
- `選擇器:n-child(odd)` 選擇器中的偶數個出現的

### CSS 虛構元素
- `選擇器::first-line` 選擇器中第一行的狀態
- `選擇器::first-letter` 選擇器中第一行第一個字母的狀態
- `選擇器::before` 選擇器緊臨前方位置的狀態
    ```htmlmixed=
    h1::before 
    {
      content: url(image.gif);
    }
    ```
- `選擇器::after` 選擇器緊臨後方位置的狀態
    ```htmlmixed=
    h1::after 
    {
      content: url(image.gif);
    }
    ```
- `選擇器::selection`反白部分的狀態

### CSS 顏色
> 範例 : CSS08.htm
- `color:值` 設定文字顏色，可以顏色名稱、數字和百分比來呈現
    - 顏色名稱，如red、blue
    - 數字，如#ff00a3、rgb(255,255,0)
    - 百分比，如rgb(100%,50%,0%)
    - rgb(紅色,綠色,藍色)
    - rgba(紅色,綠色,藍色,透明度)

- `opacity:值` 設定透明度(圖片)
屬性是0~1小數，數字越小代表透明度越高


##### 漸層
- `background:radial-gradient(形狀/大小/指定位置,色彩停止點1,色彩停止點2,...,色彩停止點n)` 放射漸層
    - 形狀，如circle、ellipse
    - 距離，度量單位，代表從中心點向外的半徑
    - 指定位置，如 at + top、bottom、left、right
    - 色彩停止點，色彩後空一格加上百分比或度量單位

	<h1 style="background: radial-gradient(circle,black,silver); color:white;">
	圓黑外漸</h1>
	<h1 style="background: radial-gradient(20px,black, silver); color:white">
	圓黑20像素</h1>
	<h1 style="background:radial-gradient(at top,black,silver 50%); color:white">
	圓心在上</h1>

- `background:linear-gradient(方向,色彩停止點1,色彩停止點2,...,色彩停止點n)` 線性漸層
    - 方向，如0deg、90deg
    - 指定位置，如 to + top、bottom、left、right

	<h1 style="background:linear-gradient(to left,silver 50%,black); color:white;">
	標題常用</h1>
	<h1 style="background:linear-gradient(0deg,silver,black); color:white;">
	由下而上</h1>
	<h1 style="background:linear-gradient(90deg,silver,black); color:white;">
	由左而右</h1>
    
	<h1 style="background:linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); color:white;">     彩虹</h1>
    
    <div style="background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
			width:500px; height:500px;"></div>
            
- `background:repeating-radial-gradient(屬性值)` 重複漸層
`background:repeating-linear-gradient(屬性值)`

	<h1 style="background:repeating-linear-gradient(to right,green 50%,lightgreen,darkgreen); color:white;">
	重複</h1>
	<h1 style="background:repeating-radial-gradient(blue 30px,lightblue,blue); color:white;">
	圓型重複</h1>
	<h1 style="background:repeating-linear-gradient(pink,orange 20px,red 40px); color:white; height:100px">
	上下間隔</h1>
            
### CSS 文字
- `font-size:值` 改變字體大小
    - px 像素點
    - cm 公分
    - mm 公釐
    - em 上層元素的相對大小
    - xx-small、x-small、small、medium、large、x-large、xx-large 預設大小
    - 200% 相對大小

- `font-family:字型1,字型2,...` 改變文字字型
    靠左優先，無法顯示時則顯示新細明體
    - 標楷體
    - 微軟正黑體
    - 也可以從網路上抓取字型，如[Google字型](https://fonts.google.com/)

- `font-style:值` 斜體字
    - iralic 斜體字
    - normal 正常

- `font-weight:值` 改變文字粗細
    - 數值，100~900數字越大越粗
    - lighter、normal、bold、bolder，預設值

- `font:斜體字 文字粗細 字體大小 文字字型` 設定font簡便寫法

- `text-decoration:值` 裝飾線
    - underline 底線
    - overline 頂線
    - line-through 刪除線

- `text-transform:值` 英文大小寫轉換
    - uppercase 全部大寫
    - lowercase 全部小寫
    - capitalize 字首大寫

- `line-height:值` 行高
- `text-indent:值` 首行縮排
- `word-spacing:值` 文字間距
- `letter-spacing:值` 字母間距
- `text-shadow:水平移動量 垂直移動量 模糊值 色彩`
可設定雙重陰影，兩者間用,符號隔開
- `box-shadow:水平移動量 垂直移動量 模糊程度 色彩`
可設定雙重陰影，與text-shadow相似
- `text-stroke:粗細 顏色` 文字外框線
    - 粗細，thin、medium、thick
    - 顏色
    <p style="-webkit-text-stroke:thin black; color:white; font-size:100px;">NEW YORK</p>
- `text-align:值` 文字對齊方式
    - center 置中
    - left 靠左
    - right 靠右

- `vertical-align:值` 文字垂直對齊方式
    - top 對齊顯示區域上緣
    - text-top 對其前標籤上緣
    - bottom 對齊顯示區域下緣
    - text-bottom 對其前標籤下緣
    - middle 對其前標籤中緣

### CSS 清單項目
- `list-style-type:值` 項目清單符號
	<ul>
	<li style="list-style-type:disc;">disc 實心圓點</li>
	<li style="list-style-type:circle;">circle 空心圓點</li>
	<li style="list-style-type:square;">square 實心方塊</li>
	<li style="list-style-type:decimal;">decimal 阿拉伯數字</li>
	<li style="list-style-type:decimal-leading-zero;">decimal-leading-zero 阿拉伯數字(兩位)</li>
	<li style="list-style-type:lower-roman;">lower-roman 小寫羅馬字母</li>
	<li style="list-style-type:upper-roman;">upper-roman 大寫羅馬字母</li>
	<li style="list-style-type:lower-alpha;">lower-alpha 小寫英文字母</li>
    <li style="list-style-type:lower-greek;">lower-greek 小寫希臘字母</li>
	<li style="list-style-type:cjk-ideographic;">cjk-ideographic 中文數字</li>		
	</ul> 

- `list-style-image:url(路徑)` 項目清單圖片
- `list-style-position:值` 清單位置
    - outside 靠外
    - inside 靠內

### CSS 背景
- `background-color:顏色值` 設定背景顏色
    <p style="background-color:lightblue">設定背景顏色</p>
    
- `background-image:url(圖片檔案路徑)` 設定背景圖片

- `background-repeat:屬性值` 背景圖片重複設定
    - no-repeat 不重複顯示
    - repeat-x X軸方向重複
    - repeat-y X軸方向重複
    - repeat X軸和Y軸方向重複
    - space 重複且圖片完整與自動調節間距
    - round 重複且圖片完整與自動調節間距(和space差不多)

- `background-position:X座標 Y座標` 設定背景圖片位置
    - X座標
        - left 靠左
        - center 置中
        - right 靠右
    - Y座標`
        - top 置頂
        - center 置中
        - bottom 置底

- `background-origin:原點位置` 設定原點位置
    - padding-box 以內距的左上角為原點，預設值
    - border-box 以框線的左上角為原點
    - content+box 以內容的左上角為原點

- `background-clip:裁切位置` 設定背景裁切方式
    - border-box 將框線以外的部分去除，預設值
    - padding-box 將內距以外的部分去除
    - content-box 將內容以外的部分去除

- `background-attachment:屬性值` 設定背景圖片捲動跟隨
    - fixed 隨之跟隨
    - scroll 停留原地

<h4 style="color:blue;">補充 - 浮動廣告</h4>

讓廣告可以跟著畫面移動，點擊即可進入連結
```htmlmixed=1
<div style="position:fixed; right:10px; top:10px;">
    <a href="連結">
    <img src="圖片/star.jpg" style="opacity:0.5;">
    </a>
</div>
```

- `background-size:屬性值` 設定背景圖片大小
    - 度量單位
    - 百分比
    - contain 符合區塊大小
    - cover 覆蓋區塊大小
    - auto

### CSS 版面定位
##### box model
![](https://i.imgur.com/ED5MMEU.png)

- margin 外距
    - `margin-top:屬性值` 設定上方外距
    - `margin-bottom:屬性值` 設定下方外距
    - `margin-left:屬性值` 設定左方外距
    - `margin-right:屬性值` 設定右方外距
    - `margin:上 右 下 左` 設定全方向外距(簡便寫法)
        - 度量單位
        - 百分比
        - auto
- onuline 外框線
下節有詳細介紹
- border 框線
下節有詳細介紹
- padding 內距
    - `padding-top:屬性值` 設定上方內距
    - `padding-bottom:屬性值` 設定下方內距
    - `padding-left:屬性值` 設定左方內距
    - `padding-right:屬性值` 設定右方內距
    - `padding:上 右 下 左` 設定全方向內距(簡便寫法)
- content 內容
    - `max-width:屬性值` 設定內容最大寬度
    - `min-width:屬性值` 設定內容最小寬度
    - `max-height:屬性值` 設定內容最大高度
    - `min-height:屬性值` 設定內容最小高度

- `overflow:屬性值` 內容溢出處置
    - visible 超出部分顯示
    - hidden 超出部分隱藏
    - auto 隨內容自動顯示卷軸
    - scroll 有無溢出都會顯示卷軸

- `display:狀態值` 設定元素狀態
    - none 隱藏元素
    - block 區塊元素，會自動分行
    - inline 行內元素，為預設值
    - inline-block 行內元素與區塊元素隨文字段落顯示
    - list-item 清單項目
    - flex 浮動元素，之後章節獨立說明

- `visibility:屬性值` 設定元素可見/不可見
    - visible 可見
    - hidden 不可見

- `flaot:屬性值` 浮動元素
    - none 不變
    - left 置左
    - right 置右

- `clear:屬性值` 去除浮動元素
    - none 無動作
    - left 去除左側
    - right 去除右側
    - both 去除兩側

- `position:屬性值` 設定元素位置
    - static 預設值，不指定位置
    - relative 相對定位，以該元素為基準點
    - absolute 絕對定位，以父元素制定的位置為基準點
    - fixed 固定定位，以瀏覽器左上角為基準點

- `box-sizing:屬性值` 設定Box尺寸
設定Box設定Box的尺寸，設定的尺寸就是看到的尺寸，省去調整內外距的麻煩

### CSS 框線設定
- `border-style:屬性值` 設定框線樣式
    - none 預設值，不顯示框線
    - solid 單線框線
    - double 雙線框線
    - dotted 點狀虛線
    - dashed 線狀虛線
    - groove 3D立體內凹框線
    - ridge 3D立體外凸框線
    - inset 內凹框線
    - outset 外凸框線
    - `border-top-style:屬性值` 也可針對單邊進行設定

- `border-width:屬性值` 設定框線寬度
    - thin 細
    - medium 中
    - thick 粗
    - 度量單位
    - 百分比
    - `border-top-width:屬性值` 也可針對單邊進行設定

- `border-color:顏色` 設定框線顏色
    - `border-top-color:屬性值` 也可針對單邊進行設定

- `border-radius:圓角半徑` 設定圓角框線
    - `border-top-left-radius:圓角半徑` 左上角
    - `border-top-right-radius:圓角半徑` 右上角
    - `border-bottom-left-radius:圓角半徑` 左下角
    - `border-bottom-right-radius:圓角半徑` 右下角

- `border: 寬度 樣式 顏色` 框線簡便寫法
    - `border: 寬度 樣式 顏色` 也可針對單邊進行設定

### CSS 外框線設定
- `outline-style:屬性值` 設定外框線樣式
- `outline-width:屬性值` 設定外框線寬度
- `outline-color:顏色` 設定外框線顏色
與border相同屬性值，參照"CSS 框線設定"
- `outline:樣式 寬度 顏色` 外框線簡便寫法
不可針對單邊進行設定

- `outline-offset:數字` 設定框線和外框線的間距


### CSS 表格框線
- `border-collapse:屬性值` 表格框線分離/不分離
    - separate 分離
    - collapse 重疊

- `border-spacing:屬性值` 表格框線距離
    - 度量單位

- `table-layout:屬性值` 設定版面編排
    - auto 預設值，隨著內容改變
    - fixed 固定

- `empty-cells:屬性值` 設定空白儲存格顯示/影藏
    - show 顯示
    - hide 影藏

- `caption-side:屬性值` 表格標題位置
    - top 表格上
    - bottom 表格下
    
### CSS Flex
祕訣一: 要讓內元件有效果，要在外元件加上 `display:flex`
祕訣二: 每個 HTML 標籤，能同時擁有內元件跟外容器身份

Flex 主軸與交錯軸觀念([測試工具](https://codepen.io/peiqun/pen/WYzzYX))

- `flex-direction` : 決定軸線
    - **row** : 水平
    - row-reverse : 水平，但順序相反
    - column : 垂直
    - column-reverse : 垂直，但順序相反
- `justify-content` : 主軸對齊
    - **flex-start** : 對齊靠左
    - center : 對齊置中
    - flex-end : 對齊置左
    - space-between : 平均分散
    - space-around
    - space-evenly

- `flex-wrap` : 換行屬性
    - nowrap
    - wrap

- `align-item` : 交錯軸對齊(垂直置中)
    - flex-start
    - center
    - flex-end
    - stretch
    - baseline

##### 參考
[體驗營第二週講義](https://hackmd.io/@YmcMgo-NSKOqgTGAjl_5tg/ry5tmBcoI/%2FBYKpMG2cQv2svK-wH20vCQ)

##### Flex 補充資源
* [圖解：CSS Flex 屬性一點也不難](https://wcc723.github.io/css/2017/07/21/css-flex/)
* [卡斯伯完整 Flex 影音教學(40分鐘)](https://www.youtube.com/watch?v=lmBM7_OTDBQ)


### CSS 變形效果
> 範例 : CSS15.htm

對照組
<img src="https://i.imgur.com/rlnPfUZ.jpg" style="width:100px; height:100px;">
- `transform:屬性值`
- `translate(x位移量,y位移量)` 移動
    `translateX(x位移量)`
    `translateY(y位移量)`

    - x位移量(px) 水平位置
    - y位移量(px) 垂直位置

[](https://i.imgur.com/rlnPfUZ.jpg)

<img src="https://i.imgur.com/rlnPfUZ.jpg" style="width:100px; height:100px; transform:translate(100px,10px);">

<p></p>

- `scale(x位移量,y位移量)` 縮放
    `scaleX(x位移量)`
    `scaleY(y位移量)`

<img src="https://i.imgur.com/rlnPfUZ.jpg" style="width:100px; height:100px; transform:scale(1.2,0.8);">

- `rotate(角度)` 旋轉
    - 角度，以deg為單位

<img src="https://i.imgur.com/rlnPfUZ.jpg" style="width:100px; height:100px; transform:rotate(30deg);">

<p><br></p>

- `skew(x位移量,y位移量)` 傾斜
    `skewX(x位移量)`
    `skewY(y位移量)`
    
<img src="https://i.imgur.com/rlnPfUZ.jpg" style="width:100px; height:100px; transform:skewX(15deg);">
<p></p>
<img src="https://i.imgur.com/rlnPfUZ.jpg" style="width:100px; height:100px; transform:skewY(15deg);">

### CSS 2D轉場效果
> 範例 : CSS17.htm
 
- `transition-duration:秒數` 轉場時間

<head>
	<meta charset="utf-8"/>
	<title></title>
	<style>
		#arrow
		{
			width:100px;
			height:100px;
			transform:scale(1);
			opacity:1;
			transition:1.5s transform ease 1s;
		}
		#arrow:hover
		{
			transform:scale(1.5);
			opacity:0.5;
		}
        #arrow02
		{
			width:100px;
			height:100px;
			transform:rotate(0deg);
			transition:5s linear;
		}
		#arrow02:hover
		{
			transform:rotate(360deg);
		}
        #arrow03
		{
			width:100px;
			height:100px;
			transform:rotate(0deg);
			transition:5s ease;
		}
		#arrow03:hover
		{
			transform:rotate(360deg);
		}
        #arrow04
		{
			width:100px;
			height:100px;
			transform:rotate(0deg);
			transition:5s ease-in;
		}
		#arrow04:hover
		{
			transform:rotate(360deg);
		}
        #arrow05
		{
			width:100px;
			height:100px;
			transform:rotate(0deg);
			transition:5s ease-out;
		}
		#arrow05:hover
		{
			transform:rotate(360deg);
		}
        #arrow06
		{
			width:100px;
			height:100px;
			transform:rotate(0deg);
			transition:5s ease-in-out;
		}
		#arrow06:hover
		{
			transform:rotate(360deg);
		}
        #arrow07
		{
			width:100px;
			height:100px;
			transform:rotate(0deg);
			transition:5s ease-in-out 1s;
		}
		#arrow07:hover
		{
			transform:rotate(360deg);
		}
        @keyframes arrow-animaion
        {
            from{transform:rotate(0deg);}
            to{transform:rotate(360deg);}
        }
        #arrow08
        {
            width:100px;
            height:100px;
            animation: arrow-animaion 5s linear infinite   normal;
        } 
        #arrow09
        {
            width:100px;
            height:100px;
            animation: arrow-animaion 5s linear infinite reverse;
        } 
        #arrow10
        {
            width:100px;
            height:100px;
            animation: arrow-animaion 5s linear infinite alternate;
        } 
        #arrow11
        {
            width:100px;
            height:100px;
            animation: arrow-animaion 5s linear infinite alternate-reverse;
        } 
        #arrow12
        {
            width:100px;
            height:100px;
            animation: arrow-animaion 5s linear infinite   normal;
        } 
        #arrow12:hover
        {
            animation-play-state:paused;
        } 
        #arrow13
        {
            width:100px;
            height:100px;
            animation: arrow-animaion 5s linear infinite   normal;
            animation-play-state:paused;
        } 
        #arrow13:hover
        {
            animation-play-state:running;
        } 
	</style>
</head>
<img src="https://i.imgur.com/rlnPfUZ.jpg" id="arrow">

- `transition-property:css屬性` 指定轉場屬性

- `transition-timing-function:屬性值` 轉場模式
    - linear 線性轉換，保持相同的速度轉場
    - ease 先慢再快再慢，預設值
    - ease-in 先慢再快
    - ease-out 先快再慢
    - ease-in-out 先慢再快再慢，速度變化較ease平均，相對平穩

<img src="https://i.imgur.com/rlnPfUZ.jpg" id="arrow02" title="linear">
<img src="https://i.imgur.com/rlnPfUZ.jpg" id="arrow03" title="ease">
<img src="https://i.imgur.com/rlnPfUZ.jpg" id="arrow04" title="ease-in">
<img src="https://i.imgur.com/rlnPfUZ.jpg" id="arrow05" 
title="ease-out">
<img src="https://i.imgur.com/rlnPfUZ.jpg" id="arrow06" 
title="ease-in-out">
<p><br/></p>

- `transition-delay:秒數` 轉場延遲

<img src="https://i.imgur.com/rlnPfUZ.jpg" id="arrow07">
<p><br/></p>

- `transition:轉場時間 轉場屬性 轉場模式 轉場延遲` 

### CSS 動畫效果
- `@keyframes` 動畫關鍵影格
    - from...to
    ```html=
    @keyframes arrow-animaion01
	{
		from{transform:rotate(0deg);}
		to{transform:rotate(360deg);}
	}
    ```
    - 百分比
    ```html=
	@keyframes arrow-animaion02
	{
		0%{transform:rotate(0deg);}
		50%{transform:rotate(360deg);}
		100%{transform:rotate(0deg);}
	}
    ```
    
- `animation-name:關鍵影格名稱` 動畫名稱設定
- `animation-duration:秒數` 動畫持續時間
- `animation-time-function:屬性值` 動畫轉換模式
    - 和"轉場模式"一樣
- `animation-iteration-count:重複次數` 重複次數設定
    - 數字，代表動畫重複的次數，如`animation-iteration-count:2`代表重複2次
    - infinite，無限次數播放，永遠不會停
- `animation-direction:播放方向` 播放方向設定
    - normal 代表從動畫開頭到結束，預設值
    - reverse 代表從動畫結束倒帶回開頭，和normal相反效果
    - alternate 從動畫開頭到結束，再從動畫結束倒帶回開頭。:warning:注意，開頭到結束算第1次播放，結束倒帶回開頭算第2次播放，所以設定播放次數必須大於1次，才能正常顯示效果
    - alternate-reverse 動畫結束倒帶回開頭，再從動畫開頭到結束，與alternate相反效果

<img src="https://i.imgur.com/rlnPfUZ.jpg" id="arrow08" title="normal">
<img src="https://i.imgur.com/rlnPfUZ.jpg" id="arrow09" title="reverse">
<img src="https://i.imgur.com/rlnPfUZ.jpg" id="arrow10" title="alternate">
<img src="https://i.imgur.com/rlnPfUZ.jpg" id="arrow11" title="alternate-reverse">
<p></p>


- `animation-delay:秒數` 播放延遲設定
- `animation-play-state:播放狀態` 播放狀態設定
    - paused 暫停播放
    - running 開始播放

<img src="https://i.imgur.com/rlnPfUZ.jpg" id="arrow12" title="碰到不轉">
<img src="https://i.imgur.com/rlnPfUZ.jpg" id="arrow13" title="碰到才轉">
<p></p>

- `animation:影格名稱 動畫時間 轉換效果 重複次數 播放次數 延遲時間 播放狀態`

### :memo:RWD 響應式網站
#### 格式

@media 裝置 and (裝置屬性: 值)
例子：`@media screen and (min-width: 900px)`

---

- `@media 媒體` 不同裝置
    - all 預設值，全部
    - screen PC、手機瀏覽器都是
    - print 印表機

- `min-width` 求最大寬度
  `max-width` 求最小寬度
  
- `min-height` 求最大高度
  `max-height` 求最小高度
  
- `min-device-width` 求最大螢幕寬度
  `max-device-width` 求最小螢幕寬度
  
- `min-device-height` 求最大螢幕高度
  `max-device-height` 求最小螢幕高度
  
- `<meta name="viewport" content="width=device-width, initial-scale=1.0">`
    響應式網站常用，放在`<head>`中

### CSS 進階補充

- 文字填滿圖片
```htmlmixed=
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title></title>
	<style>
		h1
		{
			width:100%;
			text-align:center;
			font-size:200px;
			font-family:Arial Black;
			background-image: url(圖片/NewYork.jpg);
			background-position: center 20%;
			-webkit-background-clip:text;    /*圖片裁切:以文字為標準*/
			-webkit-text-fill-color:transparent;    /*文字顏色改為透明*/
		}
	</style>
</head>
<body>
	<h1>NEW YORK</h1>
</body>
</html>
```
[](https://i.imgur.com/9w8O0O8.jpg)

<style>
	#p01
	{
		width:100%;
		text-align:center;
		font-size:100px;
		font-family:Arial Black;
		background-image: url(https://i.imgur.com/9w8O0O8.jpg);
		background-position: center 20%;
		-webkit-background-clip:text;
		-webkit-text-fill-color:transparent;
	}
    #p02
	{
		width:100%;
		text-align:center;
		font-size:100px;
		font-family:Arial Black;
		background-image: url(https://i.imgur.com/9w8O0O8.jpg);
        background-position: center 20%;
        color:white;
	}
</style>
<p id="p01">NEW YORK</p>
<p id="p02">NEW YORK</p>

- `font-variant:字體` 轉換特殊字體
    - normal 預設值
    - small-caps 以大寫小字顯示小寫

    <p style="font-variant:small-caps;">Small Caps</p>
    
- `font-size-adjust:長寬比` 自動調整文字大小
    - 百分比

- `text-emphasis:樣式 填滿 顏色` 強調標記
    `text-emphasis-position:顯示位置` 強調標記的顯示位置
    - 樣式，dot、circle、double-circle、triangle等等
    - 填滿，filled、open
    - 顏色
    - 顯示位置，如over、under

    <p><span style="-webkit-text-emphasis:circle filled red;">紐約</span>是美國第一大城</p>
    <p><span style="-webkit-text-emphasis:circle filled red; -webkit-text-emphasis-position:under">紐約</span>是美國第一大城</p>
    
- `writing-mode:直書或橫書` 指定直書或橫書
    - horizontal-tb 橫書，預設值
    - vertical-rl 直書，欄從右到左排列
    - vertical-lr 直書，欄從左到右排列

- `z-index:屬性值` 設定圖層順序
    - auto 和上層元素相同，預設值
    - 數字 數字大的會擋住數字小的元素，如1>(-1)，1就會擋住(-1)
    - [詳細](https://www.w3schools.com/cssref/pr_pos_z-index.asp)

- `cursor:游標形狀` 設定游標形狀
    - <span style="cursor: auto;">auto 預設值</span> 
    - <span style="cursor: all-scroll;">all-scroll</span>
    - <span style="cursor: cursor: -webkit-grab; cursor: grab;">grab</span>
    - <span style="cursor: none;">none</span>
    - <span style="cursor: not-allowed;">not-allowed</span>
    - <span style="cursor: pointer;">pointer</span>
    - <span style="cursor: progress;">progress</span>
    - <span style="cursor: wait;">wait</span>
    - [更多](https://www.w3schools.com/cssref/pr_class_cursor.asp)

- CSS 導航欄

垂直導航欄
> 範例 : CSSad01.htm

水平導航欄
> 範例 : CSSad02.htm

[詳細](https://www.w3schools.com/css/css_navbar.asp)

- CSS 下拉式功能表

文字
> 範例 : CSSad03.htm
> 
按鈕
> 範例 : CSSad04.htm
> 
圖片
> 範例 : CSSad05.htm
>
[詳細](https://www.w3schools.com/css/css_dropdowns.asp)

- CSS 導航欄+下拉式功能表
> 範例 : CSSad06.htm
>  

- CSS 3D轉場效果
    - `rotateX()` 以X軸為軸心做旋轉
    - `rotateY()` 以Y軸為軸心做旋轉
    - `rotateZ()` 以Z軸為軸心做旋轉

<style>
	#arrow14
	{
		width:100px;
	    height:100px;
		transform:rotateX(0deg);
		transition:2s;
	}
	#arrow14:hover
	{
		transform:rotateX(360deg);
	}
</style>

<img src="https://i.imgur.com/rlnPfUZ.jpg" id="arrow14">

---
#### CSS學完囉，接下來繼續學[HTML](/wHIiu44rSWKkAjss2PvleA)和[JavaScript](https://hackmd.io/@AndyChiang/JSnote)吧