html标签到css工具答案

【问题标题】：html tags to css toolhtml标签到css工具
【发布时间】：2011-02-09 00:18:21
【问题描述】：

我正在做一些网络开发，设计师从 photoshop 中切片和导出。生成的代码是可怕的。我要做的第一件事就是从标签中取出所有内容并将它们放入 css 文件中。所以我想知道是否有一个工具可以自动执行此操作？

【问题讨论】：

您的意思是，例如，采用blah 并输出一个与该特定范围匹配的CSS 规则并在CSS 中定义这些规则（而不是在style 属性中）？会很酷，但是需要用户注意，因为如果所涉及的元素没有 ID，那将是 very 脆弱的，取决于特定的 HTML 结构并且如果你改变它就会损坏几乎完全没有结构......
@T.J.：他可能想自动添加类名。
@SLaks：现在这是个好主意，尽管将类名散布在各处（尤其是针对特定元素的类名）并不一定比使用style 有所改进。但是，嘿，这是一个开始，从它的声音来看，这就是他正在寻找的一切。
它可以询问类名。

【解决方案1】：

我会写自己的脚本，在这里你可以得到一些启发：

这恰恰相反，但是如果你喜欢 Ruby，可能你可以研究一下代码：在 github 上搜索 premailer，它使用 Hpricot gem。

当然，如果不想花时间编码你可以使用tidy：

tidy -clean your-crap-inlined-file.html

如果您的 your-crap-inlined-file.html 包含： Some TEXT ...

它将替换它插入这样的东西

<style type="text/css">
/*<![CDATA[*/
 p.c1 {color:red;}
/*]]>*/
</style>

在您的文件顶部，同时它将您的内联代码替换为：

<p class="c1">Some TEXT ...</p>

【讨论】：

【解决方案2】：

HTML Tidy 是一个很棒的工具。它不会完全按照您的要求做，但如果您使用生成的 html，它可能是一个好的开始。这是一个在线实例：http://infohound.net/tidy/

【讨论】：

【解决方案3】：

这将是一个有趣的工具。

我想我的第一个问题是，photoshop 制作的代码是语义化的吗？ IE。会不会有一个<H1> 作为主要主题.. 和 用于段落等。

那么当涉及到 css 时，你肯定不会创建高质量的代码。但是，在我看来，您并不是真正的前端人员。这让任何答案都变得更加困难..

最佳答案：手动编码.. 代码会更好。下一个答案：手工编码不可能？还有一些其他的选择。

一个很好的教程是here.. 但是，它基本上可以帮助您编写代码。

【讨论】：