要想寫出優美的CSS作品，想象力固然很重要，然而基礎也是不可忽略的。相信大部分人怕寫CSS的原因是被它龐大的基礎知識體系給嚇到了，在此筆者推薦一個叫freecodecamp的網站，通過闖關的方式來學習前端三劍客，用它入門CSS是最佳的選擇！
當你成功地入了門之後，便可以開始探索CSS的全貌了。本文是CSS屬性的速查表，配合線上API文件使用即可
以下列出的屬性知識點都是筆者用到過的
千萬不要被數量嚇到，其實常用的也就這些：選擇-定位-佈局-盒模型-字型-背景-動畫-其他
Selectors
Type
元素本身，p
Class
類，p.class
ID
id，p#id
Descendant
後代，ul li
Attribute
屬性，input[type="checkbox"]
Sibling
相鄰元素，input ~ label
Univarsal
全選，*
Pseudo-class
偽類，用於選擇特定狀態下的元素
:hover
滑鼠懸浮狀態
:focus
元素本身獲得焦點
:focus-within
元素本身及子元素獲得焦點
:nth-child
第n個子元素
:not
不處於某個狀態
:target
URL的錨點
:checked
單/核取方塊開關on的狀態
:disabled
禁用狀態
:valid
校驗通過狀態
:invalid
校驗不通過狀態
:placeholder-shown
輸入框有佔位符時的情況（也就是使用者還未輸入時的情況）
:empty
空標籤元素
常用場景：欄位缺失、ajax載入資料為空
Pseudo-element
偽元素，在原先的元素基礎上插入額外的元素，並且它不充當HTML的標籤
::before | ::after
標籤的額外2個可繪製的元素
::selection
被使用者選中的部分
::placeholder
輸入框的佔位符文字
Positioning
position
- relative：相對定位，元素佔據文件位置，可以有偏移
- absolute：絕對定位，元素不佔位置，相對於父元素定位
- fixed：固定在視窗某一位置
- sticky：“粘”在視窗某一位置
top | left | bottom | right
上下左右的偏移距離
z-index
層疊關係
Display
display
- block：塊級元素
- inline：內聯元素
- flex：彈性盒子佈局
- grid：網格佈局
Box Model
拿水果舉例子：果核是content，果肉是padding，果皮是border，外界是margin
width | height
寬高
padding | margin
內外邊距
overflow
- visible：超出部分可見
- hidden：超出部分不可見
Fonts
font-weight
字型粗細
font-size
字型大小
font-family
字型種類
line-height
字型行高
Text
text-align
文字對齊
text-shadow
文字陰影
text-transform
文字大小寫
text-decoration
文字裝飾樣式
-webkit-text-stroke
文字描邊
white-space
空格處理
white-space: nowrap使文字不會自動換行
Color
color
文字顏色
opacity
顏色透明度
transparent
透明色
currentColor
當前元素color的值
Backgrounds & Borders
background-color
背景顏色
background-image
背景圖片
background-size
背景大小
background-position
背景定位
background-repeat
背景是否重複
background-clip
背景裁剪
border-width
邊框寬度
border-style
邊框樣式
border-color
邊框顏色
border-radius
邊框圓角
box-shadow
陰影
Images
linear-gradient
線性漸變
radial-gradient
徑向漸變
conic-gradient
圓錐漸變
object-fit
處理替換元素（如img）的變形問題
Filter
filter
作用於元素本身的濾鏡
常用濾鏡：
- blur：高斯模糊
- contrast：對比度
- drop-shadow：投影
- greyscale：灰度
- hue-rotate：色調變換
backdrop-filter
作用於元素背景的濾鏡
Blending
mix-blend-mode
常用混合模式
- multiply：正片疊底
- screen：濾色
- difference：插值
SVG
clip-path
裁剪路徑，用來裁剪出各種形狀
mask
蒙版，用於建立鏤空效果
letter-spacing
字母間距
pointer-events
滑鼠事件（通常都設為none，表示消除物件的滑鼠事件）
List
list-style-type
列表的marker樣式（通常都設為none，表示消除列表樣式）
counter-reset
重置某個計數器為某一值
counter-increment
給某個計數器增加特定的值
UI
appearance
元素的預設樣式（通常都設為none，表示消除預設外觀）
box-sizing
盒模型型別
- content-box：預設，標準盒模型
- border-box：IE盒模型（將
border和·padding一併算作長寬）
cursor
游標型別，最常用的是pointer，也就是一隻手
outline
輪廓
user-select
使用者是否能選擇文字（通常都設為none，表示使用者無法選中此文字）
Scroll
scroll-behavior
- auto：預設滾動行為
- smooth：絲滑滾動行為
scroll-snap-type
定義在滾動容器中的一個臨時點（snap point）如何被嚴格的執行
scroll-snap-align
控制將要聚焦的當前滾動子元素在滾動方向上相對於父容器的對齊方式
Transforms
transform
常見的幾何變換：
translate：平移scale：縮放rotate：旋轉skew：斜切
transform-origin
變換中心
transform-style
- flat：預設
- preserve-3d：3d場景
perspective
透視距離
backface-visibility
物體後方是否可視
Animation
transition
過渡
transition-property
過渡屬性名
transition-duration
過渡時間
transition-delay
過渡延遲
transition-timing-function
過渡緩動函式，內建：ease、linear、ease-in、ease-out、ease-in-out、steps()
自定義緩動函式：cubic-bezier()
animation
動畫
animation-name
動畫名稱
animation-duration
動畫時間
animation-delay
動畫延遲
animation-timing-function
動畫緩動函式
animation-iteration-count
動畫播放次數
animation-fill-mode
動畫填充模式
animation-play-state
動畫播放狀態
@keyframes
關鍵幀
Motion Path
offset-path
路徑的定義
offset-distance
物件在路徑上的位置
Others
attr()
獲取自定義屬性的值作為content生成的內容
var()
CSS自定義變數
calc()
計算值
@media
媒體查詢，用於適配不同裝置
-webkit-box-reflect
投影