🜚 CSS筆記
===

➤關鍵字
---
- [網頁關鍵字速記表](/R6DXRtK6SaWC8oAV9m1GrQ)

CSS
---
- [常見的CSS寫作方式](/njFrIng1Q4uF3-c4kBBr0A)
- [瀏覽器兼容度(前綴)](/fNFawZsyQP2Tgs3NafCD3Q)
- [載入CSS](/-ZuEiH3BRXq5aZNXgC4R_Q)
- [css reset](/oksexo1HTTaLlrJp_Ani3A)
- [css 權重](/khwVsrgdSxewV2mleZbKxA)
- [在HTML中套用CSS方法(style)](/sgEgXunsRhWNyl-bWWaAMA)
- [顏色](/3_kASlVUS7K9iK0YxsKokw)
- [圓角效果](/JkBAY4gXTwyh4XoWpdJXwA)
- [漸層`linear-gradient`](/gghLvLVwSk20A5_lMlQh1Q)
- [陰影效果`box-shadow`](/Y8SpEodDSB-dcKkZPlENXg)
- [`overflow`](/VPaGkodAQ9CSkbA-eXx5Jg)
- [透明`Opacity`](/hFAgAREaTd-h3YqrGryWYQ)
- [列表樣式`list-style`](/DaCmxSNgTPm8tjWmv94fwQ)
- [CSS變數](/nZJK__0kSpeKMnSw0ROFpQ)
- [濾鏡`filter`](/1FdcSPBaRTyIu-hJ4IFWFA)
- - [`backdrop-filter`](/dtCDOsQPS5eQ8eBrzHlHXA)
- [`mix-blend-mode`濾鏡](/G1-vaXwrTQSKBD5HFLjKqA)
- [`clip`、`clip path`](/eSKftzA9SS6kRhy1PMpxwg)
- [`resize`縮放寬高](/CcN3yin3TYi06n5sLBVLCw)

➤外部資源
---
- [引入icon](/I4um7_yZQz2mCOMHw-OTxg)
- [PURE CSS框架](/x89DIt85SWSM2IK9wGt4zg)

➤盒模型觀念
---
- [盒模型概念](/ODqX5YZQS7yUYEB2xEK1Iw)
- [margin重疊邊界問題](/sebsPeoKSmifhGn0lbKifw)
- [box-sizing盒模型](/i9DoaqmKTkW4kRUkHXHcOw)

➤線條
---
- [線條border](/D1EI1MRjRzuduVdxNI3BoQ)
- [outline屬性](/qU0C2wv9ThO1A2Dr5juhEA)
- [css 繪製](/yWncZLK7RL2v595LQbaykw)

➤單位
---
- [css使用的單位](/d5kmJ06-Rk-NDfA6kmXbTw)
- [`min-content`、`max-content`](/-y-mnjlbQJCbQ7JEs_d5Yw)
- [`min-width` 、 `max-width`](/SKaIXzM4TXiX6Fs_QZBqvw)
- [`calc()` 數值運算](/ttGnjYMMSruop9Qc9DVtHA)

➤表單
---
- [form表單效果](/OxK36c6zSDiKL3FA7uX05g)
- [客製化form表單樣式](/noejuzirTLiGqXrKzGxPtA)
- [placeholder樣式](/nhzHcT_hRjaU3cjsns_psg)

➤表格table
---
- [div做成table](/tbZUUHkTSeKqnyVyR1nahw)
- [表格美化`border-collapse`](/ddrH8q7AQEqFdguzjPl7fg)

➤圖片、背景圖
---
- [移除圖下方不明空隙](/QRfKa9n_QGetYHbWy6kDaw)
- [background背景圖](/WPUCAiMNRxegKTqBE_i49w)
- [圖片的`object-fit`、`object-position`](/IZ8S6CrDSvCGQwY2w1a_zg)
- [圖片與背景圖差異](/XuoIag3PTBe7AVzudrmBKw)
- [用圖片取代"a連結"文字的連結的技巧](/7J2RgNDHTLCPayeQnKlZnA)
- [圖片圓形框](/bh-RDrRyT2uuhkkOk5No6g)

➤文字
---
- [文字](/27SP9L-SSv2cB8YIHrWgsw)
- [字型](/@grayshine/H1rGLxV4q)
- - [文字對齊`text-align`、`vertical-align`](/pTKNDFR0S9efWZXLmGnqpw)
- - [文字換行`word-wrap`](/RibbPkR7RRmVsNLprOyK2w)
- - [文字方向`writing-mode`](/gpEo-W0XSoe6VHM4N0sMnA)
- - [column 文字排版](/w8gGxXSEQ2OfkkJGyjJimQ)
- - [文字陰影`text-shadow`](/WzNSwLAjSgW9l8yTvdbnGw)
- - [文字邊框 `text-stroke`](/DXkgveSTQ8yZ8RqvdEEL5g)
- - [文字裁切背景`background-clip`](/oHAEQzKNRs2FQA6qvL2FFg)
- [text-rendering 文字渲染方式](/cTqnZex_QZa__YkhtfDn1Q)
- [font-smoothing 文字平滑模式](/mNie-W4bRqaTBJS4cdiZPQ)
- [`text-indent`縮進量](/IiyLVcrORlitFkA6Ye6U-Q)
- [多國語系](/nDyKEnvIQwuaiEhyA0YbiA)

