類似於tryruby.org或codecademy.com的CSS學習控制檯

Question

去年學習Ruby時，我參加了TryRuby的快速課程......它基本上是一個交互式終端，它執行ruby命令並通過語言握住你的手。

同樣，在Codecademy上，他們會讓你在控制檯內執行越來越高級的JavaScript，以便你可以學習該語言。

是否有類似的網站/應用程序/插件存在，這將使我通過一系列練習來熟悉CSS？

謝謝！

Answer 1

目前在CSS上沒有這樣全面的在線教程。

不過，我建議http://dabblet.com/學習HTML CSS & - 它有一些特點，使得它比的jsfiddle更大：您鍵入的內容的

• 實時預覽：你不需要手動觸發它;
• -prefix-free默認情況下，可以對新手有用，所以你不需要從一開始就混淆所有這些東西;
• 真棒預覽器爲不同的屬性（顏色，梯度，尺寸，角度等），所以它會很容易理解，如果你做錯了什麼。

順便說一句，這是一個偉大的想法 - 建立基於任何一個工具可在網上開放教程，我希望有人會做它（如果沒有人會，好吧，也許我會找一些時間的話） 。

Answer 2

JSFiddle.net將允許您在其控制檯中運行HTML，CSS和Javascript。儘管如此，他們並不真正提供上下文提示。

如果您使用Mac，Coda有一個很好的CSS工具，這將是一個很好的入門方法。 Espresso做了類似的事情，但我使用Coda，所以我無法評論Espresso。

如果您使用Firefox，請下載Firebug。如果您使用的是Safari或Chrome，請查看開發者控制檯（右鍵單擊 - >檢查元素）。您可以編輯頁面上的樣式，並立即觀看它們的效果。這是一個很棒的工具。

對不起，我沒有真正意識到任何確切的目標給你，但希望我提到的工具將有所幫助。 CSS的確是一些不會花費幾個小時才能掌握的東西。從那裏，它只是學習不同的效果和選項的問題。

Answer 3

您可以使用Firebug或瀏覽器的開發工具，它們很可能允許您動態編輯CSS。

然後，您也可以嘗試JSFiddle。也就是說，我傾向於使用開發工具和JSFiddle一起使用。