从HTML文件提取CSS样式到外部CSS文件

Question

有没有办法将html文档中的硬编码样式提取到外部CSS文件？如果不是，你有一个想法如何做到这一点？你以前做过吗？

自例如

<div style="background-color: red"> 
<a style="font-weight: bold"></a> 
</div> 

到

<div id='st-01'> 
<a id='st-02'><a/> 
</div> 

#st-01 { background-color: red } 
#st-02 { font-weight: bold } 

Answer 1

你正在寻找不完全是对，但如果你不介意的复制和粘贴您的HTML，试试这个。没有太多的功能，但它的工作！

http://extractcss.com/

https://github.com/peterlazzarino/Inline-CSS-Extractor

Answer 2

你可以使用一些JS/jQuery代码提取样式，清除它们，给元素的ID，并添加了CSS。 检查这个例子，你可以进一步扩展它。

$(document).ready(function(){ 
    var i = 0; 
    var css = ""; 
    $("div,a").each(function(){ 
     $(this).attr("id","st-"+i); 
     css += "#"+$(this).attr("id")+"{"+$(this).attr("style")+"}"; 
     $(this).removeAttr("style"); 
     i++; 
    }); 
    $("style").html(css); 
}); 

http://jsfiddle.net/d8TaJ/