➤選擇器
---
- [標籤選擇器](/ACXl9hwaT0mLwfJNbBFEcg)
- [類別選擇器](/a1Yyb77zRl-Al6foXhY2og)
- [屬性選取器](/uisiQwFMQjaSxofh-ohAMA)
- [選擇器 `xy`、`x>y`、`x+y`、`x~y`](/g7u-S39wQuSqdTQUAzttZA)

➤Display屬性
---
- [display屬性](/E7L5UAgTRXKEOt2tDupwUg)
- [去除inline-block、inline元素間距問題](/PAgxeDPASPG-OVjh364dZA)

➤排版
---

- [float排版](/MjB390KrQfWVfzMOYgo9qg)
- - [解除float](/_iMkGLdkRXGCSmvau6W27w)
- [flex頁面排版](/-jPlSGU4TuCCmO7Flwobyg)
- - [Flex外容器(父層)語法](/y9PRExLCRIq7dLYisacpwQ)
- - [Flex內元件(子層)語法](/wryk70E1SBqgmYh6FGFWkg)
- [Grid排版](/fekLlCaORBWOKJQ2HNxzWw)
- - [Grid範例](/cncvSGpYQVuiUVYc3Pk9HQ)
- [float、flexbox、grid的使用場合](/ei1UeyrfSyelvR83h6pVUg)
- [margin-right、margin-left技巧](/sHPXmFGbRYaQbCWIs0eYOQ)
- [上下左右置中對齊的三種方法](/Q5vMz4oOTD6D32LOBrMcdA)
- [垂直至中的方法](/rPiqnsMUTbKjfDPwo83jpA)
- [水平居中的方法](/LNZG-ytITv-P4c4jt_oYPw)

➤定位
---
- [position定位](/7qfeoysuQ0iHcgSFCW8w8Q)

➤偽類/元件狀態
---
- [偽類、偽元素](/i7StyXz3S7ylYMfTUA5Fjw)
- [偽類](/QHj24I0gSvi2u2M7-AEpFA)
- [常見的偽類](/NWnz0wYLSoyo2p1TWq_fqw)
- [`cursor`滑鼠游標的型態](/55W0Lf6tRR6qPy4PWcA2SA)
- [`:first-child`&`:last-child`頭尾選取器](/-NonA7TTRJmz5hb-B9y1iA)
- [`:first-of-type` & `:last-of-type`選取器](/LPSXiIuSTJeC7Mj-02L4yA)
- [`:nth-child()`&`:nth-of-type()`](/CBZT5ajjQMq_36T0HnMekQ)
- [`:not()`選擇器](/tolbbZZ9STOf5t0syzmLYg)
- [`:required` 、`:optional`必填欄位](/gCx97Uw2Q2m2lZWWLBktXw)
- [`:valid`、`:invalid`資料格式檢查](/oN7shL0GSrunEdc4cgGxTQ)
- [`:in-range`、`:out-of-range`判斷資料範圍](/pt-TGNnKTdmx9BIKDtzInA)

➤偽元素
---
- [`::first-letter`、`::first-line`](/qZkxQFTqTHe3hAWrPfd2Qg)
- [`::before`、`::after`](/OWnHxUdJRnGyPHQKSFjhNw)
- [`::placeholder`](/ypjiUTu2SF-saALXPoCtmA)
- [`::selection`](/kZTTpEIMQ92kL4BDTp1Jtw)

➤變形
---
- [Transform 2d](/_jUl4xmiTH68S3T9wFVydw)
- [Transform 3d](/utnT5vOZSM2L36S_SzL6Bg)

➤動畫
---
- [動畫Transition](/Vljj_ooITTCMLmiwL2jQNw)
- [動畫Animation](/hOJAuXSSSg2Cr17OeieSlw)

➤svg圖檔
---
- [svg圖檔](/ae9HgMhRTfK4_dYueFiovw)
- [svg動畫](/Mc928XiRR1CFBJMbBQO5mw)

➤滾動條
---
- [客製化滾動條scrollbar](/mxIJJwz9RgKOkOGJ1ajm4g)
- [`scroll-behavior`](/Qj2CVYPzQEW17szW8q7HwQ)

➤套件
---
- [AnimateCSS](/cIOj1OSYTkm1fiOzysub2Q)
- [AniCollection](/U93-U6wTTaKHFYy1c_qaVw)
- [animista](/Cl9VzaE8RK2EZu9Fpt5QrA)

➤格線
---
- [純CSS撰寫格線系統](/Q7vh-TibQ6mZA-qiya6T8w)

➤其他
---
- [Google Fonts Icons使用](/JPGDYslBR4CtYhoC3ZTVbQ)
- [錯誤的css設計](/duSABmlNSW-1M9wqvRBcIg)
- [CSS 架構管理檢核表](/5oZcFVUvTUCnmcEw3Tb-cA)
- [src、href、url](/qqWaAH-hS0aJQrzLIJ3Xzw)
- [CSS 的模組化方法(設計模式)](/KTGMXSPKTFKo70aC27WLPQ)
- [其他](/gW1q9Nc3TzGINnN7_MpaNg)