1

一段时间以来，我一直致力于为网站的不同部分设置样式，但是我还没有将我的内联样式放入样式表中。我想知道是否存在解析 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;
}

这样的事情存在吗？

4

3 回答 3

4

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

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-17T21:15:42.353 回答
1

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

element.style {
border: 1px solid;
}

为了<div class="block">

把这个复制进去就行.block { }了！这并不容易，但它可以提供帮助。

于 2012-06-17T16:38:37.333 回答
-1

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

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

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

于 2012-06-17T16:41:54.367 回答