佈局
架構 ⇒ 由大到小,由外而內
層級
- 排版
- 定位相關
- position, top / right / bottom / left
- 影響區塊在畫面上的位置
- 畫面流相關
- display grid / flex, block / inline-block
- 影響區塊內的水平、垂直排版
- 區塊
- width / height, background, box model, padding / margin
- 用於定義區塊本身的樣式呈現
- 內容
- font, line-height, text-indent, color
- 用於定義內容文案的樣式
- 動畫
- keyframes, animation, transition
- 可以用來定義動態整體脈絡中的樣式變化
權重
- 標籤 ⇒ 1
- class ⇒ 10
- id ⇒ 100
- inline style ⇒ 1000
- important ⇒ 10000
CSS 選擇器
- #box ⇒ 選擇 id 為 box 的元素
- .one ⇒ 選擇 class 為 one 的所有元素
- div ⇒ 選擇標籤為 div 的所有元素
- #box div ⇒ 選擇 id 為 box 元素內的所有 div 元素
- .one>.one_1 ⇒ 選擇 class 為 one 內的所有 .one_1 元素
- .one+.two ⇒ 選擇跟在 .one 之後的所有 .two 元素