基于内联HTML样式生成样式表？

我一直在为我的网站的不同部分设计样式，但是我还没有将我的内联样式放入样式表中。我想知道是否存在解析HTML文件并从中生成样式表的工具。例如，这里是我的网站的一个片段：基于内联HTML样式生成样式表？

<div class="block" style="border:1px solid"> 
    <img id="profile-pic" style="float:left;border:0px"/> 
</div>

而且我希望能够产生这样的：

.block { 
    border: 1px solid; 
} 

#profile-pic { 
    float: left; 
    border: 0px; 
}

难道这样的事情存在吗？

来源

2012-06-17 n0pe

这可能是此重复：HTTP：//计算器.com/questions/2546960/tool-to-automate-conversion-inline-css-to-external-css – nbsp

@nbsp;我会看看那里列出的一些工具。但是，我已经尝试了大部分这些工具，并且他们通常不在意您是否已经命名了内联类/编号 – n0pe

因此会有大量重复;这是关心的吗？ – nbsp

在这里，我写了一个函数来做到这一点（特异性不会是完美的，但它会让你开始）：

function getInlineStyles() { 
    var stylesList = "", 
     thisElement, 
     style, 
     className, 
     id; 
    $("*", "body").each(function() { 
    thisElement = $(this); 
    style = thisElement.attr("style"); 
    className = thisElement.attr("class"); 
    id = thisElement.attr("id"); 
    if (id !== undefined) { 
     stylesList += " #" + id; 
    } 
    if (className !== undefined) { 
     stylesList += " ." + className; 
    } 
    if (id !== undefined || className !== undefined) { 
     stylesList += "{"; 
    } 
    if (style !== undefined) { 
     stylesList += style; 
    } 
    if (id !== undefined || className !== undefined) { 
     stylesList += "}"; 
    } 
    }); 
    return stylesList; 
}

来源

2012-06-17 21:15:42 nbsp

哇，这很有道理，我甚至没有考虑写js来为我做。接受的答案改变了，因为这给我一个自动化的解决方案 – n0pe

尝试使用Firebug。在CSS中的一部分，你有这样的事情：

element.style {
border: 1px solid;
}

为<div class="block">

在.block { }只需复制这一点，这就是它！这并不容易，但它可以提供帮助。

来源

2012-06-17 16:38:37

不是一个坏主意，它只能复制只有行。谢谢 – n0pe

这可以帮助你http://primercss.com/。它从ID和类生成一个CSS脚本。它无法阅读元素的风格，但你可以更快地完成工作。我希望它能帮助你！ :) –

不，没有这样的工具。不止一节课你做什么？或者一个班级和一个ID？或者是具有ID的元素的子元素？

不，HTML以复杂的方式被解析，以这种方式创建高效的CSS代码。您需要手动完成。

对此的一般方法是采用内联-css重页并在本地下载。然后，从头开始重构页面。好的一面是你只需要做一次CSS。一旦你有一个全局样式表，剩下的页面就会正确放置。

来源

2012-06-17 16:41:54

基于内联HTML样式生成样式表？

回答

相关问题