# CSS
- Date: 2021/08/07

[CSS菜鸟教程](https://www.runoob.com/css/css-tutorial.html)

[金魚都能懂的CSS必學屬性](https://ithelp.ithome.com.tw/users/20112550/ironman/3803)

# tag / id / class

body {
...
}

#id {
...
}

.class {
...
}

# color:
https://www.w3schools.com/html/html_colors.asp
https://www.w3schools.com/colors/colors_picker.asp
https://www.w3schools.com/cssref/css_colors.asp
https://www.runoob.com/html/html-colornames.html
https://www.runoob.com/html/html-colorvalues.html

# background
- color / image / size

# font:
- size / weight

# width / height

# margin:
- left / top / right / bottom

# padding:
- left / top / right / bottom

// new

# border:
- left / top / right / bottom
- radius
- style
- dash / solid / dot ...

# text:
- align:
- left / center / right
- decoration
- none

# position:
- static / relative / absolute / fixed ...

# display:
- none / inline / block / inline-block / flex ...

# left / top / right / bottom

---

# 繼承屬性 inherit
- 繼承自父層的效果

# text-decoration 文字裝飾
- text-decoration: none/overline/underline/line-through

a {
  text-decoration: none;
}

# line-height 行高
- 文字不同行之間的間距: 倍數
- line-height: 1.5

.content {
  line-height: 1.5;
}

# FlexBox
- display: flex
- flex-direction: column/row
- justify-content: start/center/end
- align-content: start/center/end
- align-items: start/center/end

.box{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

# Grid
- display: grid
- grid-template-columns
- grid-template-rows
- grid-gap
- grid-gap-column
- grid-gap-row

.box {
  display: grid;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-gap: 10px;
}

# Box-Sizing
- box-sizing: content-box/border-box
- 寬高設定作用
- content-box 內容盒子(內容範圍)
- border-box 邊框盒子(邊框外緣的範圍內)

.box1 {
  box-sizing: content-box;
}
.box2 {
  box-sizing: border-box;
}

# transition 轉場

a {
  background-color: black;
  transition: 0.5s;
}
a:hover {
  background-color: orange;
}

# 偽元素