# 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;"
```
### 背景
- 示意圖:
- 寫法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
- 示意圖:
- 選項:
```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
- 示意圖:
### 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
- 寫法:
```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
- 示意圖:
### 固定定位(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
- 示意圖:
- 寫法:
```css=
style="opacity:0 ~ 1;"
```
- 說明:
```css=
設定容器或標籤的透明度
0代表0%(完全透明), 0.2代表20%, 1代表100%(和原本一樣)
```
### Border-radius
- 示意圖:
- 寫法:
```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
- 示意圖:
- 選項:
```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
- 示意圖:
- 選項:
```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
- 示意圖:
- 選項:
```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;
}
```
- 示意圖:
---
- Contributor: 陳宏瑜
Sign in with Wallet
Connect another wallet