在演示頁面中查看css樣式

Question

是否有一個應用程序將采用.css文件並輸出它的演示頁面？

喜歡占用所有span / div / a元素並在html頁面中顯示它們的樣子？

Answer 1

...沒有關聯的（X）HTML文件？

如果您需要做的事涉及CSS而不了解其關聯的（X）HTML文檔的結構或類或ID ......那么編寫一個小頁面並在瀏覽器中預覽它是不是很簡單？

不要冒犯，但我個人認為在沒有（X）HTML文檔的情況下預覽CSS有點奇怪。 原因如下：

如果你從CSS開始，你可能會嘗試讓你的CSS迎合你的CSS，而它應該是相反的方式。 從CSS開始，然后編寫頁面感覺就像是一個很好的方式來結束凌亂的HTML，如果我必須選擇（凌亂的HTML和干凈的CSS）或（干凈的HTML和凌亂的CSS）我個人會選擇干凈的HTML每次。

您還提到了目標<div>和<span> 。 這是一個個人觀點，但我非常強烈地認為人們不應該在沒有class或id屬性的情況下定位<div>和<span> 。 由於<div>和<span>沒有語義含義，我無法想象為什么你需要設置它們的樣式，除非你重置CSS或滿足要求，並且你的客戶更有可能要求“所有員工姓名都應加下划線“或”跨度應加下划線“？ ...但是一旦你定位了class和id，就需要你的HTML文檔與你的CSS一起使用。

Answer 2

雖然這不會自動生成css中的任何內容，但這是一個出色的XHTML測試頁面，其中包含您可能使用的所有標准標記，頁面和表單元素。 將您的樣式表應用到此頁面，您將有80％的方式。 然后只需為自定義類添加區域等.http：//snipplr.com/view/8121/html-test-page-for-css-style-guide

Answer 3

TopStyle使用內部視圖執行此操作。 這是一個很好的工具。

http://www.topstyle4.com/

Answer 4

試試rendur： http： //rendur.com/

我同意理查德的說法，如果你要設計原始的div和span元素，你不應該期待太多。 :)