11個實用的CSS學習工具

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。

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水平如何，我可以保證這些東西肯定能幫到你，如果你手上有正在進行的相關專案，或是其它不錯的資源可以拿出來和大家一起分享。