CSS3概覽

來自專欄前端開發

參考書籍：https://github.com/threerocks/studyFiles/blob/master/%E5%89%8D%E7%AB%AF/HTML5%E4%B8%8ECSS3%E6%9D%83%E5%A8%81%E6%8C%87%E5%8D%97%E7%AC%AC%E4%BA%8C%E7%89%88.pdf

CSS3 於2010年推出，沒有採用總體架構，而是採用了分工協作的模塊化結構。總結知識點如下：

• 選擇器
• 動畫
• flex和grid布局
• 媒體查詢
• 變形處理（transform）
• 文字與字體相關樣式（text-shadow，word-break，word-wrap，web font）
• 盒模型（box-sizing屬性）

選擇器

屬性選擇器（*=，^=，$=，……）

結構性偽類選擇器（root，not，last-child，last-of-type，……）

UI元素狀態偽類選擇器（hover，active，focus，valid，enabled，……）

通用兄弟元素選擇器（~）作用是查找某一個指定元素的後面的所有兄弟結點；注意區別兄弟元素選擇器+，+作用是查找某一個指定元素的後面的第一個兄弟結點

媒體查詢（設備類型和設備特性）

參考網址：https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

變形處理（transform）

變形處理：旋轉rotate，縮放scale，傾斜skew和移動translate

文字與字體相關樣式

word-break和word-wrap都解決了長單詞與URL地址自動換行的問題

web font，網頁中可以使用安裝在伺服器端的字體；而不像在CSS3之前，頁面文字所使用的字體必須已經在客戶端中被安裝才能正常顯示。

推薦閱讀：