---
# System prepended metadata

title: CSS

---

:::warning
CSS負責網頁的美化及排版
要如何套用，就接著看下去吧~
:::
如果對於HTML還不熟悉，點擊以下可以回到筆記頁面
📑[HTML筆記](https://hackmd.io/@boboshi/Bki3aQDd2)
💡[CSS 教學影片](https://youtu.be/Ml78vnNTBLw?si=05uP8XwPxQ4gySEH)
> 在開始之前，要先準備好HTML的檔案喔!!
# 顏色color
在需要用到顏色的標籤後，套上屬性style
會先介紹使用地方，最後會有顏色的說明喔~

## 文字顏色
```htmlmixed=!
<body> 
        <h1>CSS筆記示範</h1>
        <p style="color:purple;">文字顏色</p>
</body>
```
> 執行結果
> ![](https://hackmd.io/_uploads/Bk77CCoth.png)
* > color使用方法如上
* > 分號要記得

## 文字背景
```htmlmixed=!
<body> 
        <h1>CSS筆記示範</h1>
        <p style="background-color:gray;">文字背景</p>
</body>
```
> 執行結果
> ![](https://hackmd.io/_uploads/SyoqJkhK2.png)
* > 使用background-color
* > 分號要記得

## 文字邊框
```htmlmixed=!
<body> 
        <h1>CSS筆記示範</h1>
        <p style="border:3px solid green;">文字邊框</p>
</body>
```
> 執行結果
> ![](https://hackmd.io/_uploads/B1TAxy3Y3.png)
* > 使用border
* > 需要給他三個值，邊框粗度、邊線樣式、邊線顏色
* > px為像素，solid為實線，dashed為虛線
:::danger
甚至也可以調框的大小喔!，使用之前提過的width與height即可
當然也可以將上述三種結合起來~
:::
## 顏色
知道的英文單字不多怎麼辦?怕所呈現的色彩不夠繽紛?
以下有幾種解決方法:
1. 如果是使用VScode可以直接點選顏色的框框來選取自己想要的顏色
![](https://hackmd.io/_uploads/By7IBk2Y2.png)
> 系統會跑出RGB的顏色呈現方式
2. 上網搜索"色碼表"，點選第一個網站即可
![](https://hackmd.io/_uploads/SJb1LJht2.png)
> 裡面有各種顏色的顏色代碼，可以直接放入程式碼內
3. 上網搜索"W3C CSS"點擊第一個網站內的color
![](https://hackmd.io/_uploads/Sy11kghF3.png)
> 可用picker尋找自己需要的顏色
:::success
顏色使用方法有四種:顏色名稱、顏色編碼、RGB、HSL
:::
# Padding & Margin
兩者皆為控制空間的屬性
>padding ->控制內部空間
>margin ->控制外部空間

在開始說明使用方法之前，先來個補充
:::warning
查看一個網頁的HTML與CSS，按下電腦中的F12(我的筆電是Fn+F12啦，可能每台電腦都不太一樣)
* HTML
![](https://hackmd.io/_uploads/By9l6znFh.png)
* CSS
![](https://hackmd.io/_uploads/Sy58TMnY3.png)
:::
> 等等執行結果都會加上網頁的CSS喔~
## Padding
```htmlmixed=!
<h1>CSS筆記示範</h1>
<div style="padding:20px; color:brown; border:2px solid black ; background-color: #4dffb8;">
        這是測試padding與margin的文字
</div>
```
> 執行結果
> ![](https://hackmd.io/_uploads/SysglQhYn.png)
* > 可以看到CSS內的padding為20
* > 也可以明顯看到文字空間變大了
## Margin
```htmlmixed=
<h1>CSS筆記示範</h1>
<div style="margin:20px; color:brown; border:2px solid black ; background-color: #4dffb8;">
    這是測試padding與margin的文字
</div>
```
> 執行結果
> ![](https://hackmd.io/_uploads/B1cNW73F2.png)
* > 可以看到CSS內的margin為20
* > 也可以看到文字方框的上下左右多了空間
* > 不清楚的話可以對比最一開始的圖XD
:::warning
margin的值可以為負數，一起來看看會發生甚麼事

* 值為-20
![](https://hackmd.io/_uploads/rJ6kHQ2Kn.png)
* 值為-50
![](https://hackmd.io/_uploads/rJ0sVX2th.png)
會直接位移

**注意:padding不能為負值喔~~**
:::
> 如果說要上下左右都不同的值呢?

先來個範例
```htmlmixed=
<div style="padding-top:20px; color:brown; border:2px solid black ; background-color: #4dffb8;">
    這是測試padding與margin的文字
</div>
```
![](https://hackmd.io/_uploads/rJO_8Q3tn.png)
* > 應該可以明顯看到上方多了20px
:::success
其他都是一樣，以padding為例，分別使用
* 上`padding-top`
* 下`padding-bottom`
* 左`padding-left`
* 右`padding-right`

如果是margin就直接取代padding直接使用就可以囉~
:::
> 那如果四個值都不同，難不成要寫四個嗎?

那麼可以使用**直接賦予四個值**
```htmlmixed=
<div style="padding:20px 30px 40px 50px; color:brown; border:2px solid black ; background-color: #4dffb8;">
     這是測試padding與margin的文字
</div>
```
> 直接看CSS執行結果
> ![](https://hackmd.io/_uploads/HyPXK72Yh.png)
* > 你會發現，賦予值的順序為，上右下左，也就是從上順時針~
:::danger
空間的利用，多多少少也可以幫助排版喔~
:::
# Float & Display
## float
> 可以善用3D圖幫助理解，但這裡就不多加說明了

float稱為漂浮，意思就是讓原本平面的東西浮起來
我們可以利用float來**進行排版**
先來看看原本長甚麼樣子
```htmlmixed=!
<img src="noya.jpg" width="400"/>
<p>這是我大西谷，暈爛</p>
```
內容便是一張圖以及一段文字
> 執行如下
> ![](https://hackmd.io/_uploads/S1-ERC0Fh.png)
* > 會看到先圖片再來換行才接著文字


那如果想要文字在圖片的左右邊呢?這時float就可以出場了~
```htmlmixed=
<img style="float:left;"; src="noya.jpg" width="200"/>
<p>這是我大西谷，暈爛</p>
```

> 執行結果
> ![](https://hackmd.io/_uploads/BkookJkc3.png)
* > 可以看到文字跑到圖片的右邊了
* > 使用right就會相反喔
* > float是隸屬在style底下的
* > 很常被使用在一個網頁最開頭的索引標籤或目錄
:::danger
私心的放上喜歡的推XDD
:::
## display
在之前的html我們有提過占空間的問題
分別是p標籤以及span標籤
而display就是再說文字占空間的顯示方式
:::warning
p標籤為block顯示方式->佔一整行
span標籤為inline顯示方式->用多少占多少
:::
display就是用來轉換的
> 如果要使p標籤顯示方式變為用多少佔多少
```htmlmixed=
<p style="display:inline;">今天是7月14日</p>
<p style="display:inline;">是我家長頸鹿的生日</p>
```
> 執行結果
> ![](https://hackmd.io/_uploads/rk1PLJkc2.png)
* > 原本兩行直接變為一行
* > 直接曝光我家idol生日哈哈


span也是一樣喔~
```htmlmixed=
<span style="display:block;">今天是7月14日</span>
<span style="display:block;">是我家長頸鹿的生日</span>
```
> 執行結果
> ![](https://hackmd.io/_uploads/rysCwJ1qh.png)
* > 原本一行變成兩行
* > display是隸屬在style底下的喔
:::danger
我家長頸鹿也是有生日的~~
:::
# Position
有定位之義，使用position後，會跟float很像
先放上最原始的程式碼
```htmlmixed=
<div style="width:80px; height:80px; background-color:blue;"></div>
<div style="width:100px; height:100px; background-color:red;"></div>
```
> 最原先的網頁
> ![](https://hackmd.io/_uploads/HyHtNRJc2.png)
* > 會看見一紅一藍的方框 
position有三種定位方式，分別如下
## 1.fixed 絕對定位
> 如果我們將藍框框固定的話
```htmlmixed=
<div style="**position:fixed** ; width:80px; height:80px; background-color:blue;"></div>
<div style="width:100px; height:100px; background-color:red;"></div>
```
> 執行結果
> ![](https://hackmd.io/_uploads/r1g480ycn.png)
* > 紅框框會向上移動
* > 跟float相似，使用fixed就會自行多出一層
:::success
特別的地方是，他會隨著滾輪移動，而一樣在畫面上
簡單來說，就是被固定在畫面上，不論你怎麼移動網頁，他都會在同一個地方
:::
:::warning
也可以固定在網頁上下左右
分別使用`top bottom right left`
EX
```htmlmixed=
<div style="position:fixed; top:0px; width:80px; height:80px; background-color:blue;"></div>
<div style="width:100px; height:100px; background-color:red;"></div>
```
![](https://hackmd.io/_uploads/BJSPjC19h.png)
會看到他被固定在網頁的最上方，是因為top值為0px
其他的也是一樣道理，就不一一贅述了
:::
## 2.relative 相對定位
就是很直接的，在原本應該出現的位子來做偏移
```htmlmixed=
<div style="position:relative; top:30px; width:80px; height:80px; background-color:blue;"></div>
<div style="width:100px; height:100px; background-color:red;"></div>
```
> 執行結果
> ![](https://hackmd.io/_uploads/ByQsFRM9n.png)
* > 不會貼著網頁最底邊來偏移
* > 而是以原先會出現的位置偏移了30px
* > 相對位置通常都會搭配`top bottom right left`，沒搭配的話就根本看不出變化

## 3.absolute 固定定位
與fixed相似，會自己獨立一層
我們先來看看例子
```htmlmixed=
<body> 
    <div style="padding:30px; border: 5px red solid;">
        <div style="padding:30px; border: 4px red solid;">
            <div  style=" width:20px; height:20px; background-color: black;"></div>
        </div>
    </div>
</body>
```
![](https://hackmd.io/_uploads/H13eHWn9n.png)
> 為兩個紅框與一個黑方塊
> 
接著我們對黑方塊使用absolute
```htmlmixed=
<div  style="position:absolute; width:20px; height:20px; background-color: black;"></div>
```
> 執行結果
> ![](https://hackmd.io/_uploads/S1khSWnqh.png)
* > 會明顯看到紅框往內縮，為甚麼?
:::warning
因為當黑方塊獨自自己一層時，前面兩的紅框不會知道下一個黑方塊的大小，所以便會往內縮
:::
> 那如果我們也對外層的紅框做定位呢?

使用相對定位，以及將黑方塊設top
```htmlmixed=
<div style="padding:30px; border: 5px red solid;">
        <div style="position: relative; padding:30px; border: 4px red solid;">
            <div  style="position: absolute;top:0px; width:20px; height:20px; background-color: black;"></div>
        </div>
</div>
```
> 執行結果
> ![](https://hackmd.io/_uploads/BJIAvZhq3.png)
* > 黑方塊會依照外層的相對位置來做定位
* > 如果外層沒設，那就會依照整個網頁來定位
* > 如果兩個紅框都做了定位，黑方框則會以最靠近的為主
:::success
**fixed與absolute相異處**
前面提到相似處就是，兩者都會自己獨立一層，像漂浮一般
相異處便是absolute就算設上下左右也不會隨著滾輪移動
:::
:::danger
這部分我花了至少有兩周，好懶
:::

# Opacity 透明度
範圍為0~1，0是完全透明
先來看看一開始的設定，為一方框加上文字，而兩者是重疊的
```htmlmixed=
<p style="position: relative;top: 65px;left: 25px;">哈囉</p>
<div style="width:80px;height: 80px;background-color: blue;"></div>
```
![](https://hackmd.io/_uploads/Hy5mhgxsh.png)
可以看到文字其實不怎麼明顯，Opacity就能出場了
```htmlmixed=
<p style="position: relative;top: 65px;left: 25px;">哈囉</p>
<div style="opacity:0.2; width:80px;height: 80px;background-color: blue;"></div>
```
> 執行結果
>![](https://hackmd.io/_uploads/SJCNTgxsn.png)
* > 變淺許多了吧
* > 0會完全透明而1就會和原先一樣了
# Border-radius 邊緣圓弧
直接來用例子，原始程式碼會和剛剛的相同
```htmlmixed=
<p style="position: relative;top: 65px;left: 25px;">哈囉</p>
<div style="border-radius:10px; opacity:0.2 ; width:80px;height: 80px;background-color: blue;"></div>
```
> 執行結果
> ![](https://hackmd.io/_uploads/r1ZuReein.png)
* > 可以知道四個角都變成了像素10的圓弧
* > 而當值變成40圖形則會成圓
:::warning
>那如果想要四個角都不同值呢?

可以這麼寫
```htmlmixed=
<div style="border-radius:10px 20px 30px 40px; opacity:0.2 ; width:80px;height: 80px;background-color: blue;"></div>
```
![](https://hackmd.io/_uploads/rykHybxo2.png)
* > 順序為左上右上右下左下，順時針，跟之前的相同
:::
:::danger
很明顯是美編所需要的~
:::
# Style標籤額外寫法
![](https://hackmd.io/_uploads/rJeWKXrj2.png)
> 如果我們要將每行的文字更改顏色，那是不是只能一行一行改呢?

當然不是，我們可以使用style的其他CSS寫法
我們回到上頭的head標籤
```htmlmixed=
<head> 
    <meta charset="UTF-8"></meta> 
    <title> shibobo.web </title> 
    <style>
        p{
            color:blue;
        }
    </style> 
</head>
```
> 執行結果
> ![](https://hackmd.io/_uploads/By7fcQHi2.png)
* > 就是只要是P標籤，都會有這個color藍色屬性
* > 下面的P標籤就也可以不用加上style
* > 要加上其他style屬性可以直接在上頭做更改
:::danger
ㄗ偷懶不想一個一個做更改，這個就很方便~~
:::
# 引入外部CSS檔案
將剛剛所額外寫的style，放置到一個新創建的style.css檔案
```css=
p{
    color:blue;
}
```
這就是CSS內檔案所寫的內容
> 那我們要怎麼引入這個檔案到我們所寫的HTML呢?
```htmlmixed=
<head> 
    <meta charset="UTF-8"></meta> 
    <title> shibobo.web </title> 
    <link rel="stylesheet" href="style.css" />
</head>
```
* > 寫在head標籤內
* > rel是在告訴說，現在引入的檔案是css的檔案
* > herf則是告訴這css檔案位址
* > css檔案與html在同個資料夾底下喔

> 你有可能會有疑問，為甚麼要額外多出一個檔案呢?

原因就是，你可能做了很多個網頁，而他們的style的屬性都相同
這時，**你就可以直接引入這個檔案，就不用每個html檔案都寫重複的東西**
:::danger
其實就C++你額外寫的function相似，需要相同的功能再引入，要更改也不用碰到其他程式碼
:::
# Class & Id
分類標籤以及識別標籤，讓我們更好的去套用CSS
:::success
先來說說這兩者的差別在哪
1. class可以賦予多個標籤，而id一個標籤只能有一個
2. class一個標籤內可以有多個，而id一個標籤只能有一個

id就可以當作是每個人的個人身分證~
:::
## class
![](https://hackmd.io/_uploads/SyxNK1dih.png)
> 更正下錯誤，是href啦~~

我們可以知道前三個是歌手而後三個是食物
當要分類時，能這麼寫
```css=
<body> 
    <p class="singer">韋禮安</p>
    <p class="singer">林宥嘉</p>
    <p class="singer">A-Lin</p>
    <p class="food">壽司</p>
    <p class="food">炒飯</p>
    <p class="food">便當</p>
</body>
```
加上兩個類別，分別是歌手和食物
> 那緊接著要如何運用呢?

讓我們看到我們前面所額外寫的style標籤
一起看看如何寫和執行結果
![](https://hackmd.io/_uploads/HyEyTyujn.png)
## id
這部分其實跟class很相像
直接來看操作和結果
```css=
<body> 
        <h1 id="love">超級愛長頸鹿</h1>
</body>
```
**這裡必須注意，當id love已經被使用，就不能放到其他標籤了**
![](https://hackmd.io/_uploads/S1jBCydih.png)
:::danger
class用.而id用#
:::
:::warning
### 額外使用方法 Selector
1. 想要一次套用，可以這麼做
```css=
#love, .class{
    color:green;
}
```
使用逗號將其隔開

2. 全部套用到所有標籤 
```css=
*{
    color:green;
}
```
3. 從標籤下去找標籤(先找ul標籤，在往下找其li標籤並套用)
```css=
ul li{
    color:green;
}
```
4. 如果想套到屬性
```css=
[type]{
    color:green;
}
```
5. 當滑鼠滑到此處會執行(這一個超酷~)
```css=
hi:hover{
    color:green;
}
```
:::
# flex
超級好用的排版工具
> 等等資訊量會爆多，請先做好心理準備XDD

最一開始的程式碼為:
![](https://hackmd.io/_uploads/H1Cdtwkh3.png)
而style.css的內容為:
```css=
.container div{
    border:1px solid grey;
    padding:10px;
    width:100px;
}
```
接著我們使用flex在外層的container看看
```css=
.container{
    display:flex;
}
```
> 執行結果
>![](https://hackmd.io/_uploads/BJE5oD13n.png)
* > 會發現從直的變成橫的，是因為flex預設顯示是橫的，由左而右

:::success
下面會有一連串flex的功用~
:::
## 讓區塊滿版
先設三個.box，給他們**flex**屬性
```css=
.box-1{
    flex:1;
}
.box-2{
    flex:1;
}
.box-3{
    flex:1;
}
```
> 執行結果
> ![image](https://hackmd.io/_uploads/rkolDVrVT.png)
* > 就像是將全部分成三等份，然後各自拿一份
* > 若是將數字改成2,1,1則分成四份，而區塊一的大小會是全部的1/2
## 改變區塊順序
使用 **order**
```css=
.box-1{
    flex:1;
    order:2;
}
.box-2{
    flex:1;
    order:3;
}
.box-3{
    flex:1;
    order:1;
}
```
> 執行結果
> ![image](https://hackmd.io/_uploads/HkD7YVSVa.png)
* > 前面也提到flex是由左至右排序，也就是從小排到大
* > 因此會因為order的數字大小來更改區塊的順序
## 滿版自動跳行
若在先前的程式碼，將三個區塊加成為九個，會發生甚麼?
![image](https://hackmd.io/_uploads/B1KNjVSNp.png)
* > 我們會發現，他會壓縮所有區塊，讓他們擠在同一行

想要讓他滿版跳行，我們可以在container給他套上**wrap屬性**
```css=
.container{
    display:flex;
    flex-wrap: wrap;
}
```
>執行結果
>![image](https://hackmd.io/_uploads/H1rO2EHEa.png)
* > 每個區塊將會是100px x 10px ，而當版面不夠時，會自動跳到下一行
## 主軸的更改
想要將主軸由上至下，可以在container使用**flex-direction**中的**column**
```css=
.container{
    display:flex;
    flex-wrap: wrap;
    flex-direction: column;
}
```
> 執行結果![image](https://hackmd.io/_uploads/SJW3uNLET.png)
:::warning
### 其他使用方法和特色
1. 套上外框會變成甚麼樣子?(height和border)
```css=
.container{
    display:flex;
    flex-wrap: wrap;
    flex-direction: column;
    height:300px;
    border: 3px solid red;
}
```
> 執行結果
> ![image](https://hackmd.io/_uploads/rkaOjN8N6.png)
* > 當高度不夠時，會自動換行(wrap)，且一樣會依照我們設定的由上至下
2. 將主軸從下到上
```css=
.container{
    display:flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    height:300px;
    border: 3px solid red;
}
```
> 執行結果
> ![image](https://hackmd.io/_uploads/S1foTNU4a.png)
3. 將主軸從右至左
```css=
.container{
    display:flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    height:300px;
    border: 3px solid red;
}
```
> 執行結果
> ![image](https://hackmd.io/_uploads/BknRpNUNp.png)
* > 預設會是使用row
:::
:::danger
若是將主軸由上至下的套上前面所說的滿版屬性，則會變成拉長高 度
主軸的更改、區塊的順序和滿版的屬性，都可以互相交錯著搭配!
:::
## 更改區塊位置
### 置中(主軸)
**justify-content : center** 
```css=
.container{
    height:300px;
    border: 3px solid red;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
```
> 執行結果
> ![image](https://hackmd.io/_uploads/rydXm2PVa.png)
### 置右(主軸)
**justify-content: flex-end**
與上面是將同做法，直接來看看執行結果~
![image](https://hackmd.io/_uploads/rJj093PVp.png)

### 置左(主軸)
**justify-content: flex-start**
會和先前預設的相同
![image](https://hackmd.io/_uploads/B1xfsnPNa.png)
### 剩餘空間分配1(主軸)
**justify-content: space-around**
將區塊3右方剩餘的空間，平均分配到各區塊的兩邊
就會是區塊1的左邊右邊，區塊2左邊右邊，區塊3左邊右邊
![image](https://hackmd.io/_uploads/rk9qh3vE6.png)
### 剩餘空間分配2(主軸)
**justify-content: space-between**
將區塊1跟3分別放置最左和最右
![image](https://hackmd.io/_uploads/Sy54ThvVT.png)
### 剩餘空間分配3(主軸)
**justify-content: space-evenly**
將區塊中間平均分配空間
![image](https://hackmd.io/_uploads/S1ZkR3wET.png)
:::warning
若是將主軸更改了，則這些也將跟著改變，都可以搭配使用看看
:::
### 次軸相關設定
使用 **align-items** ，內容屬性和主軸的相同，也就是可以給他 center/flex-start/flex-end...和空間分配的語法

> 但若是多行及多列時，使用**justify-content**和**align-items**，將會使格式跑掉

直接來看看例子(將區塊變成九個)
![image](https://hackmd.io/_uploads/BJOPmpwVp.png)
> 但把 **align-items** 改為 **align-content**，就會變成

![image](https://hackmd.io/_uploads/Hkp0mpPEa.png)
> 會好看許多~~

# Animation 動畫
HTML
```htmlmixed=
<body>
    <div class="animation box"></div>
</body>
```
CSS
```css=
.box{
    width: 200px;
    height: 200px;
    background-color: rgb(8, 104, 229);
}
.animation{
    
}
```
![image](https://hackmd.io/_uploads/SkVZaVcNT.png)
## 1. 定義動畫
會寫上@keyframes + 自訂變數名
```css=
@keyframes change-color  {
    from{background-color : red};
    to{background-color : blue};
}
```
* > 這就代表會將顏色從紅色改成藍色

也可以用%數來代表時間
```css=
@keyframes change-color  {
    0%{background-color : red};
    20%{background-color : blue};
/*     可以延伸下去到100% */
}
```
## 2. 套用動畫
在先前的animation內寫上
```css=
.animation{
    animation-name: change-color;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-delay: 2s;
}
```
* > animation-name 為自定義的動畫名稱
* > animation-duration 動畫持續的秒數  infinite 為無限次
* > animation-iteration-count 動畫執行次數
* > animation-delay 載入之後隔幾秒執行動畫
## 讓方格動起來
可以在.box內加上定位position
```css=
.box{
    width: 200px;
    height: 200px;
    background-color: rgb(8, 104, 229);
    position: relative;
}
```
並且在定義動畫內套上位置
```css=
@keyframes change-color  {
    from{background-color : red; top:20px; left:20px};
    to{background-color : blue; top:40px; left:40px};
}
```
就可以順利將方塊動起來了~~
:::danger
此部分目前無法放上動畫的執行結果，有興趣的可以寫上語法，自行操作看看
:::

CSS到這邊先告一段落了，緊接著會是我們的重頭戲 JAVA SCRIPT
最後就要說聲加油了!（￣︶￣）↗　

點擊快速連結
📑[JAVA SCRIPT 筆記](/81IfLDHpQMSeq1MkP6P5dQ)