---
title: CSS3 學習筆記 (上) 基礎篇
tags: CSS , Web,
author: BoboLin
robots: index, follow
lang: zh
dir: ltr
breaks: true
disqus: hackmd
---
# CSS 3 學習筆記 (上) 基礎篇
[網頁用字查詢](http://csscoke.com/webq/)
[CSS3 學習筆記 (下) 動畫篇](https://hackmd.io/@bingdoal/BJMYN6OWf)
## Selector
|示例|說明|
|:------:|:-------|
|`.class`| class |
|`#id`| id |
|`li + a`| 緊接在 li 後面一個的 a 標籤 |
|`li a` | 包在 li 裡面的所有 a 標籤 |
|``li > a`` | 包在 li 裡面，第一層的 a 標籤 |
|`li ~ span`| 選取與 li 同一層級的所有 span 標籤 |
|`tag[atr="value"]`| 選取 tag 中的 atr 屬性為 value 的標籤 |
|`tag::before`| 在 tag 中的最上面產生一個 before 的偽類(類似 div)<br>==注意 before 依然在 tag 裡面== |
|`tag::after`| 在 tag 中的最後面產生一個 after 的偽類(類似 div)<br>==注意 after 依然在 tag 裡面== |
|`input:checked`| checkbox 或者 radio button 被勾選 |
|`tag:hover`| 鼠標覆蓋在 tag 上 |
|`tag::selection`| 用鼠標反白選取 |
|`tag:empty`| tag 的 value 為空 |
|`tag:focus`| tag 為 focus 狀態，如果想讓 div 之類的 tag 也能使用 focus 的功能，可以加上屬性 `tabindex = 0`，該 tag 就可以被 focus 了。 |
|`tag:not(:focus)`| tag 從 focus 狀態離開 <br>==(注意必須先進入 focus 再離開)== |
|`tag:active`| 滑鼠按下 tag (按著)|
|`input:valid`| input 符合輸入規則|
|`input:invalid`| input 不符合輸入規則|
|`tag:lang(參數)`| `<tag lang="參數"></tag>` <br>根據符合的參數去設定 style，原意是用於語言選擇，可能拿來做其他應用|
|`tag::first-line`| tag 中 text 的第一行，以`<br>`作為分行標準 |
|`tag::first-letter`| tag 中 text 的第一個字 |
### Selector 示例
#### Before & After
```css=
.before_after{
color:green;
background-color:#bbb;
}
.before_after:before{
padding:0 10px;
content:"before";
color:red;
}
.before_after:after{
padding:0 10px;
content:"after";
color:blue;
}
```
<style>
.before_after{
background-color:#bbb;
color:green;
}
.before_after:before{
padding:0 10px;
content:"before";
color:red;
}
.before_after:after{
padding:0 10px;
content:"after";
color:blue;
}
</style>
<p class="before_after">BA示例</p>
:::warning
注意 before 與 after 的屬性設置，content 一定要設定，否則 before 與 after 將不存在，可以設定為空字串，由此產生的區塊不能被選取、複製，常用來做些 icon 或附帶符號。
:::
### Child Selector
|示例|說明|
|:--------:|:-------|
|`tag:nth-child(rule)`| 選擇第 n 個 child，可自行設定 [選取規則](#Rule) 代入 rule<br>(若選取位置不是此 tag 則選取無效) |
|`tag:nth-last-child(rule)`| 一樣根據 [選取規則](#Rule) 不過 n 是由最大值遞減 1 |
|`tag:nth-of-type(rule)`| 通用 [選取規則](#Rule)，但是依照 tag 為主，想像把 tag 做分類，然後去套用選取規則<br>==(注意不會以 class 分類，若用 class 去套用 則會是套用到所有含有此 class 的標籤)== |
|`tag:nth-last-of-type(rule)`| 同 `tag:nth-of-type(rule)` 不過從後面數 |
|`tag:first-child`| 第一個 tag 的子物件<br>(若第一個 child 不是 tag 則選取無效) |
|`tag:last-child`| 最後一個 tag 的子物件<br>(若最後一個 child 不是 tag 則選取無效) |
#### Rule
|規則參數|說明|
|:----:|:-------|
| odd |奇數|
| even |偶數|
| a |自定義參數 (正負整數)|
| an | n 由 0 開始向上遞加 1<br>a 為自定義參數 (正負整數) |
| an+b | n 由 0 開始向上遞加 1<br>a 與 b 都為自定義參數 (正負整數) |
## 排版
### [Grid](https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
:::info
+ 要套用 grid 排版，父元素要設定 `display:grid | inline-grid | subgrid;`才能使用。
+ 適合用在二維的 layout 上，設計版面的切割
:::
#### grid 子元件屬性設定
| 屬性 | 說明 | 值 | 舉例 |
|:--------:|:--------:|:--------:|:--------:|
| `grid-template-columns` | 父輩屬性，決定 列 的大小以及分割數 | 長度單位如: px, em... 不過 grid 有特殊單位 fr 算是畫面比例的概念 | `grid-template-columns: 1fr 2fr 3fr` |
| `grid-auto-columns` | 父輩屬性，決定 列 全部的大小 | 只須設定一個尺寸，會自動套用到全部的列 | `grid-auto-columns: 50px` |
| `grid-template-rows` | 父輩屬性，決定 行 的大小以及分割數 | 同 `grid-template-columns` 屬性 | 同 `grid-template-columns` 屬性 |
| `grid-auto-rows` | 父輩屬性，決定 行 的大小以及分割數 | 只須設定一個尺寸，會自動套用到全部的行 | 同 `grid-auto-columns` 屬性 | 同 `grid-auto-columns` 屬性 |
| `grid-column-gap` | 父輩屬性，決定 列 的間隔 | 只須設定一個尺寸，會自動套用到全部的 列 間隔 | 同上 | `grid-column-gap: 10px` |
| `grid-row-gap` | 父輩屬性，決定 行 的間隔 | 只須設定一個尺寸，會自動套用到全部的 行 間隔 | 同上 | `grid-row-gap: 10px` |
| `grid-column-start` | 子輩屬性，決定 列 的起始位置 | 數字，表示第幾格 或是 `span` + 數字，表示占用幾格 | `grid-column-start: 1`、`grid-column-start: span 2`|
| `grid-column-end` | 子輩屬性，決定 列 的結束位置 | 同上 | 同上 |
| `grid-row-start` | 子輩屬性，決定 行 的起始位置 | 同上 | 同上 |
| `grid-column` | 子輩屬性，`grid-column-start` `grid-column-end` 的簡寫，用 `/` 分開| 同上 | 同上 |
| `grid-row` | 子輩屬性，`grid-row-start` `grid-row-end` 的簡寫，用 `/` 分開 | 同上 | 同上 |
[Grid 小遊戲](http://cssgridgarden.com/#zh-cn)
### [Flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex)
:::info
+ 要套用 flex 排版，父元素要設定 `display:flex | inline-flex;`才能使用。
+ 適合一維的 layout 上，RWD 的適性高
:::
#### 排版軸向設定 (寫在父層)
| 屬性 | 說明 | 值 |
|:----:|:---:|:---|
| `justify-content` | 主軸 | `flex-start`: 置起始點<br>`center`: 置中<br>`flex-end`: 置結束點<br>`space-between`: 空白在區塊之間<br>`space-around`: 空白在區塊周圍|
| `align-items` | 次軸單行排版 | 對單行元素的操作，同上值，額外新增下面兩個<br>`stretch`: 預設值，伸展<br> `baseline`: 對齊內容基準線|
| `align-content` | 次軸多行排版 | 對行的操作，同上，只適用多行的排版 |
| `flex-wrap` | 換行設定 | `nowarp`: 預設不換行<br>`wrap`: 換行<br>`wrap-reverse`: 換行且反向 |
|`flex-direction`| 軸向 | `row`: 預設值 <br> `column`: 設定垂直軸為主軸<br>`row-reverse`: row 反向 **==注意會改變起始點跟結束點方向==** <br> `column-reverse`: column 反向|
#### 複合屬性
| 屬性 | 說明 | 值 |
|:----:|:----:|:---|
| `flex-flow` | `flex-wrap` 與 `flex-direction` 複合 | 兩個屬性中間空格 |
#### 子元件屬性
| 屬性 | 說明 | 值 |
|:----:|:----:|:---|
| `flex-grow` | 伸展 | 設定分配到的比例 1,2,3,4... |
| `flex-shrink` | 收縮 | 按照比例縮減 1,2,3,4...<br>數字越大，縮減越多，比例越小 |
| `flex-basis` | 基本寬 | 指定 flex-box 的大小，[詳細參考](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-basis) |
| `order` | 排序 | 預設為 0<br>`1, 2, 3 ...`: 以小排到大<br>`-1`: 第一|
| `align-self` | 次軸排版 | 值同 `align-items` |
| `justify-self` | 次軸排版 | 值同 `justify-content` |
[Flex 小遊戲](http://flexboxfroggy.com/#zh-tw)
可以利用 `margin: auto` 的方式達到想像中應該要有的 `justify-self`，[參考](https://olafcheng.github.io/2017/03/02/translation_why_are_there_no_justify_self_and_justify_items/)
> 設計上的思維: 整個版面的配置套用 grid 的 layout 去切割而內容的編排流動則交給 flex
---
## 屬性示例
### border-radius
|屬性|描述|參數使用說明|屬性值|
|:-------:|:-------:|:-----------|:------:|
|`border-radius`|圓角設計| 針對 div 四個角落做圓角設計，參數分四個角落給予，參數不足四個則平均分配個數。| length / % |
|||也可給予八個參數，對四個角落的 x y 軸分別操作。| `x1 x2 x3 x4 / y1 y2 y3 y4` |
:::warning
:pencil: 注意別讓圓角設定的 px 超過 tag 本身尺寸，否則瀏覽器會自動調整，操作會難以預測。
:::
```css=
width:100px;
height:150px;
border-radius:50% / 60% 60% 40% 40%;
background-color: hsla(180,100%,50%,.5);
/* hsl (色相,飽和度,亮度)
a 為不透明度，可選參數 0~1 */
```
> [HSL 色相表達](http://csscoke.com/2015/01/01/rgb-hsl-hex/)
<style>
.border-r{
width:100px;
height:150px;
background-color:hsla(180,100%,50%,.5);
border-radius:50% /60% 60% 40% 40%;
}
</style>
<div class="border-r"></div>
### box-shadow
|屬性|描述|參數使用|
|:-------:|:-------:|:-----------|
|`box-shadow`|陰影使用|`x,y,模糊,擴張,色彩,內部`|
:::info
+ 可以給予多組陰影設定，會按照設定的順序產出，第一組設定在最上層。
+ 內部的設定可以讓陰影往內部長，運用適當可以表現出凹陷的效果。
+ 可以利用 box-shadow 來實作 border，好設定又不占用空間。
:::
```css=
width: 100px;
height: 100px;
box-shadow:5px 5px 10px 10px red inset,
-5px 5px 10px 10px blue,
200px -5px 10px -10px green;
```
<style>
.shadow{
background-color:#bbb;
width: 100px;
height: 100px;
box-shadow:10px 5px 10px 10px red inset,
-5px 5px 10px 10px blue,
200px -5px 10px -10px green;
}
</style>
<div class="shadow"></div>
<br>
## 動畫屬性
### Transition
|屬性|描述|參數使用|
|:-------:|:-------:|:-----------|
| transition | 將指定的 CSS 變化用動畫呈現 | `CSS屬性 動畫時間 延遲時間 速度,第二個CSS屬性 ...` |
```css=
.trans1{
width:100px;
height:100px;
background-color:#bbb;
transition:all 1s;
}
.trans1:hover{
background-color:#f00;
width:200px;
}
```
<style>
.trans1{
width:100px;
height:100px;
background-color:#bbb;
transition:all 1s ;
}
.trans1:hover{
background-color:#f00;
width:200px;
}
</style>
<div class="trans1"></div>
<br>
+ 展示2，實現動畫倒帶。
```css=
.trans2{
width:100px;
height:100px;
background-color:#bbb;
transition:background 1s ,width 1s 1s ;
}
.trans2:hover{
background-color:#f00;
width:200px;
transition:width 1s ,background 1s 1s ;
}
```
<style>
.trans2{
width:100px;
height:100px;
background-color:#bbb;
transition:background 1s ,width 1s 1s ;
}
.trans2:hover{
background-color:#f00;
width:200px;
transition:width 1s ,background 1s 1s ;
}
</style>
<div class="trans2"></div>
<br>
---
## 各種實作
### APP 滑動式選單實作
<iframe height='265' scrolling='no' title='BJBLee' src='//codepen.io/BoboBearLin/embed/BJBLee/?height=265&theme-id=0&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/BoboBearLin/pen/BJBLee/'>BJBLee</a> by BoboBearLin (<a href='https://codepen.io/BoboBearLin'>@BoboBearLin</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
:::success
**黑科技:** 利用 checkbox 的 checked 選擇器狀態，來對元件做操作，將 checkbox 隱藏，以 label for 來操作 checkbox，達到純 css 的開關事件。
:::
### 三角形實作
```css=
width:0px;
height:0px;
border-style:solid;
border-width:100px 50px 30px 0px;
border-color: transparent red black transparent;
margin:20px
```
<style>
.trangle{
width:0px;
height:0px;
border-style:solid;
border-width:100px 60px 30px 0px;
border-color: transparent red black transparent;
margin:20px;
}
</style>
<div class="trangle"></div>
:::info
+ 藉由粗邊框線的特性去實作，把 div 設定為 0 長寬，邊框便會長得像三角形，再將不需要的地方去除，就可以取得需要的箭頭方向。
+ 更改 `border-style` 可以得到不同的三角形樣式。
+ 更改 `border-width` 可以改變三角形的長相。
:::
| 屬性 | 屬性值 | 說明 |
|:--------:|:--------:|:-------:|
| `border-width` | `上,右,下,左` | |
|`border-color`|`transparent`| 顏色設定透明 |
### 弧形角實作
```css=
width:50px;
height:50px;
background-color:transparent;
border-style:solid;
border-width:0px 20px 0px 0px;
border-color: transparent red transparent transparent;
border-radius:0 0 100px 0;
```
<style>
.myHock{
width:50px;
height:50px;
background-color:transparent;
border-style:solid;
border-width:0px 20px 0px 0px;
border-color: transparent red transparent transparent;
margin:20px;
border-radius:0 0 100px 0;
}
</style>
<div class="myHock"></div>
:::info
+ 簡單說就是利用`border-radius`會連同邊緣一起做圓弧的特性，再把 div 本身隱藏。
:::
+ 第二種作法
```htmlmixed=
width:50px;
height:50px;
background-color:#bbb;
border-radius:0 0 100% 0;
box-shadow:-20px -2px 0px -5px red inset;
```
<style>
.myHock2{
width:50px;
height:50px;
background-color:#bbb;
border-radius:0 0 100% 0;
box-shadow:-20px -2px 0px -5px red inset;
}
</style>
<div class="myHock2"></div>
### 垂直置中
```css=
.msgBox{
background-color:#bbb;
height:300px;
text-align:center;
}
.msgBox:before{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
.vertical_center{
background-color:black;
display:inline-block;
color:white;
width:300px;
vertical-align:middle;
}
```
<style>
.msgBox{
background-color:#bbb;
height:300px;
margin:20px;
text-align:center;
}
.msgBox:before{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
.vertical_center{
background-color:black;
display:inline-flex;
color:white;
width:300px;
vertical-align:middle;
}
</style>
<div class="msgBox">
<div class="vertical_center">
MessageMessageMessageMessageMessageMessageMessage
</div>
</div>
:::info
+ vertical-align 是指同層元素的相對垂直關係，因此給予一個跟父元素一樣高度的 div 可以達到絕對置中的目的。
+ 這裡用 before 的偽元素來取代 div 達到置中效果。
:::
### 漸層色實作
:::info
+ 漸層色的實作是用圖片實現的，而非單純顏色設置。
:::
|屬性|參數說明|補充|
|:------:|:------:|:----|
|`background-image`|linear-gradient(角度(deg),色彩 色彩位置,色彩 色彩位置 ...)| linear-gradient 表示為線性漸層 |
||-webkit-linear-gradient| 與標準的角度運算方式 不同，換算方式:(90-標準角度) |
```css=
.linear-gradient1{
height:100px;
width:100px;
background-image:linear-gradient(30deg,red 20%,blue 60%,green 80%);
}
```
<style>
.linear-gradient1{
height:100px;
width:100px;
background-image:linear-gradient(30deg,red 20%,blue 60%,green 80%);
margin:20px;
}
</style>
<div class="linear-gradient1"></div>
:::warning
+ 注意百分比表達的是色彩位置，也可以寫常數 100px 之類的，表達的是顏色的分界位置，而非填充範圍。
:::
### 斜角標籤
```css=
.imgTag{
display:inline-block;
position:relative;
background-color:#bbb;
width:200px;
height:200px;
}
.imgTag:before{
content:'';
position:absolute;
left:0;
top:0;
width: 0px;
height: 0px;
border-top:80px solid blue;
border-right:80px solid transparent;
}
.imgTag:after{
content:"HOT";
position:absolute;
left:0;
top:0;
font-size:15px;
padding-top: 12px;
padding-left: 8px;
color:#fff;
}
```
<style>
.imgTag{
display:inline-block;
position:relative;
background-color:#bbb;
width:200px;
height:200px;
margin:20px;
}
.imgTag:before{
content:'';
position:absolute;
left:0;
top:0;
width: 0px;
height: 0px;
border-top:80px solid blue;
border-right:80px solid transparent;
}
.imgTag:after{
content:"HOT";
position:absolute;
left:0;
top:0;
font-size:15px;
padding-top: 12px;
padding-left: 8px;
color:#fff;
}
</style>
<div class="imgTag"></div>
:::info
+ 藉由 before 跟 after 來在我們想要的元素上面蓋上需要的形狀，設定好 position 就可以定位到想要的位置了。
:::
+ 第二種作法
```css
.imgTag2{
width:200px;
height:200px;
background-color:#bbb;
position:relative;
}
.imgTag2:after{
content:'';
width:100%;
height:50px;
display:block;
outline:1px solid #f00; /*框線*/
background-image:linear-gradient(45deg,red 20%,transparent 20%);
position:absolute;
left:0;
bottom:0;
}
```
<style>
.imgTag2{
width:200px;
height:200px;
background-color:#bbb;
position:relative;
margin:20px;
}
.imgTag2:after{
content:'';
width:100%;
height:50px;
display:block;
outline:1px solid #f00;
background-image:linear-gradient(45deg,red 20%,transparent 20%);
position:absolute;
left:0;
bottom:0;
}
</style>
<div class="imgTag2"></div>
### 鋸齒實作
```css=
.serate_top{
display:block;
width:100px;
height:100px;
background-color:#bbb;
position:relative;
}
.serate_top:after{
content:"▼▼▼▼▼▼▼▼▼▼▼";
display:block;
width:100%;
overflow:hidden;
font-size:16.5px;
white-space:nowrap;
letter-spacing:-0.2em;
color:#f00;
position:absolute;
left:-.8px;
bottom:-16px;
}
.serate_bottom{
display:block;
width:100px;
height:100px;
background-color:#bbb;
position:relative;
}
.serate_bottom:before{
display:block;
content:"▲▲▲▲▲▲▲▲▲▲▲▲";
font-size:16.5px;
width:100%;
overflow:hidden;
letter-spacing:-0.2em;
white-space:nowrap;
color:#f00;
position:absolute;
left:0px;
top:-19px;
text-indent: -1em; /*平移*/
}
```
<style>
.serate_top{
display:block;
width:100px;
height:100px;
background-color:#bbb;
position:relative;
}
.serate_top:after{
content:"▼▼▼▼▼▼▼▼▼▼▼";
display:block;
width:100%;
overflow:hidden;
font-size:16.5px;
white-space:nowrap;
letter-spacing:-0.2em;
color:#bbb;
position:absolute;
left:-.8px;
bottom:-16px;
}
.serate_bottom{
display:block;
width:100px;
height:100px;
background-color:#bbb;
position:relative;
}
.serate_bottom:before{
display:block;
content:"▲▲▲▲▲▲▲▲▲▲▲▲";
font-size:16.5px;
width:100%;
overflow:hidden;
letter-spacing:-0.2em;
white-space:nowrap;
color:#bbb;
position:absolute;
left:0px;
top:-19px;
text-indent: -1em;
}
</style>
<div class="serate_top"></div>
<br>
<div class="serate_bottom"></div>
<br>
---
## 補充資料
### Icon
+ [FontAwesome](http://fontawesome.io/)
```htmlmixed=
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
```
+ [Google Font Icon](https://material.io/icons/)
```htmlmixed=
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
```
### 網路字型
+ [Google Font](https://fonts.google.com/)
+ 中文字體目前只有測試版，連結中搜尋 Chinese Tradition [Google Font alpha](https://fonts.google.com/earlyaccess)
Sign in with Wallet
Connect another wallet