CSS總結
從High-level看待CSS結構
- CSS（Cascading Stylesheet）中，樣式從CSS文檔頂部級聯到底部。{}內部屬性（property）也存在級聯特性。
- 優先級（Specificity）
- 選擇器（Selectors）
- 複合選擇器（Combining Selectors）
- 樣式分層，當兩個元素共有一些屬性的時候，將這些屬性單獨提出來。
- 常用的屬性值（Color | Length）
圖1 CSS知識架構圖
一、語言
CSS文檔由一系列限定規則構成的，主要有兩種規則。一種爲qualified rule，用於描述應用於元素樣式的CSS屬性；一種爲at-rule，用於CSS文檔的特殊處理。（參考CSS官方文檔）
@rule
圖2 幾種@rule
qualified rule
選擇器 { 屬性：值；}
1）優先級
主要有三類基本的選擇器，每個選擇器都有其優先級權重。
- 類型選擇器 0-0-1
- class選擇器 0-1-0
- id選擇器 1-0-0
權重越大的選擇器具有越高的優先級，而無視級聯特性。複合選擇器的權重即簡單相加。
2）選擇器
僞類選擇器\僞元素選擇器
複合選擇器： prequalifier+key selector（最右） | combinator（空格 > + ~ ||） | eg: p.mustard
樣式分層：爲了使得選擇器的權重較低，應整合元素中的共有屬性，對選擇器進行分層。常用方法是使用多個class選擇器。
3）常見屬性（property）值
- Color: keyword | hexadecimal notation | RGB | HSL values
- Length: 絕對單位（px） | 相對單位（% em rem）
二、功能
盒模型 width height padding margin border display
佈局
佈局正常流指的是瀏覽器默認的HTML佈局方式。而是用相關CSS佈局技術，能夠覆蓋默認佈局。
- position: static（默認）| relative | absolute | fixed
- float: left | right | none | inherit
- display: block | inline | inline-block | none
- CSS表格 （設置display: table | table-row | table-cell | table-caption）
- 彈性盒子（設置display: flex）
- 網格（grid）
繪製
1）形狀
- 基礎圖形：圓、三角形、梯形。基礎圖形指的是調整盒子border就能繪製的圖形。
- 複雜圖形：將複雜圖形拆分成兩個或三個基礎圖形，通過:after和:before，使用定位（position）和旋轉（transform）等方式進行組合。
2）顏色
- 顏色模式 rgba(R,G,B,A) hsla(H,S,L,A)
- 透明度 opacity: value | inherit
- 漸變 linear-gradient() radial-gradient()
- 陰影 box-shadow
3）文字相關
- 字體（font）
- 文本效果（text） text-shadow
- 排版 text-overflow
圖3 Font-based properties
圖4 Text-based properties
交互
1）動畫 animation @keyframes
2）變換 transition
三、注意
瀏覽器兼容性（CSS層面） caniuse屬性前綴
跨終端 響應式設計