css 學(xué)習(xí)和應(yīng)用，這波穩(wěn)了！
大家好，我是雙月。
今天分享一波css學(xué)習(xí)資源，從新手入門級(jí)到大神級(jí)都包括了，而且還有大佬總結(jié)的日常使用的css效果和代碼片段，不但可以學(xué)習(xí)下大神的css怎么寫的，還能用于工作中提高效率。
css 入門學(xué)習(xí)
強(qiáng)烈推薦菜鳥教程，非常適合新手學(xué)習(xí)，從最最基礎(chǔ)的部分開始講解，從css簡介到語法到屬性介紹，同時(shí)有非常豐富的實(shí)戰(zhàn)demo，可以在線鍛煉自己的css，實(shí)時(shí)看效果。
資源地址：https://www.runoob.com/css/css-tutorial.html
當(dāng)然類似的還有w3school 也可以同時(shí)刷起來。
資源地址：https://www.w3school.com.cn/css/index.asp
css 進(jìn)階
當(dāng)你對(duì)css有了初步的認(rèn)知和理解之后，由于這些知識(shí)點(diǎn)比較分散不系統(tǒng)，而且不知道哪些會(huì)在工作中使用，接下來就要開始系統(tǒng)的學(xué)習(xí)css，并快速的理解掌握，應(yīng)用于工作之中。
這里推薦大漠的免費(fèi)的系統(tǒng)在線教程《十天精通CSS3》，這是一個(gè)很有意思的教程，也是為了提升你的學(xué)習(xí)效果， 他是一種闖關(guān)的方式， 每個(gè)章節(jié)的知識(shí)點(diǎn)都有實(shí)例演示結(jié)合在線編程完成任務(wù)的方式來學(xué)習(xí)，相信自己動(dòng)手會(huì)讓你理解的更快，可以讓你的學(xué)習(xí)效果更好。
資源地址：https://www.imooc.com/code/863
css 預(yù)處理器
CSS 預(yù)處理器技術(shù)已經(jīng)非常的成熟了，為了提升css的能力、代碼復(fù)用能力、以及開發(fā)效率，涌現(xiàn)出了越來越多的 CSS 的預(yù)處理器框架。
主要有：sass 、less 和 stylus，都是在現(xiàn)在的 vue 和 react 項(xiàng)目中經(jīng)常用到的，用法也很簡單，只要學(xué)會(huì)一種，其他兩種都很容易上手，項(xiàng)目中用哪一種就要看自己的喜好了。
sass
Sass 是一種 CSS 的預(yù)編譯語言，Sass 為 CSS 賦予了更強(qiáng)大的功能。
它提供了?變量（variables）、嵌套（nested rules）?[混合（mixins）、函數(shù)（functions）等功能，并且完全兼容 CSS 語法。
Sass 能夠幫助復(fù)雜的樣式表更有條理， 并且易于在項(xiàng)目內(nèi)部或跨項(xiàng)目共享設(shè)計(jì)。
官方文檔地址：https://sass.bootcss.com/documentation
less
Less 是一門 CSS 預(yù)處理語言,它擴(kuò)展了 CSS 語言,增加了變量、Mixin、函數(shù)等特性。
Less 可以運(yùn)行在 Node 或?yàn)g覽器端。
官方文檔地址：less.bootcss.com/[1]
stylus
富有表現(xiàn)力、動(dòng)態(tài)、健壯的 CSS。
它提供了一種高效，動(dòng)態(tài)和表達(dá)方式來生成 CSS。同時(shí)支持縮進(jìn)語法和常規(guī) CSS 樣式。
官方文檔地址：stylus-lang.com/[2]
效率倍增
我們?nèi)粘９ぷ髦忻獠涣藢?shí)現(xiàn)一些特殊的效果和動(dòng)畫以及一些特殊的布局， 如：
彈跳效果 彈性過度 抖動(dòng)效果 各種loading效果 1px邊框 絕對(duì)底部 水平垂直居中 圣杯布局 雙飛翼布局 水平垂直居中 各種陰影效果 多重邊框 半透明邊框
等等等，太多了，我就不一一舉例了。
像上面說的這些效果都有現(xiàn)成的代碼片段可用，當(dāng)然最主要的是可以作為我們的學(xué)習(xí)資源，看大佬們是怎樣實(shí)現(xiàn)的。
You-need-to-know-css
筆者把自己的收獲和工作中常用的一些 CSS 小樣式總結(jié)成這份文檔，該項(xiàng)目整理了 CSS 的各種效果實(shí)現(xiàn)，尤其是動(dòng)畫效果，也都提供了完整的實(shí)現(xiàn)代碼。
目前文檔一共包含 43 個(gè) CSS 的小樣式（持續(xù)更新中）是非常不錯(cuò)的學(xué)習(xí)資源。
資源地址：https://lhammer.cn/You-need-to-know-css/#/zh-cn/multiple-borders
比如：1px邊框?qū)崿F(xiàn)
box-shadow?+?transform?實(shí)現(xiàn) 1px 線條
??"main">
????"one-pixel-line?shadow">
??
animista
這是一個(gè)專業(yè)提供各種css實(shí)現(xiàn)效果的網(wǎng)站，網(wǎng)站做的很精致，有非常多的效果實(shí)現(xiàn)，有代碼演示， 方便直接復(fù)制代碼，還可以復(fù)制壓縮后的代碼，如果你正在找某個(gè) CSS 的效果的話，可以到這里找找看。
最重要的是交互性很強(qiáng)，提供了各種選項(xiàng)可以動(dòng)態(tài)調(diào)整，比如動(dòng)畫類型、動(dòng)畫方向等，非常實(shí)用。
資源地址:https://animista.net/
spinkit
這是一個(gè)專門搞各種加載效果的網(wǎng)站，僅使用（transform?和?opacity）CSS 動(dòng)畫來創(chuàng)建平滑且易于自定義的動(dòng)畫。當(dāng)然也提供了源碼，如果正好需要可以直接復(fù)制過來。（當(dāng)然不提倡拿來主義）
比較懶，只放了一個(gè)靜態(tài)圖。
還有更多效果，可以直接打開下面的地址查看。
資源地址：https://tobiasahlin.com/spinkit/
CSS Tricks
總結(jié)一些常用的 CSS 樣式，記錄一些 CSS 的新屬性和一點(diǎn)奇技淫巧，沒有廢話，代碼簡單易用，方便復(fù)制。
舉個(gè)nb的栗子：卡券生成器
.hollow-one-circle{
??width:?100px;
??height:?100px;
??position:?relative;
??background:?radial-gradient(circle?at?0?50px,?transparent?10px,?#00adb5?0)?top?left/100px?100%?no-repeat;
??
}
不光有代碼，還能動(dòng)態(tài)調(diào)整參數(shù)。
資源地址：https://qishaoxuan.github.io/css_tricks/
Animate
是一個(gè)有趣的，跨瀏覽器的 css3 動(dòng)畫庫，內(nèi)置了很多典型的 css3 動(dòng)畫，兼容性好使用方便。
animate.css 的使用非常簡單，因?yàn)樗前巡煌膭?dòng)畫綁定到了不同的類里，所以想要使用哪種動(dòng)畫，只需要把通用類 animated 和相應(yīng)的類添加到元素上就行了。
也是前端開發(fā)必備動(dòng)畫庫。
資源地址：https://animate.style/
高精尖
上面都屬于是應(yīng)用層面的，但是我們學(xué)技術(shù)不但要知道怎樣用，還要知道背后的原理，為什么是這樣的。所以這里就到了學(xué)習(xí)深水區(qū)，要學(xué)習(xí)css更底層的東西。
這里我推薦個(gè)大佬：張鑫旭（大家都知道了，不需要介紹了），也推薦閱讀下的書籍《CSS選擇器世界》
大佬博客地址：https://www.zhangxinxu.com/ 上面有很多非常深入的文章，需要慢慢品嘗。
跨過這里，你就是大神了。
~ <> ~ 感謝閱讀，希望對(duì)你有所幫助，有用的話幫忙點(diǎn)個(gè)贊????吧。