生成基于内联 HTML 样式的样式表？答案

【问题标题】：Generating a stylesheet based on inline HTML styling?生成基于内联 HTML 样式的样式表？
【发布时间】：2012-06-17 15:21:06
【问题描述】：

一段时间以来，我一直致力于为网站的不同部分设置样式，但是我还没有将我的内联样式放入样式表中。我想知道是否存在解析 HTML 文件并从中生成样式表的工具。例如，这是我网站的一个 sn-p：

<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;
}

这样的东西存在吗？

【问题讨论】：

这可能与此重复：stackoverflow.com/questions/2546960/…
@nbsp;我将查看其中列出的一些工具。但是，我已经尝试过大多数这些工具，它们通常不在乎你是否已经将类/id 命名为内联
所以会有很多重复；是这个问题吗？
@nbsp;不是真的，我宁愿修复重复而不是构建原始样式表

标签： html css parsing styles code-generation

【解决方案1】：

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

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;
}

【讨论】：

哇，这很有道理，我什至没有想过写js来为我做这件事。接受的答案已更改，因为这给了我一个自动化的解决方案。

【解决方案2】：

尝试使用 Firebug。在 CSS 部分你有这样的东西：

element.style {
border: 1px solid;
}

为<div class="block">

只需将其复制到.block { } 即可！这并不容易，但它可以提供帮助。

【讨论】：

不错的主意，它比仅复制行要好。谢谢
这可以帮助你primercss.com。它从 ids 和 classes 生成一个 CSS 脚本。它无法读取元素的样式，但您可以更快地完成工作。我希望它会帮助你！ :)

【解决方案3】：

不，没有这样的工具。当有不止一堂课时，你会怎么做？还是一个班级和一个ID？或者是具有 ID 的元素的子元素？

不，以这种方式解析 HTML 以创建高效的 CSS 代码非常复杂。您需要手动执行此操作。

这方面的一般方法是采用 inline-css 重页，并在本地下载。然后，从头开始重建页面。好的一面是您只需要执行一次 CSS。一旦你有了一个全局样式表，剩下的页面就会就位了。

【讨论】：