為什么80%的碼農都做不了架構師？>>> ??

1.?盒子模型的幻燈片

通過3D轉換效果產生的互動的幻燈片。按向左或向右箭頭鍵切換，全屏觀看會有更好的效果。

2.?CSS?Diner

通過一個簡單的小游戲讓你學習CSS?selector，輸入正確的selector來完成每一關。你也可以通過菜單來選關。

3.?CSS?Selectors?交互

這是一個簡單可視化CSS選擇器。選擇左邊菜單中的選擇器,選擇的條目就會出現在右邊。

4.?前端Web開發考查

CSS?屬性有大小寫之分嗎？

5.?The?Magic?of?CSS

這里有6個章節的CSS教程，更深入的教程會慢慢開放。

6.?Enjoy?CSS

一個學習CSS的圣地，它專注于CSS。

6

7.?CSS?Guidelines

Harry?Roberts?已經更新了他的開放資源。之前只是GitHub上的一個庫，現在已經有了自己的域名，并且優化并更新了很多資源。

8.?CSS?Triggers…

Chrome開發者Paul?Lewis創造了一個頁面解析參考,當給定的CSS屬性變更時它會發揮自己的作用。例如,一些屬性將觸發重繪和合成,但不會引發布局。我們可以很容易地通過CSS?Triggers來發現這些變化。

9.?mdo貢獻的代碼指南

Bootstrap’s的Mark?Otto?整理了他自己風格的HTML和CSS指南，這些建議包括屬性的順序，順序的HTML屬性選擇器等等。

10.?Flexplorer

這是一個簡單的應用，用來來擺弄各種flexbox特性并查看出現在頁面上的實時的完整代碼。它有一個很酷的特性，你還可以通過它來編輯頁面上的文本框，允許您看到這些變化是如何影響其它內容的。

11.?CSS?Selectors:?Targeting?HTML?Like?a?Pro

Russ?Weakley的新課程，是SitePoint的姐妹網站,這里有超過20個視頻介紹的CSS的Selector元素。這不僅僅是一個簡約的插件，而且作業是一個真正的CSS專家。所以如果你剛剛開始用CSS和還沒掌握選擇器,這可能是一個不錯的選擇。

總結

不管你的CSS水平如何，我可以保證這些東西肯定能幫到你，如果你手上有正在進行的相關項目，或是其它不錯的資源可以拿出來和大家一起分享。?

極客標簽?-?專業和精準的分享，關注你感興趣的極客，社區提供超棒的精品教程，互動授課

了解前端技術，請訪問極客互動課程庫和代碼錄播

閱讀原文：11個實用的CSS學習工具

轉載于:https://my.oschina.net/gbin1/blog/312908

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的11个实用的CSS学习工具的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。