RWD / CSS 筆記

# CSS-In-Depth https://estelle.github.io/

**排版** 配對字體：不要超過三種 / 字種不要相似

---

**ＣＳＳ大全-第二章：選取器**

**高級CSS選擇器：偽元素/類別**

**產生內容** 時常使用在::before 和 ::after 這二個偽元素中

---

**CSS如何在幕後工作**：
（1）ＣＳＳ大全-第三章：the cascade 級聯
（2）ＣＳＳ大全-第三章：Specificity 特異性 權重
（3）ＣＳＳ大全-第三章：繼承
（4）ＣＳＳ大全-第四章：值處理 https://ithelp.ithome.com.tw/articles/10220084
（5）ＣＳＳ大全-第七章：視覺格式化模型 https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model
（6）the box model 盒模型
（7）box types 盒子類型
（8）positioning schemes 定位方案
（9）stacking contexts 層疊上下文 https://andyyou.github.io/2016/03/03/z-index/

---

**CSS架構**：將7-1的規則，基於組件的設計，BEM方法，編寫可重用，可維護，可擴展的代碼;

---

**其他**

剪切路徑，背景剪輯，蒙版圖像，背景混合模式，外部形狀，濾鏡，背景濾鏡，對象適配，變換，列數，連字符，透視圖，calc（）和自定義CSS屬性；

---

**Sass**：變量，嵌套，部分，導入，mixin，函數，擴展等；
在實際項目中使用Sass：設置全局變量，為可重用性而構建，設計CSS和管理媒體查詢；

---

故宮的生態系統：建立一個發展的過程編譯無禮和瀏覽器自動重新加載，並創建一個構建過程來連接，前綴和壓縮CSS文件;

現代的響應式設計：流暢的網格，佈局類型，靈活的圖像，使用媒體查詢來測試不同的屏幕寬度，像素密度和触摸功能；

先進的響應式設計工作流程：移動優先與桌面優先策略，選擇斷點，em與rem單元以及功能查詢以測試瀏覽器支持；

HTML和CSS中的自適應圖像，可加快頁面加載速度：分辨率切換，密度切換，美術指導；

HTML和CSS中的SVG圖像：如何以及為什麼使用SVG，生成SVG精靈，更改CSS中的SVG顏色和最佳做法；

HTML和CSS中的視頻：建立背景視頻效果；