将内联样式转换为CSS规则 [英] Convert inline styles to css rules

问题描述

如果有一种将内联元素样式转换为CSS规则的方法，我会很有趣.我认为最困难的部分是生成所需的CSS选择器.可能根本不可能，但是可能有js或php解决方案.谢谢.

I'm interesting if there is a way to convert inline element styles to the css rules. The hardest part, I think, is to generate needed css-selectors. May be it's not possible at all, but may be there is a solution with js or php. Thank you.

例如，

<div class="red" style="color: #red"></div>
<div style="color: #yellow"></div>
<div id="white" style="color: #white"></div>

假定类和ID为

，

将被转换为

will be converted, assuming classes and ids to

<style>
    div{color: #yellow}
    .red{color: #red}
    #white{color: #white}
</style>

<div class="red"></div>
<div></div>
<div id="white"></div>

我的模板生成器需要它，它的样式不是内联的，而是在单独的文件或标记中，因此在编辑颜色，字体等时，不会更改块的原始html代码.我认为，我解释清楚，因为英语不是我的母语)

I need this for my template generator, it preffered styles to be not inline, but in separate file or tag, so the original html code of blocks won't be changed, while editing colors, fonts, etc. I think, i explain clearly, cause english isn't my native language)

推荐答案

尝试 http://extractcss.com ，但是正如@Tushar所指出的那样，黄色div无法正常工作.

Try http://extractcss.com, but as @Tushar pointed out, the yellow div won't work.

也尝试 https://github.com/jonkemp/extract-css 有前途的.

这篇关于将内联样式转换为CSS规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！