# CSS
一般初始都會先在`<head>`裡寫
normalize.css 系統型網頁使用 (不破壞h1、p型態)
reset.css 活動型網頁使用 (全體重置)
bootstrap 內建已重置過系統，不須額外遷入
---
在HTML中，有一些字元需要轉換成特殊字元才能正確顯示，其中包括:
- `&` 轉換為 `&` `&`
- `<` 轉換為 `<` `<`
- `>` 轉換為 `>` `&`
- `"` 轉換為 `"` `"`
- 空白 轉換為  
https://www.rapidtables.org/zh-TW/web/html/html-codes.html
使用時在首尾端寫入。
---
## 選取器
先後選取順序為style內由上到下，body裡由左至右。
會顯示的權限大小順序為**直接寫入屬性內容>id>class>type**。
1. **標籤(type)選取器**
可將多個元素同時宣告`h1,h2,h3{color:red}`
2. **類別(class)選取器**
- `h2**.**st1{color:green;font-size:10px;}` 指定st1只給h2這標籤使用
- `<class=”st1 st2 st3”>`可選擇顯示三種內部樣式設定。若使用多個選取器抓到相同的樣式會以style寫的先後順序去抓取。
1.直接輸入important可將所有文字變成大寫
2.admittanc可將所有文字變成紅色
3. **物件(ID)選取器**
只能套用一次，且定義時需加上#ID名稱{}；如果是靜態網頁，ID是可以使用的，但如果使用JS去抓取時，只能用一次。
JS取用ID時這樣寫:`document.getElementById(”ID名稱”).style.color=””;`
若有同時取用相同ID時，他只會執行一個，且為第一個資料。
1. 直接輸入pullquote可將所有文字變成大寫
---
###### 全域選取器`*{}`
###### 類型選取器`h1{}`
###### 屬性選取器`class、ID{}`
###### 子元素選取器`li>a{}` 找出在li之下的a (若中間有其他層級會抓不到)
###### 後代選取器`li a{}` 找出所有li裡的a (中間有任何堆疊都不計)
###### 相連選取器`li+a{}` li元素之後第一個a
###### 整體選取器`li~a{}` li元素之後所有a
如果有兩個一樣的選取器，會以後者為優先
---
## 文字
### Font-size
- 絕對位置：small、x-large、in、cm、pt、px、em
- 相對位置：larger、em、%
1. em在槽狀結構中會導致字體大小比例失衡，使用rem就會等比例變更。
2. vw(ViewportWidth)、vh(ViewportHeight)是以0~100去計算，vw50就是在中間，vw不計算margin和padding距離。
---
### Font-family
- 字型類型
1. normal
2. italic 仿斜體字
3. oblique 真斜體字
4. uppercase 大寫
5. lowercase 小寫
6. capitalize 第一個字大寫
7. underline 下底線
8. overline 上底線
9. line-through 刪除線
10. blink 閃爍
### font-face 字型使用
可讓你使用沒有安裝在訪客電腦的文字。
利用font-face去抓取到資料夾內的文字，再用font-family去抓取資料。
※在font-face裡的font-family是定義他的名子。
```css
@font-face {
src: url("/font/BALLOONS.TTF"); //建立雲端連結
font-family: BALLOONS; //定義名稱
}
h1{
font-family:BALLOONS} //抓取名稱
```
google 提供的字型檔服務
https://fonts.google.com/
使用googleFont不會讀取資料所以速度比較快。
---
### import 是外部連結方式
```css
@import url(' 路徑 ');
```
---
### line-height
是行距+文字大小的總高度
而fone-size只單純是文字的大小
### letter-spacing
可以定義每個字母之間的距離 "A B C D"
### word-spacing
可以定義每個字串之間的距離 "ABC DEF GHI"
### text-align
文字水平對齊 left、right、center、justify
### vertical-align
文字垂直對齊 - 在div區塊沒辦法使用,只能用於(td)
### text-indent
文字縮排
column-count : 數字 (直接指定要幾欄)
colum-width : 根據寬度指定
### text-decoration
- 文字修飾
1. none 預設
2. underline 下底線
3. overline 上底線
4. line-through 刪除線
### text-transform
- 大小寫轉換
1. none
2. capitalize 首字母改為大寫
3. uppercase 小改為大
4. lowercase 大改為小
### tidy
### 限制顯示行數
```
.class{
-webkit-line-clamp:3;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
}
```
---
### 整理大量文字自動換行
```
.class{
word-break:break-all;
}
```
word-break:break-all; 全部段行
word-break:break-word; 如果文字太長，沒辦法裝進容器元素裡，允許文字在任意位置斷行。
### 對空白處理
```
.class{
white-space: pre-wrap;
}
```
white-space: normal;
white-space: nowrap;強制不換行。
white-space: pre;空白字元都會被保留。
white-space: pre-wrap;空白字元都會被保留，且符合容器。
white-space: pre-line;連續的空白字元會被合併，請符合容器。
---
## 外框線
### border
border寫法: width style color。
- `{border:___}` style可設定值
none 預設
solid 實線
double 雙線
dotted 點
dashed 虛線
groove 內淺外深
ridge 外深內淺
inset 左上深至右下淺(漸層)
outset 左上淺至右下深(漸層)
- `{border-radius:___}` 圓角
可直接設定四個角的圓角 預設：(左上 右上 右下 左下)
### Border-radius
```html
<style>
.class{
border-radius: 50px 20px;
border-radius: 100% 0 0 0;
border-radius: 1.2rem;
border-radius:20px/50px;
}
</style>
```
1. 若只設定兩個值，會以對稱方式顯示。
1. 若設定四個值，會從左開始計算，順時針四個方向。
2. 設定單位為rem會比PX切得更好看一點
3. 如圖切法，會依照你給的單位去裁切。
### Border-image
```html
<style>
.class{
border-image:url('/image/...jpg') 40 ;
border:40px solid teansparent
}
</style>
```
利用border製作一個圖框設計，會以四個角為主軸(不會更動)，而「邊」會重複顯示多個(依照你的寬、高)。
```html
<style>
.class{
border: 20px solid transparent;
border-image:20 repeating-linear-gradient(-45deg, #d22e2c 0, #d22e2c 20px, transparent 0 , transparent 40px, #2894c2 0, #2894c2 60px, transparent 0 ,transparent 80px);
</style>
```
---
### border外框的外框
※不會占空間
outline: 2px solid red; //線的大小 樣式 顏色
outline-offset: 10px; //設定最大外框
---
## 背景色
### background-attachment
指定背景影像是否固定或移動
fixed scroll
### Background-size
```html
<style>
.class{
background-size:contain;
background-size:cover;
}
</style>
```
Contain會顯示完整的一張圖。
Cover顯示圖片，超出部分裁切。
### Background-clip
```html
<style>
.class{
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
}
</style>
```
1. Border-box表示從border位置開始作圖的延伸。
1. padding-box表示從border位置開始作圖的延伸。
1. content-box表示從border位置開始作圖的延伸。
#### 製作吃背景圖片的字體
-webkit-background-clip: text;
color:transparent;
把顏色透明後直接吃到背景設定的圖片
---
### linear-gradient
可使用漸層效果
```html
<style>
.class{
background: linear-gradient(to right, rgba(100,10,100,0.5) 80% , yellow 300px, url('/iamge/...jpg');
}
background: repeating-linear-gradient(rgba(100, 10, 100, 0.5), yellow 100px);
</style>
```
1. to right / to left / to bottom / to top
可設定漸層開始方向
1. deg
可設定漸層開始的角度
1. yellow 300px
可設定黃色的範圍
1. repeating設定可以在圖的尾端結束後又重複一次，不然系統會直接延展最後一個顏色。
#### radial-radient
```html
<style>
.class{
background: radial-gradient(red,#333 30%,#FFF 50%, Pink);
}
</style>
```
「at」可以決定漸層的中心點從哪開始
at 50px bottom,
at center top,
「circle」可以讓你的圓心都是圓形的，不管你的圖片長寬。
---
## 顏色
Color
1. color:red
2. color:#000000
3. color:rgba(紅,綠,藍,不透明)
4. color:hsla(色相,彩度,明度,不透明)
opacity 不透明另外設定語法
---
## 超連結
(標準順序寫入)
1. a:link{} 定義預設第一次使用的超連結樣式
2. a:visited{} 定義已經瀏覽過的網頁樣式(只能設定顏色)
3. a:hover{} 定義滑鼠移動至超連結樣式
4. a:active{} 定義選下的超連結樣式
5. a:focus{} 定義正在輸入中的地方樣式
只抓取某個範圍方式
.選取器>中間元素*N個>指定修改元素
```css
<style>
**方法一：**.list a{}
**方法二：**.list>li>a{}
</style>
<body>
<ul class="list">
<li><a href="">新聞</a></li>
</ul>
</body>
```
- {text-decoration:____} 去除超連結底線
- none (無效果)
- overline (頂線)
- line-through (中線/刪除線)
- underline (底線)
- inherit (繼承)
---
## overflow 溢出內容
hidden 多餘部分隱藏內容
scroll 加入捲軸
---
##### visibility
隱藏方框 hidden visible
隱藏部分會顯示一個空格(他佔據空間)
---
## 表格樣式
### empty-cell
空白儲存格是否顯示
```
.class{empty-cells:show;}
.class{empty-cells:hide;}
.class{empty-cells:inherit;}
```
### border-spacing
表格間距
```
.class{border-spacing:px px;} 分開
.class{border-spacing:collapse;} 緊密
```
---
### 清單樣式(ul、ol)
- list-style-type
none 無
disc 實心圓
circle 空心圓
square 實心正方形
decimal 阿拉伯數字
lower-alpha 小寫英文
upper-alpha 大寫英文
lower-roman 小寫羅馬字母
upper-roman 大小羅馬字母
- list-style-image
url(”_________”)
- list-style-position
inside
outside
---
## cursor 游標樣式
1. auto
1. crosshair
1. default
1. pointer
1. move
1. text
1. wait
1. help
1. url('')
---
## 位置
### Position
1. #### static 預設
1. #### relative 相對定位 (父元素)
還是佔據本身位置
3. #### absolute 絕對定位
不影響其他物件移動
1. #### fixed
永遠鎖在某個位置，不影響其他物件移動
### z-index
三度空間中，Z軸方向
### float
三度空間中，會自動移動至Z軸+1
但佔據位置但不蓋住原本物件
### clear
### display
```html
<style>
.wrapper{
display: flex;
}
</style>
<body>
<div class="wrapper">
<div class="box">1</div>
</div>
</body>
```
display有block、inline、flex 三種
1. block是可以設定寬高、佔一個區塊的。
1. inline是不可設定寬高依據本身內容物去改變大小的。
1. 預設值為block，flex會改變子元素型態，變成由左至右排列。
1. inline-block 以inline的方式呈現，但同時擁有block的屬性。
2. inline-flex 以inline的方式呈現，但同時擁有flex的屬性。
---
### flex-direction
```html
<style>
.class{
flex-direction: row-reverse;
flex-direction: column-reverse;
}
</style>
```
flex-direction: row-reverse; 可將第一個物件從右邊當起始點排到左，方向改變。
### justify-content 水平對齊
```html
<style>
.class{
justify-content: flex-start;
justify-content: flex-end;
}
</style>
```
1. flex-start依照區塊大小從上邊開始，是物件從上至下順序排列。
1. flex-end依照區塊大小最後一個物件貼齊區塊下邊，是物件從上至下順序排列。
1. center依照區塊大小直接置中對齊。
1. stretch依照最高的區塊去統一所有高度
2. baseline 對齊內容物的基線
### align-items 垂直對齊
```html
<style>
.class{
align-items:flex-
}
</style>
```
1. flex-start依照區塊大小從左邊開始，是物件從左至右順序排列。
1. flex-end依照區塊大小最後一個物件貼齊區塊右邊，是物件從左至右順序排列。
1. center依照區塊大小直接置中對齊。
1. space-between 均分物件。
1. space-around 均分，會把中間間隔大小切成一半放左和右當左右寬間距。
1. space-evenly 均分，連左和右間距都一樣大小。
### flex-grow 分配剩餘空間
```html
<style>
.class1{
flex-grow:1;
}
.class2{
flex-grow:2;
}
</style>
```
flex-grow:1; 會回抓母空間剩餘1空間填滿 (全都分給有寫的那裏)
若有兩個物件都要分配剩餘空間，會把剩餘空間/，以此類推。
flex-shrink:設定的物件不會被壓縮，剩餘物件空間不足會依比例壓縮。
flex-basis:可以更改原本設定的Width
flex-wrap:warp不夠寬度時可以自己更換行列。
---
### align-self 自我對齊
自行對齊其他方塊的最上方、中間、最下方。
`
.class{
align-self: self-end;
}`
---
### order 選擇位置
值為-和+，-值會跑到第一個，+值會跑到最後一個。
看數字大小排順序。
通常會在網頁版切換手機版時使用
```
.class{
order:1 ; //數字越大越後面
.class2{
order:-1 ; //數字越大越前面
}
```
---
#### 超過容器寬度後自動變 ....
```
.class{
text-overflow: ellipsis; //超過變...
white-space: nowrap; //強制文字變成一行
overflow: hidden; //超出部分切割
}
```
一定要三行程式碼都寫。
通常在網頁版會加上title顯示第一行全文字。
### calc
讓畫布可以去用減法計算/切版。
width設定為25%時可均分網頁成四份，若有另外設定margin和padding會比較麻煩，可以直接在width: calc(25% - margin/padding/border ;就可以去除邊框取得真的四等份。
---
## iamge應用
### Object-fit
主要設定在圖片上
所以要針對Image做設定
``` css
<style>
.box img {
width: 100%;
height: 100%;
}
.a {
Object-fit: fill;
}
.b {
Object-fit: contain;
}
.c {
Object-fit: cover;
}
.d {
Object-fit: none;
}
</style>
```
``` html
<body>
<div class="box">
<img src="__.jpg" class="a~d">
</div>
</body>
```
### Object-position
主要針對使用Object-fit使用，會把他推出去但同時會讓設定的跑掉。
```
.a {
Object-fit: fill;
object-position: 100px;
}
```
---
## shadow
陰影功能
```html
<style>
.class{
text-shadow: 2px 2px 5px gray;
box-shadow: 2px 2px 5px gray;
}
</style>
```
text-shadow:水平位移 垂直位移 模糊範圍 顏色
box-shadow:水平位移 垂直位移 模糊範圍 顏色
預設值為外陰影，在尾端寫入「inset」可變成內陰影。
---
## transform 變化
### translate
屬性:
transform: translate(x軸,y軸);
transform: translateX(...px)、translateY(...px);
transition: 0.秒s;
transform: rotate(幾度deg);
transform: scale(放大縮小多少);
transform: scale(水平方向,垂直方向);
transform: skew(水平方向,垂直方向);
transform: matrix(a,b,c,d,e,f)
(scale X)
b(skew Y)
c(skew X)
d(scale Y)
e(move X)
f(move Y)
#### transition
transition=transition-property+transition-duration
屬性:
transition(CSS屬性,秒數)
transition-delay:秒數
transition:屬性 秒數,屬性 秒數,屬性 秒數 ... 可以一直接下去
#### transition-timing-function:
linear //維持正常速度
ease-in //開始時加速，後慢
ease-out //開始慢，後加速
cubic-bezier(變化,變化,時間,時間)
http://www.appanimations.com/
---
## 切版
### Column
一大串文字自動切版
屬性:
column-count:切的行數;
column-gap:設定之間的空白格寬度;
column-rule:設定間格線的粗度 線條樣式 顏色;
#### masonry
瀑布流文字、圖片排列方式
利用column-count自動排列
設定最外寬
margin: 0 auto; //自動排列置中
max-width: 960px; //最大畫布限制
保持區塊完整
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
#### 修改區塊大小
屬性:
none|both|horizontal|vertical|initial|inherit
```
resize: both;
overflow: auto;
```
### grid
要寫在容器裡
display:grid
在設定要的數量，依照你要的隔數。
grid-template-columns: 要多寬 要多寬 要多寬 ;
EX
grid-template-columns: 100px 50% 20px;
這樣就會分3col
grid-template-rows:
如果要用fr(平均分配單位) 要設定高度給他
不然還會是預設值
grid-column-gap、grid-row-gap為格線的間距，一起寫的方式grid-gap
---
justify-self、align-self 針對一個class位置設定
---
fr這個單位會分配容器剩下的剩餘空間
repeat(4, 1fr) 也會平均分配
---
在容器內先設定好要切的線，這樣他就已經幫我們切好隱形的線，在物件裡再去設定要顯示的範圍。
```css
容器{
display: grid;
grid-template-columns: auto auto auto auto;
grid-template-rows: auto auto auto auto;
}
.class{
grid-column: 2/4;
grid-row: 3;
}
```
2/4的意思是 這兩個點的位置，所以顯示的是Col2~Col3
---
reset.css 是破壞了所有的樣式
normalize.css 保留了一些元素 p和h1這種原型
---
```
容器{
grid-template-columns: repeat(4, auto);
grid-template-areas: "header header header header" "nav nav nav nav" "main main main aside" "footer footer footer footer";
}
```
/* 指定只有這個裡面區域的要重製*/
```
.container>* {
border: 1px solid #ccc;
padding: 5px;
}
header {
grid-area: header;
}
nav {
grid-area: nav;
}
main{
grid-area: main;
}
aside {
grid-area: aside;
}
footer {
grid-area: footer;
}
```
要對照class寫grid-area，grid-template-areas才會啟用。
---
---
### box-sizing
使用此標籤會把padding和margin算入長寬內
若設定width、height、padding、margin、border後，沒有設定box-sizing，總長寬是width+height+padding+margin+border。
若設定width、height、padding、margin、border後，有設定box-sizing，總長寬是你設定網頁的width、height。
如果需要計算，設定後border和padding都是往內縮，只需要扣除margin數值。
屬性
box-sizing: border-box;
---
## 變數
一定要定義在選擇器內，定義方式
```
--width: 200px ; //定義
width:var(--width); //使用
height:var(--width); //別人也可以使用
```
---
## Media Query
這是把網頁和手機的尺寸一致
要先確定在head裡有加入這行
```
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1">
```
設定方式如下
```css
<style>
body{
background: paleturquoise;
}
@media screen and (max-width: 960px) and (min-width:768px) {
body{
background: gold;
}
}
</style>
```
※注意：每個空白鍵都很重要
## Picture 圖片
在不同解析度之下變化圖片
背景圖和前景圖的差異
``` css
<picture>
<source media="(min-width: 650px)" srcset="images/dr_fate.jpg">
<source media="(min-width: 465px)" srcset="images/dr_strange.jpg">
<img src="images/deadpool.jpg" alt="Deadpool" style="width:auto;">
</picture>
```
## animation 動畫
@keyframes類似function做動畫
寫法如下
```
@keyframes 變數 {
from {background: red;}
to {background: blue;}
}
.class{
animation-name: 變數;
animation-duration: 2s;
}
```
```
@keyframes 變數 {
0% {background: red;}
50% {background: blue;}
100% {background: yellow;}
}
.class{
animation-name: 變數;
animation-duration: 2s;
}
```
可用參數
animation
animation-delay: 動畫延遲
animation-direction: 動畫播放方向
animation-duration: 動畫持續時間
animation-fill-mode: 動畫停止時顯示的畫面
* forwards: 停在最後的狀態
* backwards: 停在最初的狀態
* both: 視 animation-direction 決定狀態
animation-iteration-count: 動畫播放次數
* infinite(無限撥放)
animation-name: 選擇動畫
animation-play-state: 動畫狀態
animation-timing-function: 動畫播放
---
## 外部資源
### font-awesome 文字圖片檔
https://cdnjs.com/libraries/font-awesome
遷入link元素以後，至 https://fontawesome.com/search?o=r&m=free 找素材
會給你一段body遷入語法
可用Class指定這個font的顏色和大小
※使用SVG檔案會比較不吃資源
fa-rotate-度數(90、180、270)，可旋轉他的角度
動畫ICON
https://fontawesome.com/docs/web/style/animate
---
http://fontello.com/
https://icomoon.io/
http://themify.me/themify-icons
https://octicons.github.com/
http://streamlineicons.com/free-icons.html
http://themes-pixeden.com/font-demos/7-stroke/index.htm
---
讓Footer永遠在最下方
https://www.tpisoftware.com/tpu/articleDetails/2041
---
## CDN套件
動畫效果串聯
https://animate.style/
```
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
```
Class name : animate__animated
實作
```css
<style>
@keyframes walk{
from{
background-position:left top;
}
to{
background-position: -3150px top;
}
}
.Acat{
/*單隻貓的設定*/
width: 350px;
height: 380px;
margin-inline:auto;
background-image:url("/images/cat.png");
background-position: -700px top;
animation:walk 0.5s infinite steps(9);
}
</style>
```
## 濾淨效果
CSS 濾鏡效果，常用在 img 上
包含:
```
filter:blur(px): 模糊
filter:brightness(%): 亮度
filter:contrast(%):對比
filter:drop-shadow(h-shadow v-shadow blur color): 陰影
filter:grayscale(%): 灰階
filter:hue-rotate(deg): 色相變換
filter:invert(%): 負片
filter:saturate(%): 飽和度
filter:sepia(%):
```
* filter:drop-shadow 和 box-shadow差異？
1. drop-shadow是依照整個外型(如果是透明圖片)
1. box-shadow是一個外框的陰影
---
裁切圖形產生器
https://bennettfeely.com/clippy/
---
老師的google文件
https://docs.google.com/presentation/d/1VyhiSrYTegror3gIkXcSFBG4WQWDyHjbhT5dWh8-SmI/edit#slide=id.g10f4415f2da_0_0
Sign in with Wallet
Connect another wallet