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

Question

我一直在设计网站的不同部分，但是我还没有将我的内联样式放入样式表中。我想知道是否存在一种工具来解析 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;
}

这样的东西存在吗？

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

Answer 2

试试火虫。在CSS部分，你有这样的东西：

element.style {
border: 1px solid; }

对于<div class="block">

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

Answer 3

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

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

对此的一般方法是采用内联 css 繁重的页面，并将其下载到本地。然后，从头开始重建页面。好的一面是你只需要做一次CSS。一旦你有一个全局样式表，其余的页面将直接到位。