---
# System prepended metadata

title: CSS
tags: [docs]

---

# CSS
## Color
### 文字
- 寫法1:
```css=
style="color:填入顏色;"

Ex: style="color:red;"
```
- 寫法2:
```css=
style="color:rgb(0 ~ 255, 0 ~ 255, 0 ~ 255);"

Ex: style="color:rgb(1, 2, 3);"
//rgb(red, green, blue)
```
- 寫法3:
```css=
style="color:hsl(0 ~ 360, 0 ~ 100%, 0 ~ 100%);"

Ex: style="color:hsl(20, 50%, 50%);"
//hsl(色調, 飽和度, 亮度)
```
- 寫法4:
```css=
style="color:#顏色編碼;"

Ex: style="color:#FF8C00;"
```
![image](https://hackmd.io/_uploads/ryTPzmLPC.png)

### 背景
- 示意圖:

![image](https://hackmd.io/_uploads/r1r7VPwPR.png)

- 寫法1:

```css=
style="background-color:填入顏色;"
```
- 寫法2:

```css=
style="background-color:rgb(0 ~ 255, 0 ~ 255, 0 ~ 255);"
```
- 寫法3:

```css=
style="background-color:hsl(0 ~ 360, 0 ~ 100%, 0 ~ 100%);"
```
- 寫法4:

```css=
style="background-color:#顏色編碼;"
```

### 邊框
- 寫法:

```css=
style="border:width sort color;"

Ex: style="border:5px solid red;"
```
#### Width
- 寫法1:

```css=
可以指定長度值，例如2px 或0.1em(單位為px, pt, cm, em 等)
```

- 寫法2:

```css=
使用關鍵字，分別為thick,medium和thin
```
#### Sort
- 示意圖:
![image](https://hackmd.io/_uploads/B17j4DwvA.png)
- 選項:
```css=
dotted: 定義一個點線邊框
dashed: 定義一個虛線邊框
solid : 定義實線邊框
double: 定義兩個邊框。兩個邊框的寬度和border-width 的值相同
groove: 定義3D溝槽邊框。效果取決於邊框的顏色值
ridge : 定義3D脊邊框。效果取決於邊框的顏色值
inset : 定義一個3D的嵌入邊框。效果取決於邊框的顏色值
outset: 定義一個3D突出邊框。 效果取決於邊框的顏色值
```
#### Color
- 寫法:
```css=
填入顏色
rgb(0 ~ 255, 0 ~ 255, 0 ~ 255)
hsl(0 ~ 360, 0 ~ 100%, 0 ~ 100%)
#顏色編碼
```
## Padding & Margin
- 示意圖:
![image](https://hackmd.io/_uploads/Syd8zUUDC.png)

 ### Padding
 功能:控制內部空間，定義邊框與內容之間的空間，即上下左右的內邊距
- 寫法:
```css=
style="padding:length(top) length(right) length(bottom) length(left);"

Ex: style="padding:20px 30px 40px 50px;"
```
- 注意事項:

```css=
每一個length皆需賦予一個值，值得大小代表賦予空間的大小，且不能為負數
若padding後面只寫一個值，則他同時代表top, right, bottom, left
當內邊距被清除時，所釋放的區域將會被背景顏色填滿
```
 ### Margin
 功能:控制外部空間，定義周圍的空間
- 寫法:
```css=
style="margin:length(top) length(right) length(bottom) length(left);"

Ex: style="margin:20px -30px -40px 50px;"
```
- 注意事項:

 ```css=
每一個length皆需賦予一個值，值得大小代表賦予空間的大小
與padding不同的是margin的值可以為負數
當數字為正時，代表往裡面增加空間;若數字為負，則代表往外面增加空間
若margin後面只寫一個值，則他同時代表top, right, bottom, left
```
## Float & Display
### Float
![image](https://hackmd.io/_uploads/HJAYWKLvA.png)

- 寫法:
```css=
style="float:sort;"

Ex: style="float:right;"
```
#### Sort
- 說明:

```css=
left:內容從 image 的右側往下排列
right:內容從 image 的左側往下排列
none:不做變化
```
### Display
- 寫法:
```css=
style="display:sort;"

Ex: style="display:block;"
```
#### Sort
- 說明:
```css=
HTML標籤有預設兩種顯示方式，分別為block和inline
block:不管文字寬度多少，占用空間為一整行
inline:占用空間為文字寬度
```
## Position
- 示意圖:
![image](https://hackmd.io/_uploads/SkdLQvwwA.png)

### 固定定位(fixed)
- 寫法:
```css=
style="position:fixed;"
```
- 說明:
```css=
不論滑鼠如何滾動，標籤或容器裡面內容的位置都不會改變，類似float的感覺，會自己獨立一層
也可以在後面加上方位，讓內容固定的位置改變，不加的話就是固定在原本的方位

Ex: style="position:fixed; bottom:0px; left:0px;"
```

### 相對定位(relative)
- 寫法:
```css=
style="position:relative;"
```
- 說明:
```css=
相對於原本的位置去做偏移，因此後面需加上偏移量，不加的話偏移量為0
有設定相對定位的內容，會蓋過沒有設定相對定位的內容

Ex: style="position:relative; bottom:30px; left:30px;"
```

### 絕對定位(absolute)
- 寫法:
```css=
style="position:absolute;"
```
- 說明:
```css=
若是外層也有寫定位的話，則它會根據外層的位置去做定位
如果外層沒有寫，則是根據網頁的位置去做定位
假如所有外層皆設有定位，那麼它將以最接近它的外層去做定位
設定絕對定位的內容會自己獨立一層，但和float不同，會隨著網頁滑動
絕對定位也可以賦予它方位

Ex: style="position:absolute; bottom:0px;"
```
## Opacity & Border-radius
### Opacity
- 示意圖:
![image](https://hackmd.io/_uploads/SkLlGvvDR.png)

- 寫法:
```css=
style="opacity:0 ~ 1;"
```
- 說明:
```css=
設定容器或標籤的透明度
0代表0%(完全透明), 0.2代表20%, 1代表100%(和原本一樣)
```
### Border-radius
- 示意圖:
![image](https://hackmd.io/_uploads/rkBk7vwDA.png)

- 寫法:
```css=
style="Border-radius:length(左上) length(右上) length(右下) length(左下);"
```
- 說明:
```css=
讓邊角變得圓弧
length需要指定一個值，例如2px，值越大邊角越圓弧
若Border-radius後面只接一個值，則它同時代表左上，右上，右下和左下的值
```
### Border-bottom-right-radius
- 寫法:
```css=
style="Border-bottom-right-radius:length(X軸) length(Y軸);"
```
- 說明:
```css=
可以設定單一角他圓弧的量
length需要指定一個值，例如2px，值越大邊角越圓弧
Border-bottom-right-radius和Border-bottom-left-radius
和Border-top-right-radius和Border-top-left-radius的用法一樣
```

## style標籤
### style標籤
- 寫法:

index.html↓
```css=
<!DOCTYPE html>
<html>
    <head>
        <mata charset="UTF-8"/> 
        <title>你網頁的名稱</title>


        <style>
            h1{
                color:填入顏色;
                    .
                    .
                    .
            }

            p{
                color:填入顏色;
                background-color:填入顏色;
                    .
                    .
                    .
            }
        </style>


    </head> 
    <body>
        <h1>css</h1>
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
    </body>
</html>
```
- 說明:
```css=
可以一次更改所有同類型的標籤內容，而不需要逐個更改
將<style>寫在<head>裡面，並將想要改變的標籤寫入<style>中，後面接上大括號
大括號裡面寫入想要改變的狀態
```
## 引入外部CSS檔案
### 引入外部CSS檔案
- 寫法:

index.html↓
```css=
<!DOCTYPE html>
<html>
    <head>
        <mata charset="UTF-8"/> 
        <title>你網頁的名稱</title>


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


    </head> 
    <body>
        <h1>css</h1>
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
    </body>
</html>
```
style.css↓
```css=
h1{
    color:填入顏色;
        .
        .
        .
}

p{
    color:填入顏色;
    background-color:填入顏色;
        .
        .
        .
}

```

- 說明:

```css=
先在資料夾裡面創建一個.css的檔案，將想要改變的內容放進去
將<link>寫在<head>裡面，而link代表從外部引入檔案
rel="stylesheet"代表引入的檔案是一個css的檔案
href="檔名.css"代表引入檔案的位置
```
## Class & ID
### Class
- 寫法:

index.html↓
```css=
<!DOCTYPE html>
<html>
    <head>
        <mata charset="UTF-8"/> 
        <title>你網頁的名稱</title>

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

    </head> 
    <body>
        <h1>css</h1>
        <p class="country background-color">法國</p>
        <p class="country">德國</p>
        <p class="country">義大利</p>
        <p class="food background-color">馬卡龍</p>
        <p class="food">香腸</p>
        <p class="food">鳳梨披薩</p>
    </body>
</html>
```
style.css↓
```css=

.country{
    color:填入顏色;
        .
        .
        .
}

.food{
    color:填入顏色;
        .
        .
        .
}

.background-color{
    background-color:填入顏色;
        .
        .
        .
}
```

- 說明:

```css=
在標籤後面插入class="命名文字"，然後在資料夾創建一個.css的檔案
命名文字盡量跟後面的內容有關連，方便識別
一個標籤可插入多種命名文字，中間要用空白間隔開
在外部的css檔案中寫入 .命名文字{} ，即可在大括號中寫入想要改變的狀態
```
### ID
- 寫法:

index.html↓
```css=
<!DOCTYPE html>
<html>
    <head>
        <mata charset="UTF-8"/> 
        <title>你網頁的名稱</title>

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

    </head> 
    <body>
        <h1 id="css-h1">css</h1>
        <p class="country background-color">法國</p>
        <p class="country">德國</p>
        <p class="country">義大利</p>
        <p class="food background-color">馬卡龍</p>
        <p class="food">香腸</p>
        <p class="food">鳳梨披薩</p>
    </body>
</html>
```

style.css↓
```css=
.country{
    color:填入顏色;.
        .
        .
        .
}

.food{
    color:填入顏色;
        .
        .
        .
}

.background-color{
    background-color:填入顏色;
        .
        .
        .
}

#css-h1{
    color:填入顏色;
    background-color:填入顏色;
        .
        .
        .
}
```

### id 和 class 的差別

```css=
ID和class的差別在於，id可以給予標籤一個唯一的識別名稱
命名過的識別名稱只能出現過一次
一個標籤只能給予一個識別名稱
在標籤後面插入id="識別名稱"，然後在資料夾創建一個.css的檔案
在外部的css檔案中寫入 #識別名稱{} ，即可在大括號中寫入想要改變的狀態
```
## Css選擇器
### 套用多個標籤
- 寫法:

style.css↓
```css=
標籤1, 標籤2 ....... {
    color:填入顏色;
        .
        .
        .
}
```
- 說明:
```css=
在資料夾創建一個.css的檔案
在檔案中寫入 標籤1, ...{} ，即可在大括號中寫入想要改變的狀態
套用多個標籤時，中間必須要用"，"隔開
大括號裡所寫的內容會套用到前面出現的標籤裡面

Ex: #css-h1, .country, h1, p {
    color:填入顏色;
        .
        .
        .
    }
```
### 套用所有標籤
- 寫法:

style.css↓
```css=
* {
    color:填入顏色;
        .
        .
        .
}
```
- 說明:
```css=
在資料夾創建一個.css的檔案
在檔案中寫入 *{} ，即可在大括號中寫入想要改變的狀態
大括號裡所寫的內容會套用到所用標籤裡面
```

### 套用標籤內的子標籤
- 寫法:

style.css↓
```css=
標籤 子標籤 {
    color:填入顏色;
        .
        .
        .
}
```
- 說明:
```css=
在資料夾創建一個.css的檔案
在檔案中寫入 標籤 子標籤{} ，即可在大括號中寫入想要改變的狀態
系統會搜尋在標籤內符合子標籤的元素，並將括號裡的內容套用進去

Ex: ul li {
    color:填入顏色;
        .
        .
        .
    }
```

### 套用屬性標籤
- 寫法:

style.css↓
```css=
 [屬性]{
    color:填入顏色;
        .
        .
        .
}
```
- 說明:
```css=
在資料夾創建一個.css的檔案
在檔案中寫入 [屬性]{} ，即可在大括號中寫入想要改變的狀態
系統會搜尋具有這個屬性的標籤，並將括號裡的內容套用進去

Ex1: [type] {
    color:填入顏色;
        .
        .
        .
    }

Ex2: [href] {
    color:填入顏色;
        .
        .
        .
    }
```
### 透過滑鼠添加特殊樣式
- 寫法:

style.css↓
```css=
 標籤:hover{
    color:填入顏色;
        .
        .
        .
}
```
- 說明:
```css=
在資料夾創建一個.css的檔案
在檔案中寫入 標籤:hover{} ，即可在大括號中寫入想要改變的狀態
當滑鼠移動到套有 :hover 的標籤上面時，系統會將括號裡的內容套用進去

Ex1: #css-h1:hover {
    color:填入顏色;
        .
        .
        .
    }

Ex2: [href] {
    color:填入顏色;
        .
        .
        .
    }
```

## Flex

index.html↓

```css=
<!DOCTYPE html>
<html>
    <head>
        <mata charset="UTF-8"/> 
        <title>你網頁的名稱</title>

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

    </head> 
    <body>

        <div class="container">
            <div class="box-1">區塊1</div>
            <div class="box-2">區塊2</div>
            <div class="box-3">區塊3</div>
        </div>

    </body>
</html>
```

### Dispaly
- 寫法:

style.css↓
```css=
.container{
   display:flex;
}

.container div{
   border:5px solid red;
    padding:10px;
    width:100px;
}

.box-1{
    flex:1;
    order:3;

.box-2{
    flex:2;
    order:2;
}

.box-3{
    flex:3;
    order:1;
}

```
- 說明:
```css=
在資料夾創建一個.css的檔案

flex 預設方式為橫排，排序方式為由左到右 (即使頁面拉長也不會換行)
box-1分配空間大小為橫排的 1/6 ← (1/(1+2+3))
box-2分配空間大小為橫排的 2/6 ← (2/(1+2+3))
box-3分配空間大小為橫排的 3/6 ← (3/(1+2+3))

order 可以改變空間分配順序 (輸入的數字可以為負數)
在寫入 order 前，排序方式由左到右分別為box-1 → box-2 → box-3
在寫入 order 後，排序方式由左到右分別為box-2 → box-1 → box-3
```

###  Flex-wrap
- 寫法:

style.css↓
```css=
.container{
   display:flex;
   flex-wrap:wrap;
}

.container div{
   border:5px solid red;
    padding:10px;
    width:100px;
}

.box-1{
    flex:1;
    order:3;

.box-2{
    flex:2;
    order:2;
}

.box-3{
    flex:3;
    order:1;
}

```
- 說明:
```css=
在資料夾創建一個.css的檔案
當頁面寬度不夠時，會自動換行，不會去擠壓空間
主軸為由左而右，次軸為由上而下
```

### Flex-direction
- 寫法:

style.css↓
```css=
.container{
   display:flex;
   flex-wrap:wrap;
   flex-direction:sort;
}

.container div{
   border:5px solid red;
    padding:10px;
    width:100px;
}

.box-1{
    flex:1;
    order:3;

.box-2{
    flex:2;
    order:2;
}

.box-3{
    flex:3;
    order:1;
}
```

#### Sort
- 示意圖:
![image](https://hackmd.io/_uploads/S1ykAZhDR.png)
- 選項:
```css=
column        : 主軸為由上而下，次軸為由左而右
column-reverse: 主軸為由下而上，次軸為由左而右
row           : 主軸為由左而右，次軸為由上而下
row-reverse   : 主軸為由右而左，次軸為由上而下
```


- 說明:
```css=
在資料夾創建一個.css的檔案
flex-direction:sort 可以改變排序方式

Ex: flex-direction:column;
```
### Justify-content
- 寫法:

style.css↓
```css=
.container{
   display:flex;
   flex-wrap:wrap;
   flex-direction:sort;
   justify-content:sort;
}

.container div{
    border:5px solid red;
    padding:10px;
    width:100px;
}

.box-1{
    flex:1;
    order:3;

.box-2{
    flex:2;
    order:2;
}

.box-3{
    flex:3;
    order:1;
}
```

#### Sort
- 示意圖:
![image](https://hackmd.io/_uploads/BJ6e1GhwR.png)
- 選項:
```css=
flex-start    :區塊從起始位置開始排列
flex-end      :區塊從尾端位置開始排列
center        :區塊從中間位置開始排列
space-around  :均勻排列每個區塊，每個區塊周圍分配相同的空間
space-between :均勻排列每個區塊，首個區塊放置於起點，最後一個區塊放置於終點
space-evenly  :均勻排列每個區塊，每個區塊之間的間隔相等
```

- 說明:
```css=
在資料夾創建一個.css的檔案
justify-content:sort 可以改變主軸區塊排列方式

Ex: justify-content:center;
```
### Align-content & Align-items
- 寫法:

style.css↓
```css=
.container{
    display:flex;
    flex-wrap:wrap;
    flex-direction:sort;
    justify-content:sort;
    align-content:sort;
}

.container div{
    border:5px solid red;
    padding:10px;
    width:100px;
}

.box-1{
    flex:1;
    order:3;

.box-2{
    flex:2;
    order:2;
}

.box-3{
    flex:3;
    order:1;
}
```

#### Sort
- 示意圖:
![image](https://hackmd.io/_uploads/rJWVA72DC.png)

- 選項:
```css=
align-content & align-items 可使用↓
flex-start    :區塊從起始位置開始排列
flex-end      :區塊從尾端位置開始排列
center        :區塊從中間位置開始排列

align-content 可使用↓
space-around  :均勻排列每個區塊，每個區塊周圍分配相同的空間
space-between :均勻排列每個區塊，首個區塊放置於起點，最後一個區塊放置於終點
space-evenly  :均勻排列每個區塊，每個區塊之間的間隔相等
```

- 說明:
```css=
在資料夾創建一個.css的檔案
align-content:sort 可以改變次軸區塊排列方式
align-content ← 當主軸為多行時的用法
align-items ← 當主軸為單行時的用法

Ex: align-content:center;
```
## Animation
index.html↓

```css=
<!DOCTYPE html>
<html>
    <head>
        <mata charset="UTF-8"/> 
        <title>你網頁的名稱</title>

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

    </head> 
    <body>

        <h1>css</h1>
        <div class="box box-animation"></div>

    </body>
</html>
```

- 寫法:

style.css↓
```css=
@keyframes 命名 {
    from { 寫入改變內容 }
    to { 寫入改變內容 }
}

.box-animation{
    animation-name:命名;
    animation-duration:持續時間;
    animation-iteration-count:重複次數;
    animation-delay:延遲時間;
}    
```
- 說明:
```css=
Ex: @keyframes change-color {
    from { background-color:green; }
    to { background-color:red; }
    }

    .box-animation{
        animation-name:change-color;
        animation-duration:5s;
        animation-iteration-count:infinite;
        animation-delay:5s;
    }    
```
- 示意圖:
![image](https://hackmd.io/_uploads/ryrLdJxu0.png)


---

- Contributor: 陳宏瑜