保存网页并压缩css

晚上好

---

我有一个html页面+20 css文件导入。如何将这些链接到一个css文件中，并仅提取与html页面相关的css规则？

创建一个空白css文件。将所有CSS复制到该文件中。缩小新的CSS文件。导入新的CSS文件并删除对所有其他CSS文件的引用。让浏览器“只提取与html页面相关的css规则”

这个问题并不能解决OP的问题。然而，它留在这里作为来自搜索引擎的客人的参考

你的方法有点缺陷

请允许我将您转到Chris Coyer@CSS Tricks的一篇精彩文章：

以下是简短的版本，根据这种方法，每个页面最多应该有3个CSS文件：

global.css-包含站点级规则（正文背景、css重置、排版等）

css-它包含节级规则，我的意思是，Stack Overflow的主页将具有特定的样式，而所有FAQ共享另一个不同的FAQ特定规则文件

page.css-包含页面级规则。如果某个页面需要一个特定的规则（比如说，关于页面），它们就会放在这里

原因是，不会更改的文件会被缓存。这意味着，用户只需下载一次CSS文件（假设它不会更改），在以后的访问中，该文件将从用户的机器上加载，从而节省宝贵的时间和带宽

如果提供一个基于用户正在查看的页面生成的文件，则会丢失该缓存功能。因此，虽然文件大小会更小，但您需要反复下载文件

tl；博士

---

制作一个保持静态的全局CSS文件，缩小它并提供服务。然后在你的站点/应用程序的不同部分创建一堆更具体的CSS文件。在需要第三页特定文件的地方，这种情况很少发生。

我想不出一个简单的解决方案。但是如果使用jQuery，可以尝试以下代码。它在CSS中搜索DOM中的每个元素并将其输出。只需将其粘贴到

部分的

标记中，并确保包含jQuery

仅使用Chrome和进行了测试，但它也应该适用于更复杂的样式表和DOM结构

$(function(){
    var styles = new Array;
    $('body, body *').each(function(index, element){
        //Get all stylesheets
        var sheets = document.styleSheets;
        for(var i in sheets) {
            //For every stylesheet...
            var rules = sheets[i].rules || sheets[i].cssRules;
            for(var r in rules) {
                //Check or every rule if it matches the element & check if already appended
                if($(element).is(rules[r].selectorText) &&
                   $.inArray(rules[r].cssText,styles) == -1){
                    //Append CSS to array
                    styles.push(rules[r].cssText);
                }
            }
        }
    });
    //Output
    $('body').text(styles.join(''));
});
        ​

---

关键是提供尽可能小的文件大小。因此，将其留给浏览器似乎不是最好的选择。OP希望将所有文件连接成一个文件。我的回答符合他的要求。当然，“最佳”情况是OP将所有相关的CSS分割出来，并将其阻塞到一个CSS文件中。不过OP并不是这么问的。html页面是由我的Drupal安装生成的。我的意图是使html页面成为独立的web页面，独立于Drupal。因此，我正在寻找一种方法，将多个css文件连接成一个css文件。@Morten:在这种情况下，我的答案是无效的。我将把它留在这里作为参考，但它不是解决你问题的合适办法。