11個學習CSS實用工具和資源

最近業內充斥着關於Sass的文章、教程。甚至在SitePoint這裏,我們已經發布比以往更多內容的Sass工具。

但是,我們並沒有忘記我們的根:CSS。

對於那些仍然在學習CSS,或者想要去一點點深入到具體的CSS主題的朋友,我想我會將最近幾個月遇到的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

一個像Codepen一樣學習CSS的聖地,它只專注於CSS。你可以在菜單中選擇一個CSS功能,然後使用 GUI 在文檔中編輯此功能。

圖片描述

7.CSS Guidelines

Harry Roberts 已經更新了他的CSS準則。之前只是GitHub上的一個庫,現在已經有了自己的域名,並且已擴展和優化。Harry還實施了“支付你想要什麼”的模式,以幫助支持發展。

圖片描述

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



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章