###### tags: `網頁讀書會`
# 05/06 共筆：CSS 入門
[TOC]
---
### 線上免費資源
[w3c school - CSS Tutorial](https://www.w3schools.com/css/default.asp)
[中文 - CSS 初學](https://www.youtube.com/watch?v=Ml78vnNTBLw&ab_channel=GrandmaCan-%E6%88%91%E9%98%BF%E5%AC%A4%E9%83%BD%E6%9C%83)
[英文 - Pseudo Elements by Web Dev Simplified
](https://www.youtube.com/watch?v=OtBpgtqrjyo)
### padding & margin
- padding 內部空間
- **不可**填入負值
- margin 外部空間
- **可以**填入負值
### float & display
[MDN - float](https://developer.mozilla.org/en-US/docs/Web/CSS/float)
[MDN - display](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
- float 漂浮的意思，會讓 element 漂浮起來
- display 顯示
- 有許多 value
- inline
- block
- flex
- grid
- 舉例
- `<p></p>` 這個標籤的預設 display 顯示方式是 **block**
- `<span></span>` 預設 display 顯示方式是 **inline**
- 透過改變 display 顯示方式，可以使內容跳脫預設的排版模式
:::info
- display: block; 不管內容長度是多少，所佔用的空間是**一整行**
- display: inline; 內容長度是多少，佔用的空間就是多少
:::
#### 練習 - float
```htmlembedded=
<body>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
/* TODO 新增 float 效果 */
}
</style>
<div class="box">
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum magni consequatur corrupti dolores vel soluta minus, laborum, ut ex possimus eius, impedit doloremque nulla inventore reprehenderit fuga! Animi, ducimus magni.</p>
</body>
```
#### 練習 - display
```htmlembedded=
<body>
<style>
p{
/* TODO 改變 display 屬性 */
}
span{
/* TODO 改變 display 屬性 */
}
</style>
<p>hello</p>
<span>123</span>
<span>456</span>
</body>
```
### position
:::info
top、down、right、left 位移方向及位置
:::
- fixed 固定定位，不管畫面怎麼移動，他會在固定的位置
- 使用【位移方向及位置】自訂位置
- relative 相對定位
- 單做 relative 是不會有位置變化
- 加上【位移方向及位置】後，會相對於原本的位置，去做偏移，並且會蓋過其他物件
- absolute 絕對定位
- 跟 fixed 固定定位非常的像。差別在於，**不會隨著畫面移動跟著移動**。
- **若 absolute 的外層(不只有上一層)，有做定位的話(ex: relativec或其他)，對 absolute 物件加上【位移方向及位置】就會跟著外層的框框做偏移。**
#### 練習 - position
```htmlembedded=
<body>
<style>
body{
min-height: 200vh;
}
.outside-box{
border: 5px solid black;
padding: 5px;
margin: 5px;
}
.box{
width: 100px;
height: 100px;
}
.blue-box{
/* TODO position 效果 */
background-color: blue;
}
.red-box{
/* TODO position 效果 */
background-color: red;
}
</style>
<div class="outside-box">
<div class="outside-box">
<div class="box blue-box">
</div>
</div>
</div>
<div class="box red-box">
</div>
</body>
```
### CSS Selector
- `*` 代表選擇全部
- 想要對多個 class 或 id 都套用相同的 css block，使用`,`區隔
```css=
/* class-1 跟 class-2 都有相同的 css style */
.class-1, .class2{
width: 30px;
height: 30px;
background-color: blue;
}
```
- 若想要指定比較細部的標籤，用**空格**分開每一個 class 或是 標籤
```htmlmixed=
<body>
<div>
<h1>
hello
</h1>
</div>
<h1>how are you</h1>
</body>
<style>
/* 指定 div 中的 h1 標籤套用此 css style，所以 hello 會是紅色，how are you 會是黑色 */
div h1{
color: red;
}
</style>
```
- 使用`[]`，裡面放的是屬性(attribute)，例如`[name]`，有 name 這個屬性的標籤會套用此 css style。
- `:hover`針對你想要的標籤，當滑鼠游標指到標籤時，會產生設定的 css style。
#### 練習 - CSS Selector
```htmlembedded=
<body>
<style>
/* TODO 應用 CSS 選擇器 */
</style>
<h1>This is h1 tag</h1>
<div class="apple" type="fruit">
apple
<h1>h1-apple</h1>
</div>
<div class="banana" type="fruit">
banana
<h2>h2-banana</h1>
</div>
</body>
```
### flex
[中文 - flex 介紹影片](https://www.youtube.com/watch?v=jXvIfyVG494)
- 要先在 外層(container) 設定`display: flex;`，預設為由左至右排列。
- 裡面的 `div` 可以設定 `flex`、`order`
- flex：填入數值，代表每個 div 分配到的比重
- order：規定排列順序，由小排到大(可填入負值)
- `justify-content`：隨者主軸方向(預設為 row)的開始跟結尾分配空間
- flex-start
- flex-end
- center
- space-between
- space-around
- space-evenly
- `align-items`：針對次軸方向分配空間
:::warning
假設主軸是 row，則 `justify-content` 就會是對水平方向分配空間；`align-items` 就會是對垂直方向分配空間。
反之亦然。
:::
- `align-content`：針對**有換行的**次軸方向分配空間
:::danger
若次軸只有一行 => 使用 `align-items`
若次軸有多行 => 使用 `align-content`
:::
:::info
flex 還有很多功能以及要學習的東西，這邊只列出簡單好理解的基本內容，更完整內容可以參考以下教學：
- [MDN - flex 介紹](https://developer.mozilla.org/en-US/docs/Web/CSS/flex)
- [英文 - YouTube 教學影片](https://www.youtube.com/watch?v=u044iM9xsWU)
:::
#### 練習 flex 置中
```htmlembedded=
<body>
<style>
.container{
min-height: 50vh;
background-color: gray;
/* TODO 增加 flex 屬性 */
}
.box{
background-color: white;
border: 1px solid black;
width: 100px;
height: 30px;
margin: 5px;
}
</style>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</body>
```
#### 練習 flex 多個內容排版
```htmlembedded=
<body>
<style>
.container{
min-height: 50vh;
background-color: gray;
/* TODO 增加 flex 屬性 */
}
.box{
background-color: white;
border: 1px solid black;
width: 100px;
height: 30px;
margin: 5px;
}
</style>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
</div>
</body>
```
---
### backdrop-filter
[MDN - backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter)
- 通常使用的效果 => **模糊**
- `backdrop-filter: blur(10px);` 數值越高，越模糊。
:::info
vh 是 view height，指螢幕可視範圍高度的百分比
ex. `min-height: 100vh;` => 最小高度為**可視螢幕的百分之百**。換言之，佔滿整個螢幕。
:::
### box-shadow
[MDN - box-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow)
- 增加**陰影效果**
- 常用方法：`box-shadow: offset-x | offset-y | blur-radius | spread-radius | color;`
- 範例：`box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.5);`
:::spoiler 完整語法 - Syntax
```css
/* Keyword values */
box-shadow: none;
/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;
/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;
/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
/* Global values */
box-shadow: inherit;
box-shadow: initial;
box-shadow: revert;
box-shadow: revert-layer;
box-shadow: unset;
```
:::
:::info
可以搭配 `border-radius` 使陰影也有圓角效果。
:::
#### 練習 backdrop-filter、box-shadow
```htmlembedded=
<style>
body{
min-height: 100vh;
background-image: url(https://images.unsplash.com/photo-1614102073832-030967418971?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80);
background-size: cover;
background-position: center;
/* display: flex;
justify-content: center;
align-items: center; */
}
div{
width: 200px;
height: 200px;
background-color: rgba(255, 255, 255, 0.5);
/* TODO 模糊效果 */
/* TODO 陰影效果 */
/* TODO 調整圓角 */
/* display: flex;
justify-content: center;
align-items: center; */
}
</style>
<body>
<div>
Hello
</div>
</body>
```
### transfrom
- rotate 旋轉 deg => degree / turn
- rotate()
- rotate3d()
- rotateX('angle')
- rotateY('angle')
- rotateZ('angle')
- scale 放大縮小
- scale() -> 可同時填入 X Y Z 值
- scaleX()
- scaleY()
- scaleZ()
- scale3d()
- translate 位移
- translate() -> 可同時填入 X Y Z 值
- translateX()
- translateY()
- translateZ()
- translate3d()
- skew 變形
:::info
translate 最常用的就是 cetering 置中
:::spoiler 常見使用 transform 搭配 translate 置中的方法
```css=
div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
```
:::
### transition
[MDN - transition](https://developer.mozilla.org/en-US/docs/Web/CSS/transition)
- 中文意思叫做「過度」
- 英文意思是 **在兩個狀態之間切換**
- 用法：
- transition
- transition-duration
- transition-delay
- transition-property
- transition-timing-function
### :hover
- 當滑鼠移動到上面時，產生的 CSS 變化
### :focus
- 當點選到標籤時(如，input)，產生 CSS 變化
#### 練習 - transition & :hover & :focus
```htmlembedded=
<body>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
}
/* TODO 新增 :hover */
/* TODO 新增 :focus */
</style>
<div class="box">
</div>
<input type="text" name="" id="">
</body>
```
### ::before, ::after
- 兩者的功用是，在 指定的 element 的前 (befor) 後 (after) 增加**偽標籤 (Pseudo Elements)**
- 在`class="box"`這個元件的前跟後放上不同顏色的小方塊，用法：
```css=
.box::before{
content: '';
display: block;
width: 10px;
height: 10px;
margin: 5px;
padding: 5px;
background-color: red;
}
.box::after{
content: '';
display: block;
width: 10px;
height: 10px;
margin: 5px;
padding: 5px;
background-color: blue;
}
```
:::warning
不可以使用在單標籤上，例如`<input>`
:::
#### 練習 - ::before & ::after
```htmlembedded=
<body>
<style>
</style>
<div class="box"></div>
</body>
```
Sign in with Wallet
Connect another wallet