文字
顏色
color
rgba
hsla
16進位 #_ _ _ _ _ _ _ _
大小 可繼承
font-size
粗細
font-weight
字型
font-family
關鍵字
數值(100~900)
斜體、斜角
font-style
線段裝飾
text-decoration
線段位置
text-decoration-line
線段色彩
text-decoration-color
線段樣式
text-decoration-style
行高
line-height
純數字
%
px
首行縮排
text-indent
em
水平對齊
text-align 文字所在的空間去做對齊
左右對齊
justify
置中
center
垂直對齊
vertical-align
字元間距
letter-spacing
空白字元尺寸
word-spacing
語言方向
dir
英文全變大寫
font-variants
small-caps
段落
背景
背景顏色
background-color
設定背景圖片
background-image
url("檔案名稱")
linear-gradient(角度, 起始色彩 起始色彩位置, 結束色彩 結束色彩位置)
背景圖片大小
background-size
露白 (不變形,不可被裁切)
contain
不露白 (不變形,但會被裁切)
cover
讓圖片不變形
object-fit
cover
背景圖片對齊
background-position
%
位置x 距離x 位置y 距離y
right 100px bottom 50px
背景圖片重複
background-repeat
repeat
repeat-x(y)
no-repeat
space
round
背景圖片位置 (圖片捲動頁面會不會跟著動)
background-attachment
會跟著移動(預設)
scroll
不會跟著移動(常用)
fixed
只有捲動自己頁面時才會跟著移動(少用)
local
尺寸
寬 不可繼承
width
高 不可繼承
height
佔據空間
可見尺寸
內容物
content
內距
padding
框線
有佔據空間 可設定圓角
border
沒佔據空間 不可設定圓角
outline
外距
margin
auto
把剩餘空間分配到指定位置
寬高顯示方式
box-sizing
濾鏡
顯示
flex
flex父層設定 作用在下一個子層
改變物件顯示方式
display
flex
裡面資料會有block的特性
主軸走向
flex-direction
主軸對齊
justify-content
space-around
中間空隙變2倍
space-between
貼齊主軸兩側
space-evenly
等距
交叉軸 子層(彈性列)空間對齊
align-items
交叉軸 父層空間對齊 (需搭配wrap)
align-content
換列 (往交叉軸方向)
flex-wrap
flex子層設定 作用在自己
主軸物件排列順序
order
延伸
flex-grow
收縮
flex-shrink
基本值
flex-basis
單一彈性列空間對齊
align-self
控制物件(非裡面的內容)排列的方向
direction
ltr
rtl
RWD
製作不變形的三角形
製作多邊形
clip-path: polygon()
不變形
aspect-ratio
transform
縮放
scale(數字)
scale(2)
讓物件及主軸方向旋轉
rotate(deg)
依主軸方向位移
translate(x,y)
物件距離螢幕多遠
perspective(px)
以3D視角轉動物件
rotateX()
rotateY()
rotateZ()
陰影
box-shadow
動畫
@keyframes + name {劇本} 需搭配animation使用
名字
animation-name
持續時間
animation-duration
延遲多久執行
animation-delay
加減速
animation-timing-function
執行幾次
animation-iteration-count
移動方向
animation-direction
執行完畢的停留位置
animation-fill-mode
暫停或點到才播放
animation-play-state
清單
邊框
定位
position
固定
fixed
相對
relative
絕對
absolute
sticky (炫炮)
static (少用)
調整優先度
z-index